 () => {
  const data = [
    ['Olivia Smith', 'olivia.smith@foo-corp.com', 'Manager'],
    ['Ethan Johnson', 'ethan.johnson@foo-corp.com', 'Developer'],
    ['Ava Garcia', 'ava.garcia@foo-corp.com', 'Developer'],
    ['Liam Martinez', 'liam.martinez@foo-corp.com', 'Support'],
    ['Isabella Davis', 'isabella.davis@foo-corp.com', 'Manager'],
  ];

  return (
    <Table.Root>
      <Table.Content>
        <Table.Header>
          <Table.Row>
            <Table.ColumnHeader>Full name</Table.ColumnHeader>
            <Table.ColumnHeader>Email</Table.ColumnHeader>
            <Table.ColumnHeader>Group</Table.ColumnHeader>
          </Table.Row>
        </Table.Header>
        <Table.Body>
          {data.map(([name, email, group]) => (
            <Table.Row key={name}>
              <Table.RowHeader>{name}</Table.RowHeader>
              <Table.Cell>{email}</Table.Cell>
              <Table.Cell>{group}</Table.Cell>
            </Table.Row>
          ))}
        </Table.Body>
      </Table.Content>
    </Table.Root>
  );
};

Anatomy

Import the component and piece the parts together.

 import { Table } from '@workos-inc/design-system';

export default () => (
  <Table.Root>
    <Table.Content>
      <Table.Header>
        <Table.Row>
          <Table.ColumnHeader />
        </Table.Row>
      </Table.Header>
      <Table.Body>
        <Table.Row>
          <Table.RowHeader />
          <Table.Cell>
            <Table.RowAction />
          </Table.Cell>
          <Table.Cell>
            <Table.RowLink />
          </Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table.Content>
    <Table.Detail />
    <Table.Footer />
  </Table.Root>
);

Props

Table.Content

`defaultValue`

string

`layout`

autofixed

`value`

string

Also supports MarginProps: `m`, `mb`, `ml`, `mr`, `mt`, `mx`, `my`

Table.Row

`align`

centerendstartbaseline

`value`

string

Table.ColumnHeader

`justify`

centerendstart

`maxWidth`

Responsive<string>

Sets the CSS **max-width** property. Supports CSS strings and responsive objects.

`minWidth`

Responsive<string>

Sets the CSS **min-width** property. Supports CSS strings and responsive objects.

`p`

1234056789

Sets the CSS **padding** property. Supports space scale values, CSS strings, and responsive objects.

`pb`

1234056789

Sets the CSS **padding-bottom** property. Supports space scale values, CSS strings, and responsive objects.

`pl`

1234056789

Sets the CSS **padding-left** property. Supports space scale values, CSS strings, and responsive objects.

`pr`

1234056789

Sets the CSS **padding-right** property. Supports space scale values, CSS strings, and responsive objects.

`pt`

1234056789

Sets the CSS **padding-top** property. Supports space scale values, CSS strings, and responsive objects.

`px`

1234056789

Sets the CSS **padding-left** and **padding-right** properties. Supports space scale values, CSS strings, and responsive objects.

`py`

1234056789

Sets the CSS **padding-top** and **padding-bottom** properties. Supports space scale values, CSS strings, and responsive objects.

`width`

Responsive<string>

Sets the CSS **width** property. Supports CSS strings and responsive objects.

Table.RowHeader

`justify`

centerendstart

`maxWidth`

Responsive<string>

Sets the CSS **max-width** property. Supports CSS strings and responsive objects.

`minWidth`

Responsive<string>

Sets the CSS **min-width** property. Supports CSS strings and responsive objects.

`p`

1234056789

Sets the CSS **padding** property. Supports space scale values, CSS strings, and responsive objects.

`pb`

1234056789

Sets the CSS **padding-bottom** property. Supports space scale values, CSS strings, and responsive objects.

`pl`

1234056789

Sets the CSS **padding-left** property. Supports space scale values, CSS strings, and responsive objects.

`pr`

1234056789

Sets the CSS **padding-right** property. Supports space scale values, CSS strings, and responsive objects.

