Table - Keep React
Table of Contents#
- Default Table
- Transactions Table
- Orders Table
- Files Uploaded Table
- Hoverable Table
- Striped Table
- Bordered Table
- API Reference
Default Table#
The Default Table serves as a foundational example, which can be customized and extended according to specific application needs.
Status | Role | Email Address | Team | Performance | |||
|---|---|---|---|---|---|---|---|
 Developer | Active | UI/UX Designer | nevaeh.simmons@example.com | Product Marketing |  20% | ||
 Designer | Graphic Designer | alice.johnson@example.com | Design Creative | 18% | |||
 Manager | Active | Project Manager | john.smith@example.com | Management Leadership | 22% | ||
 Developer | Active | Full Stack Developer | emma.davis@example.com | Development Technology | 25% | ||
 Designer | UI Designer | sophia.turner@example.com | Design Art | 16% |
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.
Date | Amount | Status | Received Date | |||
|---|---|---|---|---|---|---|
 | Delivered | |||||
 | Delivered | |||||
 | Delivered | |||||
 | Delivered | |||||
 | Delivered |
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.
Date | Country | State | Quant. | Total Price | Location | |||
|---|---|---|---|---|---|---|---|---|
 | Delivered | |||||||
 | Delivered | |||||||
 | Delivered | |||||||
 | Delivered | |||||||
 | Delivered |
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.
File size | Date uploaded | Last uploaded | Team | |||
|---|---|---|---|---|---|---|
 | +9 | |||||
| +9 | |||||
| +9 | |||||
| +9 | |||||
| +9 |
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.
Status | Role | Email Address | Team | Performance | |||
|---|---|---|---|---|---|---|---|
Developer | Active | UI/UX Designer | nevaeh.simmons@example.com | Product Marketing | 20% | ||
Designer | Graphic Designer | alice.johnson@example.com | Design Creative | 18% | |||
Manager | Active | Project Manager | john.smith@example.com | Management Leadership | 22% | ||
Developer | Active | Full Stack Developer | emma.davis@example.com | Development Technology | 25% | ||
Designer | UI Designer | sophia.turner@example.com | Design Art | 16% |
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.
Status | Role | Email Address | Team | Performance | |||
|---|---|---|---|---|---|---|---|
Developer | Active | UI/UX Designer | nevaeh.simmons@example.com | Product Marketing | 20% | ||
Designer | Graphic Designer | alice.johnson@example.com | Design Creative | 18% | |||
Manager | Active | Project Manager | john.smith@example.com | Management Leadership | 22% | ||
Developer | Active | Full Stack Developer | emma.davis@example.com | Development Technology | 25% | ||
Designer | UI Designer | sophia.turner@example.com | Design Art | 16% |
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.
Status | Role | Email Address | Team | Performance | |||
|---|---|---|---|---|---|---|---|
Developer | Active | UI/UX Designer | nevaeh.simmons@example.com | Product Marketing | 20% | ||
Designer | Graphic Designer | alice.johnson@example.com | Design Creative | 18% | |||
Manager | Active | Project Manager | john.smith@example.com | Management Leadership | 22% | ||
Developer | Active | Full Stack Developer | emma.davis@example.com | Development Technology | 25% | ||
Designer | UI Designer | sophia.turner@example.com | Design Art | 16% |
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 |