Twigs Logo

Table

A structured data display component for organizing and presenting tabular information. Perfect for displaying lists, datasets, and structured content.

Import

import { Table, Thead, Tbody, Tr, Th, Td } from "@sparrowengg/twigs-react";

Usage

const TableExample = () => {
  return (
    <Table border="horizontal">
      <Thead>
        <Tr>
          <Th>Name</Th>
          <Th>Email</Th>
          <Th>Role</Th>
        </Tr>
      </Thead>
      <Tbody>
        <Tr>
          <Td>John Doe</Td>
          <Td>john@example.com</Td>
          <Td>Admin</Td>
        </Tr>
        <Tr>
          <Td>Jane Smith</Td>
          <Td>jane@example.com</Td>
          <Td>User</Td>
        </Tr>
      </Tbody>
    </Table>
  );
};

Props

Table

PropTypeDefault
border?
'horizontal' | 'vertical' | 'both'
'horizontal'
css?
object
-

Tr

PropTypeDefault
active?
boolean
false
children?
ReactNode
-