Table Component

ℹ️

The Table component is a versatile and customizable React component for rendering tables. It supports various variants, sizes, and options for pinning rows and columns. The component also includes sub-components for the table head (Thead), table body (Tbody), table row (Tr), table data (Td), and table header (Th), allowing for structured table creation. This component is inspired by the DaisyUI (opens in a new tab) framework's design for tables but our component is more flexible and customizable and easy to use with React, and NextJS.

Example Preview

Table Example

Usage

import { Table } from "@/@core";
 
// Render Table component with sub-components
const MyTableComponent = () => {
  return (
    <Table variant="zebra" size="md" rowsPin={true} colsPin={false}>
      <Table.Thead>
        <Table.Tr>
          <Table.Th>Header 1</Table.Th>
          <Table.Th>Header 2</Table.Th>
        </Table.Tr>
      </Table.Thead>
      <Table.Tbody>
        <Table.Tr>
          <Table.Td>Data 1</Table.Td>
          <Table.Td>Data 2</Table.Td>
        </Table.Tr>
      </Table.Tbody>
    </Table>
  );
};
 
export default MyTableComponent;

Props

Table

Prop name	Type	Default value	Required	Description
`children`	`ReactNode`	-	Yes	Content to display within the table.
`variant`	`'zebra'`, `'simple'`	`'simple'`	No	Variant of the table.
`size`	`'xs'`, `'sm'`, `'md'`, `'lg'`	`'md'`	No	Size of the table.
`rowsPin`	`boolean`	`false`	No	Pin rows in the table.
`colsPin`	`boolean`	`false`	No	Pin columns in the table.
`className`	`string`	-	No	Additional CSS class names for styling.

ℹ️

Note: The Table component accepts additional HTML attributes (HTMLAttributes<HTMLDivElement>).

Sub-Components

Table.Thead, Table.Tbody, Table.Tr, Table.Td, Table.Th

Each sub-component corresponds to a specific part of the table (head, body, row, data, and header). These components accept the children prop for content and optional className for additional styling.

Example

Here is an example of using the Table component with sub-components:

<Table variant="zebra" size="md" rowsPin={true} colsPin={false}>
  <Table.Thead>
    <Table.Tr>
      <Table.Th>Header 1</Table.Th>
      <Table.Th>Header 2</Table.Th>
    </Table.Tr>
  </Table.Thead>
  <Table.Tbody>
    <Table.Tr>
      <Table.Td>Data 1</Table.Td>
      <Table.Td>Data 2</Table.Td>
    </Table.Tr>
  </Table.Tbody>
</Table>

This will render a table with a zebra variant, medium size, and pinned rows. You can customize the content, variant, size, and pin options as needed.

ℹ️

Note: The Table component is a flexible React component designed for creating structured tables with ease. It supports customization of styles, headers, and rows, making it suitable for various use cases in displaying tabular data. This component is inspired by the DaisyUI (opens in a new tab) framework's design for tables. Check it out for more awesome components.

Steps Tabs