Amplify UI

Table

Table displays tabular data using the HTML <table> element and related elements.

ARIA patternTheme sourceReact sourceFeedback

Demo

Usage

The Table primitive and its various components can be used similiarly to how the HTML table, tbody, td, tfoot, th, thead, and tr elements are used.

import {
  Table,
  TableCell,
  TableBody,
  TableHead,
  TableRow,
} from '@aws-amplify/ui-react';

export const BasicExample = ({
  caption,
  highlightOnHover,
  size,
  variation,
}) => (
  <Table
    caption={caption}
    highlightOnHover={highlightOnHover}
    size={size}
    variation={variation}
  >
    <TableHead>
      <TableRow>
        <TableCell as="th">Citrus</TableCell>
        <TableCell as="th">Stone Fruit</TableCell>
        <TableCell as="th">Berry</TableCell>
      </TableRow>
    </TableHead>
    <TableBody>
      <TableRow>
        <TableCell>Orange</TableCell>
        <TableCell>Nectarine</TableCell>
        <TableCell>Raspberry</TableCell>
      </TableRow>
      <TableRow>
        <TableCell>Grapefruit</TableCell>
        <TableCell>Apricot</TableCell>
        <TableCell>Blueberry</TableCell>
      </TableRow>
      <TableRow>
        <TableCell>Lime</TableCell>
        <TableCell>Peach</TableCell>
        <TableCell>Strawberry</TableCell>
      </TableRow>
    </TableBody>
  </Table>
);

Size

Control the cell height and font size of a Table using the size prop. Available options are small, none (default), and large.

Small Table
SmallSmall
SmallSmall
Default Table
DefaultDefault
DefaultDefault
Large Table
LargeLarge
LargeLarge
import { Flex, Table, TableCell, TableRow } from '@aws-amplify/ui-react';

export const SizeExample = () => (
  <Flex direction="column">
    <Table caption="Small Table" size="small">
      <TableRow>
        <TableCell>Small</TableCell>
        <TableCell>Small</TableCell>
      </TableRow>
      <TableRow>
        <TableCell>Small</TableCell>
        <TableCell>Small</TableCell>
      </TableRow>
    </Table>
    <Table caption="Default Table">
      <TableRow>
        <TableCell>Default</TableCell>
        <TableCell>Default</TableCell>
      </TableRow>
      <TableRow>
        <TableCell>Default</TableCell>
        <TableCell>Default</TableCell>
      </TableRow>
    </Table>
    <Table caption="Large Table" size="large">
      <TableRow>
        <TableCell>Large</TableCell>
        <TableCell>Large</TableCell>
      </TableRow>
      <TableRow>
        <TableCell>Large</TableCell>
        <TableCell>Large</TableCell>
      </TableRow>
    </Table>
  </Flex>
);

Variation

The variation prop can be used to make all cells bordered or rows striped. Note that the striped variation doesn't apply to rows in a TableHead tag.

BorderedBordered
BorderedBordered
BorderedBordered
StripedStriped
StripedStriped
StripedStriped
import { Flex, Table, TableCell, TableRow } from '@aws-amplify/ui-react';

export const VariationExample = () => (
  <Flex direction="column">
    <Table variation="bordered">
      <TableRow>
        <TableCell>Bordered</TableCell>
        <TableCell>Bordered</TableCell>
      </TableRow>
      <TableRow>
        <TableCell>Bordered</TableCell>
        <TableCell>Bordered</TableCell>
      </TableRow>
      <TableRow>
        <TableCell>Bordered</TableCell>
        <TableCell>Bordered</TableCell>
      </TableRow>
    </Table>
    <Table variation="striped">
      <TableRow>
        <TableCell>Striped</TableCell>
        <TableCell>Striped</TableCell>
      </TableRow>
      <TableRow>
        <TableCell>Striped</TableCell>
        <TableCell>Striped</TableCell>
      </TableRow>
      <TableRow>
        <TableCell>Striped</TableCell>
        <TableCell>Striped</TableCell>
      </TableRow>
    </Table>
  </Flex>
);

Highlight on Hover

The highlightOnHover prop can be used to change the background color of table rows upon mouse hover. Note that rows in a TableHead tag are not highlighted.

Not highlighted
Highlighted on hoverHighlighted on hover
Highlighted on hoverHighlighted on hover
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableRow,
} from '@aws-amplify/ui-react';

export const HighlightExample = () => (
  <Table highlightOnHover={true}>
    <TableHead>
      <TableRow>
        <TableCell as="th" colSpan={2}>
          Not highlighted
        </TableCell>
      </TableRow>
    </TableHead>
    <TableBody>
      <TableRow>
        <TableCell>Highlighted on hover</TableCell>
        <TableCell>Highlighted on hover</TableCell>
      </TableRow>
      <TableRow>
        <TableCell>Highlighted on hover</TableCell>
        <TableCell>Highlighted on hover</TableCell>
      </TableRow>
    </TableBody>
  </Table>
);

TableCell

th and td cells

The TableCell is used for all data presented in a table. If a cell is intended to be a heading for a row or column, it's recommended to set the cell as a th element using the as property:

