Table

Import from @falcon/ui-kit/dist/legacy, not @falcon/ui-kit.

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

Primary

Code

<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

<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

<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 }, (_, i) => (
        <Table.Row as="tr" key={i}>
          {Array.from({ length: 4 }, (_, j) => (
            <Table.SecondaryCell as="td" key={j}>
              Product line
            </Table.SecondaryCell>
          ))}
        </Table.Row>
      ))}
    </Table.Body>
  </Table>
</Table.Container>

With Header

Code

<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

<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

<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

Name	Type/Description
as	"div" | "table" | undefined
fixed	boolean | undefined
sx	StyleProps | undefined