`pt`

1234056789

Sets the CSS **padding-top** property. Supports space scale values, CSS strings, and responsive objects.

`px`

1234056789

Sets the CSS **padding-left** and **padding-right** properties. Supports space scale values, CSS strings, and responsive objects.

`py`

1234056789

Sets the CSS **padding-top** and **padding-bottom** properties. Supports space scale values, CSS strings, and responsive objects.

`width`

Responsive<string>

Sets the CSS **width** property. Supports CSS strings and responsive objects.

Table.Cell

`justify`

centerendstart

`maxWidth`

Responsive<string>

Sets the CSS **max-width** property. Supports CSS strings and responsive objects.

`minWidth`

Responsive<string>

Sets the CSS **min-width** property. Supports CSS strings and responsive objects.

`p`

1234056789

Sets the CSS **padding** property. Supports space scale values, CSS strings, and responsive objects.

`pb`

1234056789

Sets the CSS **padding-bottom** property. Supports space scale values, CSS strings, and responsive objects.

`pl`

1234056789

Sets the CSS **padding-left** property. Supports space scale values, CSS strings, and responsive objects.

`pr`

1234056789

Sets the CSS **padding-right** property. Supports space scale values, CSS strings, and responsive objects.

`pt`

1234056789

Sets the CSS **padding-top** property. Supports space scale values, CSS strings, and responsive objects.

`px`

1234056789

Sets the CSS **padding-left** and **padding-right** properties. Supports space scale values, CSS strings, and responsive objects.

`py`

1234056789

Sets the CSS **padding-top** and **padding-bottom** properties. Supports space scale values, CSS strings, and responsive objects.

`width`

Responsive<string>

Sets the CSS **width** property. Supports CSS strings and responsive objects.

Table.RowLink

`visuallyHidden`

boolean

Usage

Without Root part

You can omit the Root part if you need to use a table without a backplate.

 () => {
  const data = [
    ['Olivia Smith', 'olivia.smith@foo-corp.com', 'Manager'],
    ['Ethan Johnson', 'ethan.johnson@foo-corp.com', 'Developer'],
    ['Ava Garcia', 'ava.garcia@foo-corp.com', 'Developer'],
    ['Liam Martinez', 'liam.martinez@foo-corp.com', 'Support'],
    ['Isabella Davis', 'isabella.davis@foo-corp.com', 'Manager'],
  ];

  return (
    <Table.Content>
      <Table.Header>
        <Table.Row>
          <Table.ColumnHeader>Full name</Table.ColumnHeader>
          <Table.ColumnHeader>Email</Table.ColumnHeader>
          <Table.ColumnHeader>Group</Table.ColumnHeader>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        {data.map(([name, email, group]) => (
          <Table.Row key={name}>
            <Table.RowHeader>{name}</Table.RowHeader>
            <Table.Cell>{email}</Table.Cell>
            <Table.Cell>{group}</Table.Cell>
          </Table.Row>
        ))}
      </Table.Body>
    </Table.Content>
  );
};

Use the Row Link part when you need to enable navigation on row click. Row Link works with router links and takes care of interactions like middle click, Control/Command-click, and keyboard navigation with roving focus.

Under the hood, Row Link renders an arrow icon and hides the child link. Screen readers are able to access the text contents of this cell, so don’t forget to label your links. Also, you will need to add a corresponding column header with an aria-label in the Table Header row.

 () => {
  const data = [
    ['Olivia Smith', 'olivia.smith@foo-corp.com', 'Manager'],
    ['Ethan Johnson', 'ethan.johnson@foo-corp.com', 'Developer'],
    ['Ava Garcia', 'ava.garcia@foo-corp.com', 'Developer'],
    ['Liam Martinez', 'liam.martinez@foo-corp.com', 'Support'],
    ['Isabella Davis', 'isabella.davis@foo-corp.com', 'Manager'],
  ];

  return (
    <Table.Content>
      <Table.Header>
        <Table.Row>
          <Table.ColumnHeader>Full name</Table.ColumnHeader>
          <Table.ColumnHeader>Email</Table.ColumnHeader>
          <Table.ColumnHeader>Group</Table.ColumnHeader>
          <Table.ColumnHeader aria-label="Link" />
        </Table.Row>
      </Table.Header>
      <Table.Body>
        {data.map(([name, email, group]) => (
          <Table.Row key={name}>
            <Table.RowHeader>{name}</Table.RowHeader>
            <Table.Cell>{email}</Table.Cell>
            <Table.Cell>{group}</Table.Cell>
            <Table.Cell>
              <Table.RowLink>
                <a href="https://example.com">View {name} profile</a>
              </Table.RowLink>
            </Table.Cell>
          </Table.Row>
        ))}
      </Table.Body>
    </Table.Content>
  );
};