<TableCell as="th">Column Header</TableCell>

By default, the TableCell is rendered as a td element.

Spanning multiple columns or rows

The TableCell component can be made to span multiple columns or rows using the colspan or rowspan properties, respectively. This is similar to how the HTML native th and td elements are made to span multiple columns and rows.

import { Table, TableBody, TableCell, TableRow } from '@aws-amplify/ui-react';

export const SpanExample = () => (
  <Table variation="bordered">
    <TableBody>
      <TableRow>
        <TableCell />
        <TableCell />
        <TableCell
          colspan="2"
        />
      </TableRow>
      <TableRow>
        <TableCell
          rowspan="3"
        />
        <TableCell />
        <TableCell />
        <TableCell
          rowspan="3"
        />
      </TableRow>
      <TableRow>
        <TableCell />
        <TableCell />
      </TableRow>
      <TableRow>
        <TableCell
          colspan="3"
        />
      </TableRow>
    </TableBody>
  </Table>
);

Standard HTML attributes

The Table will accept any of the standard HTML attributes that a <table> element accepts. Standard <table> attributes can be found in the MDN Documentation

CitrusStone FruitBerry
OrangeNectarineRaspberry
GrapefruitApricotBlueberry
<Table title="Table">
  <TableHead>
    <TableRow>
      <TableCell as="th">Citrus</TableCell>
      <TableCell as="th">Stone Fruit</TableCell>
      <TableCell as="th">Berry</TableCell>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow>
      <TableCell>Orange</TableCell>
      <TableCell>Nectarine</TableCell>
      <TableCell>Raspberry</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Grapefruit</TableCell>
      <TableCell>Apricot</TableCell>
      <TableCell>Blueberry</TableCell>
    </TableRow>
  </TableBody>
</Table>

CSS Styling

Theme

You can customize the appearance of all Table components in your application with a Theme.

Table Theme Source
CitrusStone FruitBerry
OrangeNectarineRaspberry
GrapefruitApricotBlueberry
LimePeachStrawberry
import {
  Table,
  TableHead,
  TableRow,
  TableCell,
  TableBody,
  ThemeProvider,
  Theme,
} from '@aws-amplify/ui-react';

const theme: Theme = {
  name: 'table-theme',
  tokens: {
    components: {
      table: {
        row: {
          hover: {
            backgroundColor: { value: '{colors.blue.20}' },
          },

          striped: {
            backgroundColor: { value: '{colors.blue.10}' },
          },
        },

        header: {
          color: { value: '{colors.blue.80}' },
          fontSize: { value: '{fontSizes.xl}' },
        },

        data: {
          fontWeight: { value: '{fontWeights.semibold}' },
        },
      },
    },
  },
};

export const TableThemeExample = () => (
  <ThemeProvider theme={theme} colorMode="light">
    <Table highlightOnHover variation="striped">
      <TableHead>
        <TableRow>
          <TableCell as="th">Citrus</TableCell>
          <TableCell as="th">Stone Fruit</TableCell>
          <TableCell as="th">Berry</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <TableRow>
          <TableCell>Orange</TableCell>
          <TableCell>Nectarine</TableCell>
          <TableCell>Raspberry</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>Grapefruit</TableCell>
          <TableCell>Apricot</TableCell>
          <TableCell>Blueberry</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>Lime</TableCell>
          <TableCell>Peach</TableCell>
          <TableCell>Strawberry</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  </ThemeProvider>
);

Target classes

ClassDescription
amplify-tableTop level element that wraps the Table primitive
amplify-table__captionClass applied to the content provided as the caption prop
amplify-table__bodyClass applied to TableBody component
amplify-table__tdClass applied to TableCell component rendered as a <td> element (<TableCell as="td" />)
amplify-table__thClass applied to TableCell comopnent rendered as a <th> element (<TableCell as="th" />)
amplify-table__footClass applied to TableFoot component
amplify-table__headClass applied to TableHead component
amplify-table__rowClass applied to TableRow component
  • --amplify-components-table-body-display
  • --amplify-components-table-body-vertical-align
  • --amplify-components-table-border-collapse
  • --amplify-components-table-caption-caption-side
  • --amplify-components-table-caption-color
  • --amplify-components-table-caption-display
  • --amplify-components-table-caption-font-size
  • --amplify-components-table-caption-large-font-size
  • --amplify-components-table-caption-small-font-size
  • --amplify-components-table-caption-text-align
  • --amplify-components-table-caption-word-break
  • --amplify-components-table-data-border-color
  • --amplify-components-table-data-border-style
  • --amplify-components-table-data-border-width
  • --amplify-components-table-data-color
  • --amplify-components-table-data-display
  • --amplify-components-table-data-font-size
  • --amplify-components-table-data-font-weight
  • --amplify-components-table-data-large-font-size
  • --amplify-components-table-data-large-padding
  • --amplify-components-table-data-padding
  • --amplify-components-table-data-small-font-size
  • --amplify-components-table-data-small-padding
  • --amplify-components-table-data-vertical-align
  • --amplify-components-table-display
  • --amplify-components-table-foot-display
  • --amplify-components-table-foot-vertical-align
  • --amplify-components-table-head-display
  • --amplify-components-table-head-vertical-align
  • --amplify-components-table-header-border-color
  • --amplify-components-table-header-border-style
  • --amplify-components-table-header-border-width
  • --amplify-components-table-header-color
  • --amplify-components-table-header-display
  • --amplify-components-table-header-font-size
  • --amplify-components-table-header-font-weight
  • --amplify-components-table-header-large-font-size
  • --amplify-components-table-header-large-padding
  • --amplify-components-table-header-padding
  • --amplify-components-table-header-small-font-size
  • --amplify-components-table-header-small-padding
  • --amplify-components-table-header-vertical-align
  • --amplify-components-table-row-display
  • --amplify-components-table-row-hover-background-color
  • --amplify-components-table-row-striped-background-color
  • --amplify-components-table-row-vertical-align
  • --amplify-components-table-width

