The "Basic Table" component provides a straightforward way to create structured tables in your web applications. This table style is clean and minimal, making it suitable for a wide range of use cases.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Angelina | Jolie | @angelinajolie |
| 2 | Brad | Pitt | @bradpitt |
| 3 | Charlie | Hunnam | @charliehunnam |
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Angelina | Jolie | @angelinajolie |
| 2 | Brad | Pitt | @bradpitt |
| 3 | Charlie | Hunnam | @charliehunnam |
The example above demonstrates how to create a basic table with columns for "First Name," "Last Name," and "Username." The table is easy to read and can be customized further to suit your application's needs. Use the "Basic Table" component when you want a simple, clean table structure without additional styling or complexity.
The "Bordered Table" component is a variation of the basic table, with the added feature of borders around the table and its cells. This styling choice enhances the visual distinction between rows and columns, making the table content more defined and organized.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Angelina | Jolie | @angelinajolie |
| 2 | Brad | Pitt | @bradpitt |
| 3 | Charlie | Hunnam | @charliehunnam |
In this example, a "Bordered Table" is created with borders around the table and its cells. This added visual distinction can be particularly useful when you want to emphasize the structure of your table. Use the "Bordered Table" component when you need a table with well-defined borders to enhance the visual separation between rows and columns.
The "Hoverable Table" component is designed to enhance the user experience by adding a hover effect to the table rows. When users hover their mouse over a row, it becomes highlighted, providing a visual cue and improving interactivity.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Angelina | Jolie | @angelinajolie |
| 2 | Brad | Pitt | @bradpitt |
| 3 | Charlie | Hunnam | @charliehunnam |
In this example, a "Hoverable Table" is created by adding the hover prop to the Table component. As users hover over rows, they visually respond by highlighting, making it easier to track their interactions. Use the "Hoverable Table" component when you want to improve user engagement and provide a more interactive experience in your table-based content.
The "Table Row States" feature allows you to add visual indicators to table rows, enhancing the presentation and conveying additional information to users. You can apply different styles to rows to represent various states or categories, making your tables more informative and engaging.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Angelina | Jolie | @angelinajolie |
| 2 | Brad | Pitt | @bradpitt |
| 3 | Charlie | Hunnam | @charliehunnam |
In this example, we've applied different row states to highlight specific rows:
By using "Table Row States," you can visually differentiate rows based on their significance or category, making it easier for users to understand the content within the table.
The "Table Head Options" feature allows you to customize the appearance of the table header to better match your application's design and styling. You can choose between two different variants: "dark" and "light," each offering a distinct visual style for the table header.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Angelina | Jolie | @angelinajolie |
| 2 | Brad | Pitt | @bradpitt |
| 3 | Charlie | Hunnam | @charliehunnam |
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Angelina | Jolie | @angelinajolie |
| 2 | Brad | Pitt | @bradpitt |
| 3 | Charlie | Hunnam | @charliehunnam |
In this example, we showcase two different table headers using the "dark" and "light" variants:
By using "Table Head Options," you can align your table headers with your application's design scheme, ensuring a cohesive and aesthetically pleasing user interface.
The "Responsive Table" feature ensures that your table content adapts gracefully to different screen sizes, offering an optimal viewing experience on both large desktop screens and smaller mobile devices. When you enable the "Responsive Table" component, it allows users to scroll horizontally to view the entire table, ensuring that no data is cut off on smaller screens.
| # | First Name | Last Name | Username | Address | |
|---|---|---|---|---|---|
| 1 | Angelina | Jolie | @angelinajolie | angelinajolie@gmail.com | 260 W. Storm Street New York, NY 10025. |
| 2 | Brad | Pitt | @bradpitt | bradpitt@gmail.com | 47 Division St. Buffalo, NY 14241. |
| 3 | Charlie | Hunnam | @charliehunnam | charliehunnam@gmail.com | 8023 Amerige Street Harriman, NY 10926. |
In this example, a "Responsive Table" is created by wrapping it within a container with horizontal overflow. This allows users to scroll horizontally to view the complete table, ensuring that all columns and data remain accessible on smaller screens. Use the "Responsive Table" component when you want your table to maintain readability and usability across various devices, regardless of screen size.
The "Small Table" component allows you to create a compact and space-efficient table, ideal for situations where you need to display tabular data in a confined space or emphasize a minimalistic design. By adding the sm (small) prop to the table, you can reduce the overall size of the table, making it more suitable for displaying information in a concise manner.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Angelina | Jolie | @angelinajolie |
| 2 | Brad | Pitt | @bradpitt |
| 3 | Charlie | Hunnam | @charliehunnam |
In this example, a "Small Table" is created by applying the sm prop to the table component. This reduces the table's overall size, making it more compact and suitable for situations where space is limited. Use the "Small Table" component when you need to display tabular data in a constrained space or when you want to maintain a clean and minimalist design.
The "Striped Rows Table" feature enhances the readability and visual appeal of your tables by applying alternating background colors to rows. This creates a clear distinction between even and odd rows, making it easier for users to track and interpret tabular data.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Angelina | Jolie | @angelinajolie |
| 2 | Brad | Pitt | @bradpitt |
| 3 | Charlie | Hunnam | @charliehunnam |
In this example, a "Striped Rows Table" is created by adding the striped prop to the table component. Even-numbered rows are styled with a background color, while odd-numbered rows remain with the default background. This alternating pattern improves the visual separation of rows and enhances the overall readability of the table. Use the "Striped Rows Table" component when you want to present tabular data in a visually organized and easy-to-read format.
In this section, you will find detailed information about the available props, classes, and options that can be used with the component. Understanding these properties is essential for customizing and configuring the component to suit your specific requirements.
Below is a list of props that can be passed to the component:
| Prop | Type | Description |
|---|---|---|
| `dark` | `boolean` | Enables dark mode styling for the table. |
| `bordered` | `boolean` | Adds borders to the table cells. |
| `hover` | `boolean` | Enables hover effects on table rows. |
| `striped` | `boolean` | Alternates row background colors for improved readability. |
| `sm` | `boolean` | Reduces the size of the table for a more compact display. |
| Prop | Type | Description |
|---|---|---|
| `variant` | `default`, `light`, `dark` | Sets the variant style for the table head. |
| Prop | Type | Description |
|---|---|---|
| No spesific props | ||
| Prop | Type | Description |
|---|---|---|
| No spesific props | ||
| Prop | Type | Description |
|---|---|---|
| No spesific props | ||
| Prop | Type | Description |
|---|---|---|
| No spesific props | ||