With nested interactive elements

You may nest interactive elements within interactive rows. Clicking a nested interactive element won’t click the row itself.

Interactive table rows with nested interactive elements maintain roving focus. Users can tab only into the contents of the currently focused row, which enables them to skip to the rest of the document without traversing all interactive elements of the table.

 () => {
  const data = [
    ['Olivia Smith', 'olivia.smith@foo-corp.com', 'Manager'],
    ['Ethan Johnson', 'ethan.johnson@foo-corp.com', 'Developer'],
    ['Ava Garcia', 'ava.garcia@foo-corp.com', 'Developer'],
    ['Liam Martinez', 'liam.martinez@foo-corp.com', 'Support'],
    ['Isabella Davis', 'isabella.davis@foo-corp.com', 'Manager'],
  ];

  return (
    <Table.Content>
      <Table.Header>
        <Table.Row>
          <Table.ColumnHeader>Full name</Table.ColumnHeader>
          <Table.ColumnHeader>Email</Table.ColumnHeader>
          <Table.ColumnHeader>Group</Table.ColumnHeader>
          <Table.ColumnHeader aria-label="Link" />
        </Table.Row>
      </Table.Header>
      <Table.Body>
        {data.map(([name, email, group]) => (
          <Table.Row align="center" key={name}>
            <Table.RowHeader>{name}</Table.RowHeader>
            <Table.Cell>{email}</Table.Cell>
            <Table.Cell py="0">
              <Button color="purple" ghost size="2">
                {group}
              </Button>
            </Table.Cell>
            <Table.Cell>
              <Table.RowLink>
                <a href="https://example.com">View {name} profile</a>
              </Table.RowLink>
            </Table.Cell>
          </Table.Row>
        ))}
      </Table.Body>
    </Table.Content>
  );
};

With action on click

Use the Row Action part when you need to activate another interactive element on row click.

 () => {
  const data = [
    ['Olivia Smith', 'olivia.smith@foo-corp.com', 'Manager'],
    ['Ethan Johnson', 'ethan.johnson@foo-corp.com', 'Developer'],
    ['Ava Garcia', 'ava.garcia@foo-corp.com', 'Developer'],
    ['Liam Martinez', 'liam.martinez@foo-corp.com', 'Support'],
    ['Isabella Davis', 'isabella.davis@foo-corp.com', 'Manager'],
  ];

  return (
    <Table.Content>
      <Table.Header>
        <Table.Row>
          <Table.ColumnHeader>Full name</Table.ColumnHeader>
          <Table.ColumnHeader>Email</Table.ColumnHeader>
          <Table.ColumnHeader>Group</Table.ColumnHeader>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        {data.map(([name, email, group]) => (
          <Table.Row key={name}>
            <Table.Cell>
              <Table.RowAction>
                <Checkbox mr="2" />
              </Table.RowAction>
              {name}
            </Table.Cell>
            <Table.Cell>{email}</Table.Cell>
            <Table.Cell>{group}</Table.Cell>
          </Table.Row>
        ))}
      </Table.Body>
    </Table.Content>
  );
};

With selectable rows

