Table

Table renders legacy data tables with container sizing, optional headers, semantic table element support, and built-in empty states.

Code

import { Table } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <Table.Container>
      <Table>
        <Table.Head>
          <Table.Row>
            {["Order", "Status", "Account", "Owner", "Total"].map((column) => (
              <Table.TitleCell key={column}>{column}</Table.TitleCell>
            ))}
          </Table.Row>
        </Table.Head>

        <Table.Body>
          {Array.from({ length: 3 }, (_, i) => (
            <Table.Row key={i}>
              <Table.MainCell>ORD-1042</Table.MainCell>
              {Array.from({ length: 4 }, (__, j) => (
                <Table.SecondaryCell key={j}>Confirmed</Table.SecondaryCell>
              ))}
            </Table.Row>
          ))}
        </Table.Body>
      </Table>
    </Table.Container>
  );
}

Small

Code

import { Table } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <Table.Container size="small">
      <Table>
        <Table.Head>
          <Table.Row>
            {["Order", "Status", "Account", "Owner", "Total"].map((column) => (
              <Table.TitleCell key={column}>{column}</Table.TitleCell>
            ))}
          </Table.Row>
        </Table.Head>

        <Table.Body>
          {Array.from({ length: 3 }, (_, i) => (
            <Table.Row key={i}>
              <Table.MainCell>ORD-1042</Table.MainCell>
              {Array.from({ length: 4 }, (__, j) => (
                <Table.SecondaryCell key={j}>Confirmed</Table.SecondaryCell>
              ))}
            </Table.Row>
          ))}
        </Table.Body>
      </Table>
    </Table.Container>
  );
}

Spanning

Code

import { Table } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <Table.Container>
      <Table as="table">
        <Table.Head as="thead">
          <Table.Row as="tr">
            {Array.from({ length: 5 }, (_, i) => (
              <Table.TitleCell as="th" key={i}>
                Order
              </Table.TitleCell>
            ))}
          </Table.Row>
        </Table.Head>

        <Table.Body as="tbody">
          <Table.Row as="tr">
            <Table.MainCell as="th" rowSpan={3}>
              This cell spans 3 rows
            </Table.MainCell>

            <Table.SecondaryCell as="td" colSpan={3}>
              This is a single cell spanning 3 columns
            </Table.SecondaryCell>

            <Table.SecondaryCell as="td">Confirmed</Table.SecondaryCell>
          </Table.Row>

          {Array.from({ length: 2 }, (_r, i) => (
            <Table.Row as="tr" key={i}>
              {Array.from({ length: 4 }, (_c, j) => (
                <Table.SecondaryCell as="td" key={j}>
                  Product line
                </Table.SecondaryCell>
              ))}
            </Table.Row>
          ))}
        </Table.Body>
      </Table>
    </Table.Container>
  );
}

With Header

Code

import {
  FlexWrapper,
  Icon,
  Table,
  Typography,
} from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <Table.Container
      header={
        <FlexWrapper align="center" gap={8}>
          <Icon color="link" name="arrow-up-2" size="24" />

          <Typography fontSize={20} fontWeight={500} lineHeight="medium">
            Recent orders
          </Typography>
        </FlexWrapper>
      }
    >
      <Table>
        <Table.Head>
          <Table.Row>
            {["Order", "Status", "Account", "Owner", "Total"].map((column) => (
              <Table.TitleCell key={column}>{column}</Table.TitleCell>
            ))}
          </Table.Row>
        </Table.Head>

        <Table.Body>
          {Array.from({ length: 3 }, (_, i) => (
            <Table.Row key={i}>
              <Table.MainCell>ORD-1042</Table.MainCell>
              {Array.from({ length: 4 }, (__, j) => (
                <Table.SecondaryCell key={j}>Confirmed</Table.SecondaryCell>
              ))}
            </Table.Row>
          ))}
        </Table.Body>
      </Table>
    </Table.Container>
  );
}

Empty State

Code

import { Table } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <Table.Container>
      <Table>
        <Table.Head>
          <Table.Row>
            {["Order", "Status", "Account", "Owner", "Total"].map((column) => (
              <Table.TitleCell key={column}>{column}</Table.TitleCell>
            ))}
          </Table.Row>
        </Table.Head>

        <Table.Body />
      </Table>

      <Table.EmptyState itemsName="orders" />
    </Table.Container>
  );
}

Empty State With Filters Applied

Code

import { Table } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <Table.Container>
      <Table>
        <Table.Head>
          <Table.Row>
            {["Order", "Status", "Account", "Owner", "Total"].map((column) => (
              <Table.TitleCell key={column}>{column}</Table.TitleCell>
            ))}
          </Table.Row>
        </Table.Head>

        <Table.Body />
      </Table>

      <Table.EmptyState
        isFilterApplied
        itemsName="orders"
        onClearFilters={() => {}}
      />
    </Table.Container>
  );
}

API

Table

Props

as

as?: T

fixed

fixed?: boolean

sx

sx?: StyleProps