Skip to content
Skip to content

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.

The table is scrollable.

IDJob TitleName
1DoctorChris Johnson
2ElectricianJoseph Morris
3OperatorAiden Moreno
4BakerMike Simmons
5ClerkEnoch Addison
<Table />

Playground

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';
Dessert (100g serving)CaloriesFat (g)Carbs (g)Protein (g)
Frozen yoghurt1596244
Ice cream sandwich2379374.3
Eclair26216246
Cupcake3053.7674.3
Gingerbread35616493.9

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.

Column width (40%)CaloriesFat (g)Carbs (g)Protein (g)
Frozen yoghurt1596244
Ice cream sandwich2379374.3
Eclair26216246
Cupcake3053.7674.3
Gingerbread35616493.9

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' } }}>
Column width (40%)CaloriesFat (g)Carbs (g)Protein (g)
Frozen yoghurt1596244
Ice cream sandwich2379374.3
Eclair26216246
Cupcake3053.7674.3
Gingerbread35616493.9

Variants

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

Dessert (100g serving)CaloriesFat (g)Carbs (g)Protein (g)
Frozen yoghurt1596244
Ice cream sandwich2379374.3
Eclair26216246
Cupcake3053.7674.3
Gingerbread35616493.9

Sizes

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

Dessert (100g serving)CaloriesFat (g)Carbs (g)Protein (g)
Frozen yoghurt1596244
Ice cream sandwich2379374.3
Eclair26216246
Cupcake3053.7674.3
Gingerbread35616493.9

Stripe

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

Dessert (100g serving)CaloriesFat (g)Carbs (g)Protein (g)
Frozen yoghurt1596244
Ice cream sandwich2379374.3
Eclair26216246
Cupcake3053.7674.3
Gingerbread35616493.9

Hover

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

Column width (40%)CaloriesFat (g)Carbs (g)Protein (g)
Frozen yoghurt1596244
Ice cream sandwich2379374.3
Eclair26216246
Cupcake3053.7674.3
Gingerbread35616493.9

Border

Use the borderAxis prop to control the border appearance.

Dessert (100g serving)CaloriesFat (g)Carbs (g)Protein (g)
Frozen yoghurt1596244
Ice cream sandwich2379374.3
Eclair26216246
Cupcake3053.7674.3
Gingerbread35616493.9

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;
  }
}

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

The table body is scrollable.

RowCaloriesFat (g)Carbs (g)Protein (g)
11596244
22379374.3
326216246
43053.7674.3
535616493.9
61596244
72379374.3
826216246
93053.7674.3
1035616493.9

Caption

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

A caption should be a summary of the table.
MenuCaloriesFat (g)Carbs (g)Protein (g)
Frozen yoghurt1596244
Ice cream sandwich2379374.3
Eclair26216246
Cupcake3053.7674.3
Gingerbread35616493.9

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

A caption should be a summary of the table.
MenuCaloriesFat (g)Carbs (g)Protein (g)
Frozen yoghurt1596244
Ice cream sandwich2379374.3
Eclair26216246
Cupcake3053.7674.3
Gingerbread35616493.9
Totals1,31950.720122.5

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.

Column width (40%)CaloriesFat (g)Carbs (g)Protein (g)
Frozen yoghurt1596244
Ice cream sandwich2379374.3
Eclair26216246
Cupcake3053.7674.3
Gingerbread35616493.9

Row and column span

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

NameIDMembership DatesBalance
JoinedCanceled
Margaret Nguyen427311n/a0.00
Edvard Galinski53317537.00
Hoshi Nakamura601942n/a15.00

Text ellipsis

To truncate the text, set noWrap to true.

NameDescription (you should see a part of this message)

Morty D Ardiousdellois Addami

Writer, Youtuber

Cras non velit nec nisi vulputate nonummy. Maecenas tincidunt lacus at velit. Vivamus vel nulla eget eros elementum pellentesque. Quisque porta volutpat erat. Quisque erat eros, viverra eget, congue eget, semper rutrum, nulla.
Joseph Morriso

ℹ️In eleifend quam a odio. Suspendisse potenti in hac habitasse platea dictumst.

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.

NameRole
AdamDeveloper
JosephManager
<Table />

CSS Variables

px

px

px

px

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.

Nutrition of your favorite menus.
Column width (40%)CaloriesFat (g)Carbs (g)Protein (g)
Frozen yoghurt1596244
Ice cream sandwich2379374.3
Eclair26216246
Cupcake3053.7674.3
Gingerbread35616493.9

Color inversion

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

Nutrition of your favorite menus.
Column width (40%)CaloriesFat (g)Carbs (g)Protein (g)
Frozen yoghurt1596244
Ice cream sandwich2379374.3
Eclair26216246
Cupcake3053.7674.3
Gingerbread35616493.9

Common examples

Sort and selection

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

Nutrition
Frozen yoghurt1596244
Ice cream sandwich2379374.3
Eclair26216246
Cupcake3053.7674.3
Marshmallow3180812

1–5 of 13

First and last column pinning

← Scroll direction →

RowCaloriesFat (g)Carbs (g)Protein (g)
11596244
22379374.3
326216246
43053.7674.3

Collapsible row

Dessert (100g serving)CaloriesFat (g)Carbs (g)Protein (g)
Frozen yoghurt1596244
History
DateCustomerAmountTotal price ($)
2020-01-0511091700311.97
2020-01-02Anonymous13.99
Ice cream sandwich2379374.3
Eclair26216246
Cupcake3053.7674.3
Gingerbread35616493.9

Applying global variants

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

Alien football stars
PlayerGlooblesZa'taak
TR-774,569
Khiresh Odo77,223
Mia Oolong96,219

Scrolling shadows

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

The table body is scrollable.

RowCaloriesFat (g)Carbs (g)Protein (g)
11596244
22379374.3
326216246
43053.7674.3
535616493.9
61596244
72379374.3
826216246
93053.7674.3
1035616493.9

API

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