Global Styling

Each component related to the Table primitive has its own class name which may be used to override styling with custom CSS.

Table Title
A short table description
ABC
1A1B1C1
2A2B2C2
3A3B3C3
/* styles.css */
.amplify-table__th {
  background-color: var(--amplify-colors-background-tertiary);
}

.amplify-table__th:first-child {
  text-align: right;
}

.amplify-table__row:not(:first-child) .amplify-table__th {
  border-top: none;
}

.amplify-table__row:not(:last-child) .amplify-table__th {
  border-bottom: none;
}

.amplify-table__caption {
  caption-side: top;
  text-align: right;
}

.table-summary {
  color: var(--amplify-colors-font-secondary);
  font-style: italic;
}

import { Table, TableBody, TableCell, TableRow } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

import './styles.css';

<Table
  className="global-styling-table"
  caption={
    <>
      Table Title
      <br />
      <span class="table-summary">A short table description</span>
    </>
  }
>
  <TableBody>
    <TableRow>
      <TableCell as="th" />
      <TableCell as="th">A</TableCell>
      <TableCell as="th">B</TableCell>
      <TableCell as="th">C</TableCell>
    </TableRow>
    <TableRow>
      <TableCell as="th">1</TableCell>
      <TableCell>A1</TableCell>
      <TableCell>B1</TableCell>
      <TableCell>C1</TableCell>
    </TableRow>
    <TableRow>
      <TableCell as="th">2</TableCell>
      <TableCell>A2</TableCell>
      <TableCell>B2</TableCell>
      <TableCell>C2</TableCell>
    </TableRow>
    <TableRow>
      <TableCell as="th">3</TableCell>
      <TableCell>A3</TableCell>
      <TableCell>B3</TableCell>
      <TableCell>C3</TableCell>
    </TableRow>
  </TableBody>
</Table>;

Local Styling

To override styling on a specific Table components, you can use (in order of increasing specificity): a class selector, data attributes, or style props.

Using a class selector:

Smaller TextSmaller Text
/* styles.css */
.my-custom-table .amplify-table__td {
  font-size: var(--amplify-font-sizes-xs);
}

.my-custom-table .amplify-table__row {
  background-color: var(--amplify-colors-neutral-60);
}

import './styles.css';

<Table className="my-custom-table">
  <TableBody>
    <TableRow>
      <TableCell>Smaller Text</TableCell>
      <TableCell>Smaller Text</TableCell>
    </TableRow>
  </TableBody>
</Table>;

Using data attributes:

Larger TextLarger Text
/* styles.css */
/* Override only large size styles */
.amplify-table[data-size='large'] .amplify-table__td {
  font-size: var(--amplify-font-sizes-xxxl);
}

import './styles.css';

<Table size="large">
  <TableBody>
    <TableRow>
      <TableCell>Larger Text</TableCell>
      <TableCell>Larger Text</TableCell>
    </TableRow>
  </TableBody>
</Table>;

Using style props:

Smaller TextSmaller Text
import {
  Table,
  TableBody,
  TableRow,
  TableCell,
  useTheme,
} from '@aws-amplify/ui-react';

export const TableStylePropExample = () => {
  const { tokens } = useTheme();
  return (
    <Table>
      <TableBody>
        <TableRow>
          <TableCell style={{ fontSize: `${tokens.fontSizes.xs}` }}>
            Smaller Text
          </TableCell>
          <TableCell style={{ fontSize: `${tokens.fontSizes.xs}` }}>
            Smaller Text
          </TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
};

/* OR */

import {
  Table,
  TableBody,
  TableRow,
  TableCell,
  useTheme,
} from '@aws-amplify/ui-react';

export const TableFontSizePropExample = () => {
  const { tokens } = useTheme();
  return (
    <Table>
      <TableBody>
        <TableRow>
          <TableCell fontSize={tokens.fontSizes.xs}>Smaller Text</TableCell>
          <TableCell fontSize={tokens.fontSizes.xs}>Smaller Text</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
};
Contribute on GitHubDiscuss on Discord

Amplify open source software, documentation and community are supported by Amazon Web Services.

© 2024 Amazon Web Services, Inc. and its affiliates. All rights reserved. View the site terms and privacy policy.

Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.