Table

The Table is a layout component to display data in a tabular format. It's a great way to display data in a structured way, and it's also a great way to compare data.

Importation

Import the component from pol-ui to use the Table element:

import { Table } from "pol-ui";

Default Table

import { Table } from "pol-ui";
const mockUsers = [
  {
    id: 1,
    name: "Albert Arrebola",
    username: "arrebolsillo",
    email: "bolarre@polui.com",
    address: "Calle Eucalipto 66",
  },
  {
    id: 2,
    name: "Cristina Llull",
    username: "cristinallull",
    email: "cristinallull@polui.com",
    address: "Calle 123",
  },
  {
    id: 3,
    name: "Berta Pasamontes",
    username: "donutconchocolate",
    email: "donutconchocolate@polui.com",
    address: "Avenida 123",
  },
  {
    id: 4,
    name: "Pepito Grillo",
    username: "PepeGrillo",
    email: "PepeGrillo@polui.com",
    address: "Pasillo 4",
  },
];
export const TableComponent = (): JSX.Element => {
  const { value, toggle } = useBoolean(false);
  return (
    <Table>
      <Table.Head>
        <Table.HeadCell>Name</Table.HeadCell>
        <Table.HeadCell>Username</Table.HeadCell>
        <Table.HeadCell>Email</Table.HeadCell>
        <Table.HeadCell>Address</Table.HeadCell>
        <Table.HeadCell>
          <span className="sr-only">Edit</span>
        </Table.HeadCell>
      </Table.Head>
 
      <Table.Body className="divide-y">
        {mockUsers.map((user) => (
          <Table.Row key={user.id}>
            <Table.Cell>{user.name}</Table.Cell>
            <Table.Cell>{user.username}</Table.Cell>
            <Table.Cell>{user.email}</Table.Cell>
            <Table.Cell>{user.address}</Table.Cell>
            <Table.Cell>
              <div className="flex gap-1">
                <IconButton title="Edit">
                  <TbEdit />
                </IconButton>
                <IconButton title="Edit" color="info">
                  <TbEye />
                </IconButton>
              </div>
            </Table.Cell>
          </Table.Row>
        ))}
      </Table.Body>
    </Table>
  );
};

Props

Prop name	Type	Default	Description
children	React.ReactNode		The content of the Table
className	string		The class of the Table
striped	boolean	false	If true, the Table will have striped rows
hoverable	boolean	false	If true, the Table will have hoverable rows
hasShadow	boolean	true	If true, the Table will have a shadow
theme	TableTheme		The theme of the Table

TableHead

Prop name	Type	Default	Description
theme	TableHeadTheme		The theme of the TableHead

💡

You can also provide any prop comming from the HTML thead tag.

TableHeadCell

Prop name	Type	Default	Description
TableHeadCellTheme		The theme of the TableHeadCellTheme

💡

You can also provide any prop comming from the HTML th tag.

TableRow

Prop name	Type	Default	Description
TableRowTheme		The theme of the TableRowTheme

💡

You can also provide any prop comming from the HTML tr tag.

TableBody

Prop name	Type	Default	Description
TableBodyTheme		The theme of the TableBodyTheme

💡

You can also provide any prop comming from the HTML tbody tag.

TableCell

Prop name	Type	Default	Description
TableCellTheme		The theme of the TableCellTheme

💡

You can also provide any prop comming from the HTML td tag.

Theme

To learn more about how to customize the appearance of components, please see the Theme docs.

interface TableTheme {
  root: {
    base: string;
    shadow: string;
    wrapper: string;
  };
  head: {
    base: string;
    cell: {
      base: string;
    };
  };
  row: {
    base: string;
    hovered: string;
    striped: string;
  };
  body: {
    base: string;
    cell: {
      base: string;
    };;
  };
}