Table

Tables display sets of data organized in rows and columns.

Introduction

The Joy UI Table component lets you use plain HTML structure to assemble a table in JSX.

Basics

Joy UI Table will apply the styles based on a table structure using <thead>, <tbody>, and <tfoot> elements.

import Table from '@mui/joy/Table';

Customization

Column width

Use the sx prop to target the header and provide the width as a number or percentage.

Columns that don't have an explicit width will spread equally to fill the rest of the area.

Inline style

An alternative way of controlling the column's width is to use inline styles on the <th> element:

<thead>
  <tr>
    <th style={{ width: '40%' }}>Column 1</th>
    <th style={{ width: '64px' }}>Column 2</th>
  </tr>
</thead>

Alignment

Use the sx prop to target columns with the appropriate CSS selector and apply the text-align property.

// target cells that are not the first in their respective rows.
<Table sx={{ '& tr > *:not(:first-child)': { textAlign: 'right' } }}>

Variants

Table supports Joy UI's four global variants: plain (default), outlined, soft, and solid.

Sizes

The component comes in three sizes: sm, md (default), and lg.

Stripe

To create constast between rows, use the stripe prop with odd or even values.

Hover

To highlight a row of the table body when hovering over it, set the hoverAxis prop to true.

Border

Use the borderAxis prop to control the border appearance.

Adding custom borders

Customize the table theme based on borderAxis prop using the extendTheme() function.

import { CssVarsProvider, extendTheme } from '@mui/joy/styles';

const theme = extendTheme({
  components: {
    JoyTable: {
      styleOverrides: {
        root: ({ ownerState }) => ({
          ...(ownerState.borderAxis === 'header' && {
            // this example applies borders between <thead> and <tbody>
            '& thead th:not([colspan])': {
              borderBottom: '2px solid var(--TableCell-borderColor)',
            },
          }),
        });
      }
    }
  }
})

<CssVarsProvider theme={theme}>…</CssVarsProvider>

For TypeScript, you have to add the new values via module augmentation:

// this could be any file that's included in your tsconfig.json
declare module '@mui/joy/Table' {
  interface TablePropsBorderAxisOverrides {
    header: true;
  }
}

Sticky header

Set the stickyHeader prop to true to make the header follow the user as they scroll down the page.

Caption

Add a caption to summarize the contents of a Table by inserting a <caption> element as the Table's first child.

Footer

Use <tfoot> to add a footer to the Table.

Row head

Set scope="row" to <th> elements inside <tbody> to apply the same style as column headers. The demo below illustrates a common use case: setting the first column to match the header styles.

Row and column span

Use rowSpan and columnSpan to expand a cell across multiple rows or columns.

Text ellipsis

To truncate the text, set noWrap to true.

CSS variable playground

Play around with the CSS variables available to the Table component to see how the design changes. You can use these to customize the components with both the sx prop and the theme.

Usage with Sheet

import Sheet from @mui/joy/Sheet When Table becomes a child of Sheet component, the table header background is inherited from the Sheet.

Color inversion

When color inversion is enabled, the Table's styles will adapt based on its variant.

Common examples

Sort and selection

Use form components such as Button, Select and Switch to create sort and selection features.

First and last column pinning

Collapsible row

Applying global variants

Use theme.variants.* to apply global variant styles to the Table.

Scrolling shadows

Inspired by this article from Lea Verou on CSS scrolling shadows, the shadows appear and hide when scrolling on the Table.

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

• <Table />