Use the value and onValueChange props to create a controlled table with selectable rows. You can use the Detail part to display the data related to the currently selected row.

 () => {
  const [value, setValue] = React.useState('Olivia Smith');

  const data = [
    ['Olivia Smith', 'olivia.smith@foo-corp.com'],
    ['Ethan Johnson', 'ethan.johnson@foo-corp.com'],
    ['Ava Garcia', 'ava.garcia@foo-corp.com'],
    ['Liam Martinez', 'liam.martinez@foo-corp.com'],
    ['Isabella Davis', 'isabella.davis@foo-corp.com'],
  ];

  return (
    <Table.Root style={{ whiteSpace: 'nowrap' }}>
      <Table.Content value={value} onValueChange={setValue}>
        <Table.Header>
          <Table.Row>
            <Table.ColumnHeader>Full name</Table.ColumnHeader>
            <Table.ColumnHeader>Email</Table.ColumnHeader>
          </Table.Row>
        </Table.Header>
        <Table.Body>
          {data.map(([name, email]) => (
            <Table.Row key={name} value={name}>
              <Table.RowHeader>{name}</Table.RowHeader>
              <Table.Cell>{email}</Table.Cell>
            </Table.Row>
          ))}
        </Table.Body>
      </Table.Content>
      <Table.Detail>
        <Flex height="100%" align="center" justify="center" pb="2">
          <Text size="3">{value}</Text>
        </Flex>
      </Table.Detail>
    </Table.Root>
  );
};

Add the Footer part to display a toolbar with secondary information and controls related to the table, like pagination.

 () => {
  const [value, setValue] = React.useState('Olivia Smith');

  const data = [
    ['Olivia Smith', 'olivia.smith@foo-corp.com'],
    ['Ethan Johnson', 'ethan.johnson@foo-corp.com'],
    ['Ava Garcia', 'ava.garcia@foo-corp.com'],
    ['Liam Martinez', 'liam.martinez@foo-corp.com'],
    ['Isabella Davis', 'isabella.davis@foo-corp.com'],
  ];

  return (
    <Table.Root style={{ whiteSpace: 'nowrap' }}>
      <Table.Content value={value} onValueChange={setValue}>
        <Table.Header>
          <Table.Row>
            <Table.ColumnHeader>Full name</Table.ColumnHeader>
            <Table.ColumnHeader>Email</Table.ColumnHeader>
          </Table.Row>
        </Table.Header>
        <Table.Body>
          {data.map(([name, email]) => (
            <Table.Row key={name} value={name}>
              <Table.RowHeader>{name}</Table.RowHeader>
              <Table.Cell>{email}</Table.Cell>
            </Table.Row>
          ))}
        </Table.Body>
      </Table.Content>
      <Table.Detail>
        <Flex height="100%" align="center" justify="center" pb="2">
          <Text size="3">{value}</Text>
        </Flex>
      </Table.Detail>
      <Table.Footer>
        <Text color="gray" size="1">
          Page 1 of 3
        </Text>

        <Flex gap="2">
          <Button size="1">Previous</Button>
          <Button size="1">Next</Button>
        </Flex>
      </Table.Footer>
    </Table.Root>
  );
};

With empty rows

Fill the table with empty rows when you need a consistent height on the table regardless of how much data it currently has. The empty rows are automatically excluded from the accessibility tree.

 () => {
  const [value, setValue] = React.useState('Olivia Smith');

  const data = [
    ['Olivia Smith', 'olivia.smith@foo-corp.com'],
    ['Ethan Johnson', 'ethan.johnson@foo-corp.com'],
  ];

  return (
    <Table.Root style={{ whiteSpace: 'nowrap' }}>
      <Table.Content value={value} onValueChange={setValue}>
        <Table.Header>
          <Table.Row>
            <Table.ColumnHeader>Full name</Table.ColumnHeader>
            <Table.ColumnHeader>Email</Table.ColumnHeader>
          </Table.Row>
        </Table.Header>
        <Table.Body>
          {data.map(([name, email]) => (
            <Table.Row key={name} value={name}>
              <Table.RowHeader>{name}</Table.RowHeader>
              <Table.Cell>{email}</Table.Cell>
            </Table.Row>
          ))}
          <Table.Row />
          <Table.Row />
          <Table.Row />
        </Table.Body>
      </Table.Content>
      <Table.Detail>
        <Flex height="100%" align="center" justify="center" pb="2">
          <Text size="3">{value}</Text>
        </Flex>
      </Table.Detail>
    </Table.Root>
  );
};

