Skip to content

Table Component

Description

The Table component provides a structured way to display data in rows and columns. It supports sorting and different row states.

Props - Table

Prop Type Default Description
children ReactNode - The table content (rows and cells).

Props - TableHead & TableBody

Prop Type Default Description
children ReactNode - The table head or body content.

Props - TableRow

Prop Type Default Description
children ReactNode - The table row content (cells).
isSelected boolean false Determines if the row is selected.
status "removed" | "edited" | "error" - Sets a special row status (e.g., removed, edited, error).

Props - TableCell

Prop Type Default Description
children ReactNode - The cell content.
align "left" | "center" | "right" "left" Alignment of the cell content.
colSpan number - Number of columns the cell should span.
rowSpan number - Number of rows the cell should span.

Props - TableSortLabel

Prop Type Default Description
active boolean false Determines if sorting is active.
direction "asc" | "desc" - Sorting direction (ascending or descending).
onClick (event) => void - Event triggered when sorting is clicked.

Example Usage

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import { Table, TableHead, TableBody, TableRow, TableCell, TableSortLabel } from "@nomana-it/liberty-core"
import { useState } from "react";

export const TableExample = () => {
  const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc");

  const handleSort = () => {
    setSortDirection(sortDirection === "asc" ? "desc" : "asc");
  };

  return (
    <Table>
      <TableHead>
        <TableRow>
          <TableCell>
            <TableSortLabel active direction={sortDirection} onClick={handleSort}>
              Name
            </TableSortLabel>
          </TableCell>
          <TableCell align="center">Age</TableCell>
          <TableCell align="right">City</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <TableRow>
          <TableCell>John Doe</TableCell>
          <TableCell align="center">30</TableCell>
          <TableCell align="right">New York</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>Jane Smith</TableCell>
          <TableCell align="center">28</TableCell>
          <TableCell align="right">San Francisco</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
};

🔗 GitHub Repository (Core): Liberty Core
🔗 GitHub Repository (Test Project): Liberty Test
📖 Live Documentation: Liberty Core Docs
💖 Sponsor & Support: Sponsor Liberty Core