Skip to content

Styled Table Components

Description

The Table components are predefined styled wrappers based on the TableCell, TableRow, and Div components. These components provide structured table layouts with enhanced styling for header rows, checkboxes, and row selection.

Styled Table Components

Component Name Description
TableContainer A styled container wrapping the table for proper layout and scrolling.
TableRow_Header A header row with a styled background and color.
TableCell_HeaderCheckbox A sticky checkbox cell for table headers.
TableCell_Checkbox A sticky checkbox cell for table rows.
TableRow_Selected A row component that highlights selection state.
TableCell_Tanstack A styled table cell supporting TanStack Table.

Example Usage

Basic Styled Table Components

 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
import { TableContainer, TableRow_Header, TableCell_Checkbox } from '@nomana-it/liberty-core';

export const TableExample = () => {
  return (
    <TableContainer>
      <table>
        <thead>
          <TableRow_Header>
            <TableCell_Checkbox>
              <input type="checkbox" />
            </TableCell_Checkbox>
            <th>Column 1</th>
            <th>Column 2</th>
          </TableRow_Header>
        </thead>
        <tbody>
          <tr>
            <TableCell_Checkbox>
              <input type="checkbox" />
            </TableCell_Checkbox>
            <td>Data 1</td>
            <td>Data 2</td>
          </tr>
        </tbody>
      </table>
    </TableContainer>
  );
};

Notes

  • TableContainer ensures proper scrolling and layout.
  • TableRow_Header provides custom header row styling.
  • TableCell_Checkbox and TableCell_HeaderCheckbox are sticky for better usability.
  • TableRow_Selected helps indicate selected rows visually.
  • TableCell_Tanstack is optimized for TanStack Table column sizes and alignment.

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