With sticky first column

The first column becomes automatically sticky if the table doesn’t fit in its container.

 () => {
  const data = [
    ['Olivia Smith', 'olivia.smith@foo-corp.com', 'Manager'],
    ['Ethan Johnson', 'ethan.johnson@foo-corp.com', 'Developer'],
    ['Ava Garcia', 'ava.garcia@foo-corp.com', 'Developer'],
    ['Liam Martinez', 'liam.martinez@foo-corp.com', 'Support'],
    ['Isabella Davis', 'isabella.davis@foo-corp.com', 'Manager'],
  ];

  return (
    <Box style={{ maxWidth: 320, whiteSpace: 'nowrap' }}>
      <Table.Root>
        <Table.Content>
          <Table.Header>
            <Table.Row>
              <Table.ColumnHeader>Full name</Table.ColumnHeader>
              <Table.ColumnHeader>Email</Table.ColumnHeader>
              <Table.ColumnHeader>Group</Table.ColumnHeader>
            </Table.Row>
          </Table.Header>
          <Table.Body>
            {data.map(([name, email, group]) => (
              <Table.Row key={name}>
                <Table.RowHeader>{name}</Table.RowHeader>
                <Table.Cell>{email}</Table.Cell>
                <Table.Cell>{group}</Table.Cell>
              </Table.Row>
            ))}
          </Table.Body>
        </Table.Content>
      </Table.Root>
    </Box>
  );
};

The header becomes automatically sticky if the table doesn’t fit in its container.

 () => {
  const data = [
    ['Engineering', '42 members'],
    ['Marketing', '17 members'],
    ['Sales', '24 members'],
    ['Customer Support', '15 members'],
    ['Product Management', '9 members'],
    ['Design', '12 members'],
    ['Finance', '8 members'],
    ['Human Resources', '6 members'],
    ['IT Operations', '11 members'],
    ['Executive Team', '5 members'],
  ];

  return (
    <div style={{ maxHeight: 280, display: 'flex' }}>
      <Table.Root>
        <Table.Content>
          <Table.Header>
            <Table.Row>
              <Table.ColumnHeader>
                <Checkbox mr="2" /> Group
              </Table.ColumnHeader>
              <Table.ColumnHeader align="end">
                <VisuallyHidden>Members</VisuallyHidden>
              </Table.ColumnHeader>
            </Table.Row>
          </Table.Header>
          <Table.Body>
            {data.map(([name, members]) => (
              <Table.Row key={name}>
                <Table.RowHeader>
                  <Table.RowAction>
                    <Checkbox mr="2" />
                  </Table.RowAction>{' '}
                  {name}
                </Table.RowHeader>
                <Table.Cell align="end">
                  <Text color="gray">{members}</Text>
                </Table.Cell>
              </Table.Row>
            ))}
          </Table.Body>
        </Table.Content>

        <Table.Footer>
          <Text color="gray" size="1">
            Page 1 of 3
          </Text>

          <Flex gap="2">
            <Button size="1">Previous</Button>
            <Button size="1">Next</Button>
          </Flex>
        </Table.Footer>
      </Table.Root>
    </div>
  );
};

Variants

Dashboard

2 variants found

Table in Audit Logs Tabledashboard

Table in Directory Groups Tabledashboard

Context

Table.Content

Prop	Type	Default	Required
`defaultValue`	`string`	—	no
`layout`	`Responsive<"auto" \| "fixed">`	—	no
`value`	`string`	—	no

Also supports MarginProps: m, mb, ml, mr, mt, mx, my

Table.Row

Prop	Type	Default	Required
`align`	`Responsive<"center" \| "end" \| "start" \| "baseline">`	—	no
`value`	`string`	—	no

Table.ColumnHeader

