Skip to main content

<Table>

A data table that renders records from a ListContext. Used as the default display component inside <List>, and also usable inside <ReferenceManyField> or <ArrayField>.

Usage​

<Table> reads its data from the nearest ListContext. When used inside <List>, that context is provided automatically.

<List>
  <Table>
    <Table.Column source="name" />
    <Table.NumberColumn source="price" />
    <Table.DateColumn source="createdAt" />
  </Table>
</List>

Embedded variant​

When used inside a <ReferenceManyField>, pass variant="embedded" to reduce visual weight.

<ReferenceManyField reference="order_items" target="orderId">
  <Table variant="embedded">
    <Table.Column source="productName" />
    <Table.NumberColumn source="quantity" />
  </Table>
</ReferenceManyField>

Disabling features​

<Table filtering={false} preferences={false} />

Default visible columns​

Use display to control which columns are visible by default (others are still available via preferences).

<Table display={['name', 'price']}>
  <Table.Column source="name" />
  <Table.Column source="sku" />
  <Table.NumberColumn source="price" />
  <Table.Column source="category" />
</Table>

Column components​

ComponentRenders with
Table.Column<TextField>
Table.NumberColumn<NumberField> (right-aligned)
Table.DateColumn<DateField>
Table.BooleanColumn<BooleanField>
Table.ReferenceColumn<ReferenceField> — requires reference prop

All column components accept a source prop and an optional link prop (see common field props). You can also pass a custom field component:

<Table.Column source="status" field={StatusIndicatorField} />

Or render custom content as children:

<Table.Column source="name">
  <MyCustomField source="name" />
</Table.Column>

Props​

PropTypeDefaultDescription