Table - Keep React

A Table Component is a fundamental user interface element used to present data in a structured and organized format. Tables consist of rows and columns, with each row representing a data entry and each column representing a specific attribute or field. Tables are commonly used to display tabular data, such as lists, grids, or datasets, making information easier to comprehend and compare.

Default Table#

The Default Table serves as a foundational example, which can be customized and extended according to specific application needs.

Team member
100 Member
Type	Status	Role	Email Address	Team	Performance
Ralph Edwards &ralph	Active	UI/UX Designer	nevaeh.simmons@example.com	ProductMarketing+3	20%
Wade Warren &ralph	Offline	Scrum Master	curtis.weaver@example.com	ProductMarketing+3	20%
Eleanor Pena &ralph	Active	Software Tester	nathan.roberts@example.com	ProductMarketing+3	30%
Jerome Bell &ralph	Offline	JS Developer	arif.jsdev@example.com	JavascriptReact+7	50%
Macky Scheman &ralph	Active	Web Developer	macky.jsdev@example.com	AdobeFigma+6	40%

Transactions Table#

Transactions Table is a specialized type of Table Component designed specifically to display transaction-related data. This type of table typically includes information about various transactions, such as financial transactions, order history, or any other type of recorded actions.

Cash Out Transactions
Type	Date	Amount	Status	Received Date
Paypal Withdraw	Jan 19, 2022 3:45 pm	$652.00	Delivered	Jan 19, 2022 3:45 pm
Visa Withdraw	Jan 10, 2023 4:45 pm	$534.00	Delivered	Jan 19, 2022 3:45 pm
Stripe Withdraw	Mar 12, 2023 4:00 pm	$123.00	Delivered	Jan 19, 2022 3:45 pm
Western Union Withdraw	Nov 23, 2023 5:30 pm	$434.00	Delivered	Jan 19, 2022 3:45 pm
Mastercard Withdraw	Apr 23, 2023 7:30 pm	$786.00	Delivered	Jan 19, 2022 3:45 pm

Orders Table#

Orders Table is a specific type of Table Component designed to display information related to orders in a structured and organized format. This type of table is commonly used in e-commerce platforms or order management systems to present details about customer orders.

Orders
Order no.	Date	Country	State	Quant.	Total Price	Location
DL - 19266755	Jan 19, 2022 3:45 pm		Delivered	3	$21,000	285 Great North Road, Grey Lynn.
DL - 34233451	Jan 23, 2022 4:45 pm		Delivered	6	$13,000	19 Great North Road, Grey Lynn
DL - 19266567	Jan 31, 2022 5:45 pm		Pending	8	$24,000	19 Great North Road, Grey Lynn
DL - 19266755	Jan 19, 2022 3:45 pm		Delivered	9	$82,000	686 Great South Road, Manukau
DL - 19264155	Jan 07, 2022 02:45 pm		Pending	3	$21,000	20 Poland Road, Wairau Valley
DL - 19266755	Jan 19, 2022 3:45 pm		Delivered	3	$21,000	285 Great North Road, Grey Lynn.

Files Uploaded Table#

A Files Uploaded Table is a specialized Table Component designed to display information about uploaded files in a structured and organized manner. This type of table is commonly used in applications that involve file management, document sharing, or any scenario where tracking and presenting information about uploaded files is necessary.

Files uploaded
File no.	File size	Date uploaded	Last uploaded	Team
Static Next Plan.pdf 200 KB	Total 0.2 MB 200 KB	Jan 10, 2023 4:45 pm	Jan 10, 2023
Static Next Plan.pdf 700 KB	Total 0.7 MB 700 KB	Jan 12, 2023 4:12 pm	Jan 15, 2023
Static Next Plan.pdf 500 KB	Total 0.5 MB 500 KB	Nov 23, 2023 02:45 pm	Nov 10, 2023
Static Next Plan.pdf 900 KB	Total 0.9 MB 900 KB	Feb 21, 2023 3:45 pm	Jan 10, 2023
Static Next Plan.pdf 200 KB	Total 0.1 MB 100 KB	Mar 25, 2023 8:45 pm	Apr 10, 2023

Hoverable Table#

The Hoverable Table is designed to make it easier for users to identify which row or cell they are interacting with, especially in larger tables where rows and cells might be closely packed.

Files uploaded
File no.	File size	Date uploaded	Last uploaded	Team
Static Next Plan.pdf 200 KB	Total 0.2 MB 200 KB	Jan 10, 2023 4:45 pm	Jan 10, 2023
Static Next Plan.pdf 700 KB	Total 0.7 MB 700 KB	Jan 12, 2023 4:12 pm	Jan 15, 2023
Static Next Plan.pdf 500 KB	Total 0.5 MB 500 KB	Nov 23, 2023 02:45 pm	Nov 10, 2023
Static Next Plan.pdf 900 KB	Total 0.9 MB 900 KB	Feb 21, 2023 3:45 pm	Jan 10, 2023
Static Next Plan.pdf 200 KB	Total 0.1 MB 100 KB	Mar 25, 2023 8:45 pm	Apr 10, 2023

Striped Table#

A Striped Table is a type of Table Component that utilizes alternating background colors for its rows. The rows are styled with different background colors, typically in a pattern of light and dark shades.

Files uploaded
File no.	File size	Date uploaded	Last uploaded	Team
Static Next Plan.pdf 200 KB	Total 0.2 MB 200 KB	Jan 10, 2023 4:45 pm	Jan 10, 2023
Static Next Plan.pdf 700 KB	Total 0.7 MB 700 KB	Jan 12, 2023 4:12 pm	Jan 15, 2023
Static Next Plan.pdf 500 KB	Total 0.5 MB 500 KB	Nov 23, 2023 02:45 pm	Nov 10, 2023
Static Next Plan.pdf 900 KB	Total 0.9 MB 900 KB	Feb 21, 2023 3:45 pm	Jan 10, 2023
Static Next Plan.pdf 200 KB	Total 0.1 MB 100 KB	Mar 25, 2023 8:45 pm	Apr 10, 2023

Bordered Table#

A Bordered Table is a type of Table Component in which each cell and row is outlined by borders. These borders can be used to visually separate the cells and rows from each other, creating a well-defined grid structure within the table.

Team member
100 Member
Type	Status	Role	Email Address	Team	Performance
Ralph Edwards &ralph	Active	UI/UX Designer	nevaeh.simmons@example.com	ProductMarketing+3	20%
Wade Warren &ralph	Offline	Scrum Master	curtis.weaver@example.com	ProductMarketing+3	20%
Eleanor Pena &ralph	Active	Software Tester	nathan.roberts@example.com	ProductMarketing+3	30%
Jerome Bell &ralph	Offline	JS Developer	arif.jsdev@example.com	JavascriptReact+7	50%
Macky Scheman &ralph	Active	Web Developer	macky.jsdev@example.com	AdobeFigma+6	40%

API Reference#

Explore the available props for the table component

Property	Description	Type	Default
hoverable	Enables hover effect on table rows.	boolean	false
showCheckbox	Indicates if checkboxes should be displayed in the table.	boolean	false
showBorder	Controls the visibility of the table's borders.	boolean	false
showBorderPosition	Determines the position of the table's borders	left right	right
children	Child components and content to be placed within the table.	ReactNode	content
striped	Applies alternating background colors to table rows for better readability.	boolean	false