Prop	Type	Default	Required
`justify`	`Responsive<"center" \| "end" \| "start">`	—	no
`maxWidth`	`Responsive<string>`	—	no
`minWidth`	`Responsive<string>`	—	no
`p`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9">>`	—	no
`pb`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9">>`	—	no
`pl`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9">>`	—	no
`pr`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9">>`	—	no
`pt`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9">>`	—	no
`px`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9">>`	—	no
`py`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9">>`	—	no
`width`	`Responsive<string>`	—	no

Table.RowHeader

Prop	Type	Default	Required
`justify`	`Responsive<"center" \| "end" \| "start">`	—	no
`maxWidth`	`Responsive<string>`	—	no
`minWidth`	`Responsive<string>`	—	no
`p`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9">>`	—	no
`pb`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9">>`	—	no
`pl`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9">>`	—	no
`pr`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9">>`	—	no
`pt`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9">>`	—	no
`px`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9">>`	—	no
`py`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9">>`	—	no
`width`	`Responsive<string>`	—	no

Table.Cell

Prop	Type	Default	Required
`justify`	`Responsive<"center" \| "end" \| "start">`	—	no
`maxWidth`	`Responsive<string>`	—	no
`minWidth`	`Responsive<string>`	—	no
`p`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9">>`	—	no
`pb`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9">>`	—	no
`pl`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9">>`	—	no
`pr`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9">>`	—	no
`pt`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9">>`	—	no
`px`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9">>`	—	no
`py`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9">>`	—	no
`width`	`Responsive<string>`	—	no

Table.RowLink

Prop	Type	Default	Required
`visuallyHidden`	`boolean`	—	no

Usage

Used 859 times across 2 packages

Dashboard

717

Admin Portal

142

Variant Distribution

align

center

100%

justify

end

80%

center

20%

Where it's used

60 files

packages/dashboard/src/components/organizations/organization/members-table.tsx37

packages/dashboard/src/components/directory-sync/directory-users-table/directory-users-table.tsx33

packages/dashboard/src/components/audit-logs/audit-logs-table.tsx30

packages/dashboard/src/legacy-pages/[environmentId]/api-logs/index.tsx28

packages/dashboard/src/components/users/userland-invites-table.tsx27

packages/dashboard/src/components/actions/actions-table/actions-table.tsx26

packages/dashboard/src/components/directory-sync/directory-groups-table/directory-groups-table.tsx25

packages/dashboard/src/components/organizations/organization/invites-table.tsx24

/p/:portalSessionId/audit-logs/audit-logs-table

packages/admin-portal/src/app/p/[portalSessionId]/audit-logs/(components)/audit-logs-table/audit-logs-table.tsx30

/p/:portalSessionId/directory-sync/:directoryId/completed

packages/admin-portal/src/app/p/[portalSessionId]/directory-sync/[directoryId]/completed/page.tsx26

Show 50 more files

Table

Anatomy

Props

Table.Content

defaultValue

layout

value

Table.Row

align

value

Table.ColumnHeader

justify

maxWidth

minWidth

p

pb

pl

pr

pt

px

py

width

Table.RowHeader

justify

maxWidth

minWidth

p

pb

pl

pr

pt

px

py

width

Table.Cell

justify

maxWidth

minWidth

p

pb

pl

pr

pt

px

py

width

Table.RowLink

visuallyHidden

Usage

Without Root part

With navigation on click

With nested interactive elements

With action on click

With selectable rows

With footer

With empty rows

With sticky first column

With sticky header

Variants

Dashboard

Context

Full API Reference

Full API Reference

Table.Content

Table.Row

Table.ColumnHeader

Table.RowHeader

Table.Cell

Table.RowLink

Usage Statistics

Usage Statistics

Usage

Variant Distribution

Where it's used

`defaultValue`

`layout`

`value`

`align`

`value`

`justify`

`maxWidth`

`minWidth`

`p`

`pb`

`pl`

`pr`

`pt`

`px`

`py`

`width`

`justify`

`maxWidth`

`minWidth`

`p`

`pb`

`pl`

`pr`

`pt`

`px`

`py`

`width`

`justify`

`maxWidth`

`minWidth`

`p`

`pb`

`pl`

`pr`

`pt`

`px`

`py`

`width`

`visuallyHidden`