Data views

There are currently two built-in options for displaying the data DataTable.Table and CardView, but you can also build your own.

DataTable.Table

The Table component is meant to be rendered within a DataTableContext (provided by DataTable here). It displays the data provided by the DataTableContext as an html table.

Show editable code example

Any Paragon component or export may be added to the code example.

<DataTable
  isSelectable
  columns={[
    {
      Header: 'Name',
      accessor: 'name',

    },
    {
      Header: 'Age',
      accessor: 'age',
    },
    {
      Header: 'Famous For',
      accessor: 'famous_for',
    },
    {
      Header: 'Coat Color',
      accessor: 'color',
    },
  ]}
  itemCount={7}
  data={[
    {
      name: 'Lil Bub',
      color: 'brown tabby',
      famous_for: 'weird tongue',
      age: 4,
    },
    {
      name: 'Grumpy Cat',
      color: 'siamese',
      famous_for: 'serving moods',
      age: 4,
    },
    {
      name: 'Smoothie',
      color: 'orange tabby',
      famous_for: 'modeling',
      age: 1,
    },
    {
      name: 'Maru',
      color: 'brown tabby',
      famous_for: 'being a lovable oaf',
      age: 12,
    },
    {
      name: 'Keyboard Cat',
      color: 'orange tabby',
      famous_for: 'piano virtuoso',
      age: 9,
    },
    {
      name: 'Long Cat',
      color: 'russian white',
      famous_for:
        'being loooooooooooooooooooooooooooooooooooooooooooooooooooooong',
      age: 9,
    },
    {
      name: 'Zeno',
      color: 'brown tabby',
      famous_for: 'getting halfway there',
      age: 17,
    },
  ]}
  additionalColumns={[
      {
        id: 'action',
        Header: 'Action',
        // Proptypes disabled as this prop is passed in separately
        Cell: ({ row }) => <Button variant="link" onClick={() => console.log("Assign", row)}>Assign</Button>,
      }
    ]}
>
  <DataTable.Table />
</DataTable>

<DataTable
  isSelectable
  columns={[
    {
      Header: 'Name',
      accessor: 'name',

    },
    {
      Header: 'Age',
      accessor: 'age',
    },
    {
      Header: 'Famous For',
      accessor: 'famous_for',
    },
    {
      Header: 'Coat Color',
      accessor: 'color',
    },
  ]}
  itemCount={7}
  data={[
    {
      name: 'Lil Bub',
      color: 'brown tabby',
      famous_for: 'weird tongue',
      age: 4,
    },
    {
      name: 'Grumpy Cat',
      color: 'siamese',
      famous_for: 'serving moods',
      age: 4,
    },
    {
      name: 'Smoothie',
      color: 'orange tabby',
      famous_for: 'modeling',
      age: 1,
    },
    {
      name: 'Maru',
      color: 'brown tabby',
      famous_for: 'being a lovable oaf',
      age: 12,
    },
    {
      name: 'Keyboard Cat',
      color: 'orange tabby',
      famous_for: 'piano virtuoso',
      age: 9,
    },
    {
      name: 'Long Cat',
      color: 'russian white',
      famous_for:
        'being loooooooooooooooooooooooooooooooooooooooooooooooooooooong',
      age: 9,
    },
    {
      name: 'Zeno',
      color: 'brown tabby',
      famous_for: 'getting halfway there',
      age: 17,
    },
  ]}
  additionalColumns={[
      {
        id: 'action',
        Header: 'Action',
        // Proptypes disabled as this prop is passed in separately
        Cell: ({ row }) => <Button variant="link" onClick={() => console.log("Assign", row)}>Assign</Button>,
      }
    ]}
>
  <DataTable.Table />
</DataTable>

Table Props API

The DataTable.Table component expects to receive a react-table instance from the DataTableContext.

caption string | element
Defaultnull
className string
data shape {}[] Required
specifies the order and contents of the table's columns and provides display strings for each column's heading. It is composed of an ordered array of objects. Each object contains the following keys:
1. label (string or element; required) contains the display string for each column's heading.
2. key (string; required) maps that label to its corresponding datum for each row in data, to ensure table data are displayed in their appropriate columns.
3. columnSortable (boolean; optional) specifies at the column-level whether the column is sortable. If columnSortable is true, a sort button will be rendered in the column table heading. It is only required if tableSortable is set to true.
4. onSort (function; conditionally required) specifies what function is called when a sortable column is clicked. It is only required if the column's columnSortable is set to true.
5. hideHeader (boolean; optional) specifies at the column-level whether the column label is visible. A column that is sortable cannot have its label be hidden.
6. width (string; conditionally required) only if hasFixedColumnWidths is set to true, the <td> elements' class attributes will be set to this value. This allows restricting columns to specific widths. See Bootstrap's grid documentation for col class names that can be used.
The order of objects in columns specifies the order of the columns in the table.
columns shape {
key: string Required,
label: string | element Required,
columnSortable: isRequiredIf(PropTypes.bool, props => props.tableSortable),
onSort: isRequiredIf(PropTypes.func, props => props.columnSortable),
hideHeader: bool,
width: isRequiredIf(PropTypes.string, props => props.hasFixedColumnWidths),
}[] Required
specifies the order and contents of the table's columns and provides display strings for each column's heading. It is composed of an ordered array of objects. Each object contains the following keys:
1. label (string or element; required) contains the display string for each column's heading.
2. key (string; required) maps that label to its corresponding datum for each row in data, to ensure table data are displayed in their appropriate columns.
3. columnSortable (boolean; optional) specifies at the column-level whether the column is sortable. If columnSortable is true, a sort button will be rendered in the column table heading. It is only required if tableSortable is set to true.
4. onSort (function; conditionally required) specifies what function is called when a sortable column is clicked. It is only required if the column's columnSortable is set to true.
5. hideHeader (boolean; optional) specifies at the column-level whether the column label is visible. A column that is sortable cannot have its label be hidden.
6. width (string; conditionally required) only if hasFixedColumnWidths is set to true, the <td> elements' class attributes will be set to this value. This allows restricting columns to specific widths. See Bootstrap's grid documentation for col class names that can be used.
The order of objects in columns specifies the order of the columns in the table.
headingClassName string[]
Specifies Bootstrap class names to apply to the table heading. Options are detailed in Bootstrap's docs.
Default[]
tableSortable bool
Specifies whether the table is sortable. This setting supercedes column-level sortability, so if it is false, no sortable components will be rendered.
Defaultfalse
hasFixedColumnWidths bool
Specifies whether the table's columns have fixed widths. Every element in columns must define a width if this is true.
Defaultfalse
defaultSortedColumn isRequiredIf(PropTypes.string, props => props.tableSortable)
Specifies the key of the column that is sorted by default. It is only required if tableSortable is set to true.
defaultSortDirection isRequiredIf(PropTypes.string, props => props.tableSortable)
Specifies the direction the defaultSortedColumn is sorted in by default; it will typically be either 'asc' or 'desc'. It is only required if tableSortable is set to true.
sortButtonsScreenReaderText isRequiredIf( PropTypes.shape({ asc: PropTypes.string, desc: PropTypes.string, defaultText: PropTypes.string, }), props => props.tableSortable, )
Specifies the screen reader only text that accompanies the sort buttons for sortable columns. It takes the form of an object containing the following keys:
1. asc: (string) specifies the screen reader only text for sort buttons in the ascending state.
2. desc: (string) specifies the screen reader only text for sort buttons in the descending state.
3. defaultText: (string) specifies the screen reader only text for sort buttons that are not engaged.
It is only required if tableSortable is set to true.
Default:
```
{
  asc: 'sort ascending',
  desc: 'sort descending',
  defaultText: 'click to sort',
}
```
Default{ asc: 'sort ascending', desc: 'sort descending', defaultText: 'click to sort', }
rowHeaderColumnKey string
Specifies the key for the column that should act as a row header. Rather than rendering as <td> elements, cells in this column will render as <th scope="row">

Table Subcomponents

Subcomponents of DataTable.Table can be used independently of the main component. They are designed for use with a react-table instance.

TableRow Props API

row shape {
getRowProps: func Required,
cells: shape {}[] Required,
id: string Required,
isSelected: bool,
isExpanded: bool,
} Required
Row data that is received from react-table API.

TableCell Props API

getCellProps func Required
Props for the td element
render func Required
Function that renders the cell contents. Will be called with the string 'Cell'
column shape {
cellClassName: string,
} Required
Table column

TableHeaderCell Props API

getHeaderProps func Required
Returns props for the th element
isSorted bool
Indicates whether or not a column is sorted
Defaultfalse
render func Required
Renders the header content. Passed the string 'Header'
isSortedDesc bool
Indicates whether the column is sorted in descending order
Defaultfalse
getSortByToggleProps func
Gets props related to sorting that will be passed to th
Default() => {}
canSort bool
Indicates whether a column is sortable
Defaultfalse
headerClassName string
Class(es) to be applied to header cells
Defaultnull

TableHeaderRow Props API

headerGroups shape {
headers: shape {
getHeaderProps: func Required,
}[] Required,
getHeaderGroupProps: func Required,
}[] Required

CardView and alternate table components

You may choose to use any table component by using the following code in your display component:

const instance = useContext(DataTableContext)

The CardView takes a CardComponent that is personalized to the table in question and displays a responsive grid of cards.

Show editable code example

Any Paragon component or export may be added to the code example.

<DataTable
  isFilterable
  defaultColumnValues={{ Filter: TextFilter }}
  isPaginated
  isSortable
  initialState={{
    pageSize: 3,
    pageIndex: 0
  }}
  itemCount={20}
  fetchData={(currentState) => console.log(`This function will be called with the value: ${JSON.stringify(currentState)}}`)}
  data={[
  {
    "id": "2baf70d1-42bb-4437-b551-e5fed5a87abe",
    "title": "Castle in the Sky",
    "director": "Hayao Miyazaki",
    "producer": "Isao Takahata",
    "release_date": "1986",
    "rt_score": "95",
  },
  {
    "id": "12cfb892-aac0-4c5b-94af-521852e46d6a",
    "title": "Grave of the Fireflies",
    "director": "Isao Takahata",
    "producer": "Toru Hara",
    "release_date": "1988",
    "rt_score": "97",
  },
  {
    "id": "58611129-2dbc-4a81-a72f-77ddfc1b1b49",
    "title": "My Neighbor Totoro",
    "director": "Hayao Miyazaki",
    "producer": "Hayao Miyazaki",
    "release_date": "1988",
    "rt_score": "93",
  },
  {
    "id": "ea660b10-85c4-4ae3-8a5f-41cea3648e3e",
    "title": "Kiki's Delivery Service",
    "director": "Hayao Miyazaki",
    "producer": "Hayao Miyazaki",
    "release_date": "1989",
    "rt_score": "96",
  },
  {
    "id": "4e236f34-b981-41c3-8c65-f8c9000b94e7",
    "title": "Only Yesterday",
    "director": "Isao Takahata",
    "producer": "Toshio Suzuki",
    "release_date": "1991",
    "rt_score": "100",
  },
  {
    "id": "ebbb6b7c-945c-41ee-a792-de0e43191bd8",
    "title": "Porco Rosso",
    "director": "Hayao Miyazaki",
    "producer": "Toshio Suzuki",
    "release_date": "1992",
    "rt_score": "94",
  },
  {
    "id": "1b67aa9a-2e4a-45af-ac98-64d6ad15b16c",
    "title": "Pom Poko",
    "director": "Isao Takahata",
    "producer": "Toshio Suzuki",
    "release_date": "1994",
    "rt_score": "78",
  },
  {
    "id": "ff24da26-a969-4f0e-ba1e-a122ead6c6e3",
    "title": "Whisper of the Heart",
    "director": "Yoshifumi Kondō",
    "producer": "Toshio Suzuki",
    "release_date": "1995",
    "rt_score": "91",
  },
  {
    "id": "0440483e-ca0e-4120-8c50-4c8cd9b965d6",
    "title": "Princess Mononoke",
    "director": "Hayao Miyazaki",
    "producer": "Toshio Suzuki",
    "release_date": "1997",
    "rt_score": "92",
  },
  {
    "id": "45204234-adfd-45cb-a505-a8e7a676b114",
    "title": "My Neighbors the Yamadas",
    "director": "Isao Takahata",
    "producer": "Toshio Suzuki",
    "release_date": "1999",
    "rt_score": "75",
  },
  {
    "id": "dc2e6bd1-8156-4886-adff-b39e6043af0c",
    "title": "Spirited Away",
    "director": "Hayao Miyazaki",
    "producer": "Toshio Suzuki",
    "release_date": "2001",
    "rt_score": "97",
  },
  {
    "id": "90b72513-afd4-4570-84de-a56c312fdf81",
    "title": "The Cat Returns",
    "director": "Hiroyuki Morita",
    "producer": "Toshio Suzuki",
    "release_date": "2002",
    "rt_score": "89",
  },
  {
    "id": "cd3d059c-09f4-4ff3-8d63-bc765a5184fa",
    "title": "Howl's Moving Castle",
    "director": "Hayao Miyazaki",
    "producer": "Toshio Suzuki",
    "release_date": "2004",
    "rt_score": "87",
  },
  {
    "id": "112c1e67-726f-40b1-ac17-6974127bb9b9",
    "title": "Tales from Earthsea",
    "director": "Gorō Miyazaki",
    "producer": "Toshio Suzuki",
    "release_date": "2006",
    "rt_score": "41",
  },
  {
    "id": "758bf02e-3122-46e0-884e-67cf83df1786",
    "title": "Ponyo",
    "director": "Hayao Miyazaki",
    "producer": "Toshio Suzuki",
    "release_date": "2008",
    "rt_score": "92",
  },
  {
    "id": "2de9426b-914a-4a06-a3a0-5e6d9d3886f6",
    "title": "Arrietty",
    "director": "Hiromasa Yonebayashi",
    "producer": "Toshio Suzuki",
    "release_date": "2010",
    "rt_score": "95",
  },
  {
    "id": "45db04e4-304a-4933-9823-33f389e8d74d",
    "title": "From Up on Poppy Hill",
    "director": "Gorō Miyazaki",
    "producer": "Toshio Suzuki",
    "release_date": "2011",
    "rt_score": "83",
  },
  {
    "id": "67405111-37a5-438f-81cc-4666af60c800",
    "title": "The Wind Rises",
    "director": "Hayao Miyazaki",
    "producer": "Toshio Suzuki",
    "release_date": "2013",
    "rt_score": "89",
  },
  {
    "id": "578ae244-7750-4d9f-867b-f3cd3d6fecf4",
    "title": "The Tale of the Princess Kaguya",
    "director": "Isao Takahata",
    "producer": "Yoshiaki Nishimura",
    "release_date": "2013",
    "rt_score": "100",
  },
  {
    "id": "5fdfb320-2a02-49a7-94ff-5ca418cae602",
    "title": "When Marnie Was There",
    "director": "Hiromasa Yonebayashi",
    "producer": "Yoshiaki Nishimura",
    "release_date": "2014",
    "rt_score": "92",
  }
]}
  columns={[
    {
      Header: 'Title',
      accessor: 'title',

    },
    {
      Header: 'Director',
      accessor: 'director',
    },
    {
      Header: 'Release date',
      accessor: 'release_date',
    },
  ]}
  bulkActions={[
    {
      buttonText: 'Download CSV',
      handleClick: (selectedRows) => console.log('Downloading CSV ', selectedRows),
    },
  ]}
>
  <TableControlBar />
  <CardView CardComponent={MiyazakiCard} />
  <TableFooter />
</DataTable>

<DataTable
  isFilterable
  defaultColumnValues={{ Filter: TextFilter }}
  isPaginated
  isSortable
  initialState={{
    pageSize: 3,
    pageIndex: 0
  }}
  itemCount={20}
  fetchData={(currentState) => console.log(`This function will be called with the value: ${JSON.stringify(currentState)}}`)}
  data={[
  {
    "id": "2baf70d1-42bb-4437-b551-e5fed5a87abe",
    "title": "Castle in the Sky",
    "director": "Hayao Miyazaki",
    "producer": "Isao Takahata",
    "release_date": "1986",
    "rt_score": "95",
  },
  {
    "id": "12cfb892-aac0-4c5b-94af-521852e46d6a",
    "title": "Grave of the Fireflies",
    "director": "Isao Takahata",
    "producer": "Toru Hara",
    "release_date": "1988",
    "rt_score": "97",
  },
  {
    "id": "58611129-2dbc-4a81-a72f-77ddfc1b1b49",
    "title": "My Neighbor Totoro",
    "director": "Hayao Miyazaki",
    "producer": "Hayao Miyazaki",
    "release_date": "1988",
    "rt_score": "93",
  },
  {
    "id": "ea660b10-85c4-4ae3-8a5f-41cea3648e3e",
    "title": "Kiki's Delivery Service",
    "director": "Hayao Miyazaki",
    "producer": "Hayao Miyazaki",
    "release_date": "1989",
    "rt_score": "96",
  },
  {
    "id": "4e236f34-b981-41c3-8c65-f8c9000b94e7",
    "title": "Only Yesterday",
    "director": "Isao Takahata",
    "producer": "Toshio Suzuki",
    "release_date": "1991",
    "rt_score": "100",
  },
  {
    "id": "ebbb6b7c-945c-41ee-a792-de0e43191bd8",
    "title": "Porco Rosso",
    "director": "Hayao Miyazaki",
    "producer": "Toshio Suzuki",
    "release_date": "1992",
    "rt_score": "94",
  },
  {
    "id": "1b67aa9a-2e4a-45af-ac98-64d6ad15b16c",
    "title": "Pom Poko",
    "director": "Isao Takahata",
    "producer": "Toshio Suzuki",
    "release_date": "1994",
    "rt_score": "78",
  },
  {
    "id": "ff24da26-a969-4f0e-ba1e-a122ead6c6e3",
    "title": "Whisper of the Heart",
    "director": "Yoshifumi Kondō",
    "producer": "Toshio Suzuki",
    "release_date": "1995",
    "rt_score": "91",
  },
  {
    "id": "0440483e-ca0e-4120-8c50-4c8cd9b965d6",
    "title": "Princess Mononoke",
    "director": "Hayao Miyazaki",
    "producer": "Toshio Suzuki",
    "release_date": "1997",
    "rt_score": "92",
  },
  {
    "id": "45204234-adfd-45cb-a505-a8e7a676b114",
    "title": "My Neighbors the Yamadas",
    "director": "Isao Takahata",
    "producer": "Toshio Suzuki",
    "release_date": "1999",
    "rt_score": "75",
  },
  {
    "id": "dc2e6bd1-8156-4886-adff-b39e6043af0c",
    "title": "Spirited Away",
    "director": "Hayao Miyazaki",
    "producer": "Toshio Suzuki",
    "release_date": "2001",
    "rt_score": "97",
  },
  {
    "id": "90b72513-afd4-4570-84de-a56c312fdf81",
    "title": "The Cat Returns",
    "director": "Hiroyuki Morita",
    "producer": "Toshio Suzuki",
    "release_date": "2002",
    "rt_score": "89",
  },
  {
    "id": "cd3d059c-09f4-4ff3-8d63-bc765a5184fa",
    "title": "Howl's Moving Castle",
    "director": "Hayao Miyazaki",
    "producer": "Toshio Suzuki",
    "release_date": "2004",
    "rt_score": "87",
  },
  {
    "id": "112c1e67-726f-40b1-ac17-6974127bb9b9",
    "title": "Tales from Earthsea",
    "director": "Gorō Miyazaki",
    "producer": "Toshio Suzuki",
    "release_date": "2006",
    "rt_score": "41",
  },
  {
    "id": "758bf02e-3122-46e0-884e-67cf83df1786",
    "title": "Ponyo",
    "director": "Hayao Miyazaki",
    "producer": "Toshio Suzuki",
    "release_date": "2008",
    "rt_score": "92",
  },
  {
    "id": "2de9426b-914a-4a06-a3a0-5e6d9d3886f6",
    "title": "Arrietty",
    "director": "Hiromasa Yonebayashi",
    "producer": "Toshio Suzuki",
    "release_date": "2010",
    "rt_score": "95",
  },
  {
    "id": "45db04e4-304a-4933-9823-33f389e8d74d",
    "title": "From Up on Poppy Hill",
    "director": "Gorō Miyazaki",
    "producer": "Toshio Suzuki",
    "release_date": "2011",
    "rt_score": "83",
  },
  {
    "id": "67405111-37a5-438f-81cc-4666af60c800",
    "title": "The Wind Rises",
    "director": "Hayao Miyazaki",
    "producer": "Toshio Suzuki",
    "release_date": "2013",
    "rt_score": "89",
  },
  {
    "id": "578ae244-7750-4d9f-867b-f3cd3d6fecf4",
    "title": "The Tale of the Princess Kaguya",
    "director": "Isao Takahata",
    "producer": "Yoshiaki Nishimura",
    "release_date": "2013",
    "rt_score": "100",
  },
  {
    "id": "5fdfb320-2a02-49a7-94ff-5ca418cae602",
    "title": "When Marnie Was There",
    "director": "Hiromasa Yonebayashi",
    "producer": "Yoshiaki Nishimura",
    "release_date": "2014",
    "rt_score": "92",
  }
]}
  columns={[
    {
      Header: 'Title',
      accessor: 'title',

    },
    {
      Header: 'Director',
      accessor: 'director',
    },
    {
      Header: 'Release date',
      accessor: 'release_date',
    },
  ]}
  bulkActions={[
    {
      buttonText: 'Download CSV',
      handleClick: (selectedRows) => console.log('Downloading CSV ', selectedRows),
    },
  ]}
>
  <TableControlBar />
  <CardView CardComponent={MiyazakiCard} />
  <TableFooter />
</DataTable>

Sample Card component for use with CardView

The CardComponent prop on CardView represents a table row, and will receive the row that react-table provides as props.

CardView Props API

className string
The class name for the CardGrid component
columnSizes shape {
xs: number,
sm: number,
md: number,
lg: number,
xl: number,
}
An object containing the desired column size at each breakpoint, following a similar props API as react-bootstrap/Col
Default{ xs: 12, lg: 6, xl: 4, }
CardComponent func Required
Your card component must be individualized to your table. It will be called with props from the "row" of data it will display
selectionPlacement enum'left' | 'right'
If the Cards are selectable this prop determines from which side of the Card to show selection component.
Default'right'
SkeletonCardComponent func
Overrides default skeleton card component for loading state in CardView
skeletonCardCount number
Customize the number of loading skeleton cards to display in CardView
Default8

const MiyazakiCard = ({ className, original  }) => {
  const { title, director, release_date } = original;

  return (
    <Card className={className}>
      <Card.ImageCap src="https://picsum.photos/360/200/" srcAlt="Card image" />
      <Card.Section title={title}>
        <dl>
          <dt>Director</dt><dd>{director}</dd>
          <dt>Release Date</dt><dd>{release_date}</dd>
        </dl>
      </Card.Section>
    </Card>
  );
};

Theme Variables (SCSS)#

$data-table-background-color:  $white !default;
$data-table-border:  2px solid $light-300 !default;
$data-table-box-shadow:  $box-shadow-sm !default;
$data-table-padding-x:  .75rem !default;
$data-table-padding-y:  .75rem !default;
$data-table-padding-small:  .5rem !default;
$data-table-cell-padding:  .5rem .75rem !default;
$data-table-footer-position:  center !default;
$data-table-pagination-dropdown-max-height:  60vh !default;
$data-table-pagination-dropdown-min-width:  6rem !default;
$data-table-layout-sidebar-width:  12rem !default;

Props API#

DataTable Props API

columns shape {
Header: elementType | node Required,
accessor: requiredWhenNot(PropTypes.string, 'Cell'),
Cell: elementType | node,
Filter: elementType,
filter: string,
filterChoices: shape {
name: string,
number: number,
value: string,
}[],
}[] Required
Definition of table columns
data shape {}[] Required
Data to be displayed in the table
isSelectable bool
table rows can be selected
Defaultfalse
manualSelectColumn shape {
id: string Required,
Header: elementType | node Required,
Cell: elementType | node,
disableSortBy: bool Required,
}
Alternate column for selecting rows. See react table useSort docs for more information
isSortable bool
Table columns can be sorted
Defaultfalse
manualSortBy bool
Indicates that sorting will be done via backend API. A fetchData function must be provided
Defaultfalse
isPaginated bool
Paginate the table
Defaultfalse
manualPagination bool
Indicates that pagination will be done manually. A fetchData function must be provided
Defaultfalse
pageCount requiredWhen(PropTypes.number, 'manualPagination')
isFilterable bool
Table rows can be filtered, using a default filter in the default column values, or in the column definition
Defaultfalse
manualFilters bool
Indicates that filtering will be done via a backend API. A fetchData function must be provided
Defaultfalse
defaultColumnValues shape {
Filter: elementType,
}
defaults that will be set on each column. Will be overridden by individual column values
Default{}
additionalColumns shape {
id: string Required,
Header: elementType | node,
Cell: elementType | node,
}[]
Actions or other additional non-data columns can be added here
Default[]
fetchData func
Function that will fetch table data. Called when page size, page index or filters change. Meant to be used with manual filters and pagination
Defaultnull
initialState shape {
pageSize: requiredWhen(PropTypes.number, 'isPaginated'),
pageIndex: requiredWhen(PropTypes.number, 'isPaginated'),
filters: requiredWhen(PropTypes.arrayOf(PropTypes.shape()), 'manualFilters'),
sortBy: requiredWhen(PropTypes.arrayOf(PropTypes.shape()), 'manualSortBy'),
selectedRowIds: shape {
0: any,
1: any,
2: any,
3: any,
4: any,
5: any,
6: any,
7: any,
8: any,
9: any,
10: any,
11: any,
12: any,
13: any,
14: any,
15: any,
16: any,
},
selectedRowsOrdered: number[],
}
Initial state passed to react-table's documentation https://github.com/TanStack/table/blob/v7/docs/src/pages/docs/api/useTable.md
Default{}
initialTableOptions shape {}
Table options passed to react-table's useTable hook. Will override some options passed in to DataTable, such as: data, columns, defaultColumn, manualFilters, manualPagination, manualSortBy, and initialState
Default{}
itemCount number Required
Actions to be performed on the table. Called with the table instance. Not displayed if rows are selected.
bulkActions shape {
buttonText: string Required,
handleClick: func Required,
className: string,
variant: string,
disabled: bool,
} | func | element[] | func | element
Actions to be performed on selected rows of the table. Called with the selected rows. Only displayed if rows are selected.
Default[]
tableActions shape {
buttonText: string Required,
handleClick: func Required,
className: string,
variant: string,
disabled: bool,
} | func | element[] | func | element
Function for rendering custom components, called with the table instance
Default[]
numBreakoutFilters enum1 | 2 | 3 | 4
Number between one and four filters that can be shown on the top row.
Default1
EmptyTableComponent elementType
Component to be displayed when the table is empty
DefaultEmptyTableContent
RowStatusComponent elementType
Component to be displayed for row status, ie, 10 of 20 rows. Displayed by default in the TableControlBar
DefaultRowStatus
SelectionStatusComponent elementType
Component to be displayed for selection status. Displayed when there are selected rows and no active filters
DefaultSelectionStatus
FilterStatusComponent elementType
Component to be displayed for filter status. Displayed when there are active filters.
DefaultFilterStatus
children node
If children are not provided a table with control bar and footer will be rendered
Defaultnull
showFiltersInSidebar bool
If true filters will be shown on sidebar instead
Defaultfalse
dataViewToggleOptions shape {
isDataViewToggleEnabled: bool,
onDataViewToggle: func,
defaultActiveStateValue: string,
togglePlacement: string,
}
options for data view toggle
Default{ isDataViewToggleEnabled: false, onDataViewToggle: () => {}, defaultActiveStateValue: 'card', togglePlacement: 'left', }
disableElevation bool
Remove the default box shadow on the component
Defaultfalse
renderRowSubComponent func
A function that will render contents of expanded row, accepts row as a prop.
isExpandable bool
Indicates whether table supports expandable rows.
Defaultfalse
isLoading bool
Indicates whether the table should show loading states.
Defaultfalse
onSelectedRowsChanged func
Callback function called when row selections change.
maxSelectedRows number
Indicates the max of rows selectable in the table. Requires isSelectable prop
onMaxSelectedRows func
Callback after selected max rows. Requires isSelectable and maxSelectedRows props

TableControlBar Props API

className string
Specifies class name to append to the base element
Defaultnull

TableFooter Props API

children node
Specifies the content of the TableFooter
Defaultnull
className string
Specifies class name to append to the base element.

Table Props API

caption string | element
Defaultnull
className string
data shape {}[] Required
specifies the order and contents of the table's columns and provides display strings for each column's heading. It is composed of an ordered array of objects. Each object contains the following keys:
1. label (string or element; required) contains the display string for each column's heading.
2. key (string; required) maps that label to its corresponding datum for each row in data, to ensure table data are displayed in their appropriate columns.
3. columnSortable (boolean; optional) specifies at the column-level whether the column is sortable. If columnSortable is true, a sort button will be rendered in the column table heading. It is only required if tableSortable is set to true.
4. onSort (function; conditionally required) specifies what function is called when a sortable column is clicked. It is only required if the column's columnSortable is set to true.
5. hideHeader (boolean; optional) specifies at the column-level whether the column label is visible. A column that is sortable cannot have its label be hidden.
6. width (string; conditionally required) only if hasFixedColumnWidths is set to true, the <td> elements' class attributes will be set to this value. This allows restricting columns to specific widths. See Bootstrap's grid documentation for col class names that can be used.
The order of objects in columns specifies the order of the columns in the table.
columns shape {
key: string Required,
label: string | element Required,
columnSortable: isRequiredIf(PropTypes.bool, props => props.tableSortable),
onSort: isRequiredIf(PropTypes.func, props => props.columnSortable),
hideHeader: bool,
width: isRequiredIf(PropTypes.string, props => props.hasFixedColumnWidths),
}[] Required
specifies the order and contents of the table's columns and provides display strings for each column's heading. It is composed of an ordered array of objects. Each object contains the following keys:
1. label (string or element; required) contains the display string for each column's heading.
2. key (string; required) maps that label to its corresponding datum for each row in data, to ensure table data are displayed in their appropriate columns.
3. columnSortable (boolean; optional) specifies at the column-level whether the column is sortable. If columnSortable is true, a sort button will be rendered in the column table heading. It is only required if tableSortable is set to true.
4. onSort (function; conditionally required) specifies what function is called when a sortable column is clicked. It is only required if the column's columnSortable is set to true.
5. hideHeader (boolean; optional) specifies at the column-level whether the column label is visible. A column that is sortable cannot have its label be hidden.
6. width (string; conditionally required) only if hasFixedColumnWidths is set to true, the <td> elements' class attributes will be set to this value. This allows restricting columns to specific widths. See Bootstrap's grid documentation for col class names that can be used.
The order of objects in columns specifies the order of the columns in the table.
headingClassName string[]
Specifies Bootstrap class names to apply to the table heading. Options are detailed in Bootstrap's docs.
Default[]
tableSortable bool
Specifies whether the table is sortable. This setting supercedes column-level sortability, so if it is false, no sortable components will be rendered.
Defaultfalse
hasFixedColumnWidths bool
Specifies whether the table's columns have fixed widths. Every element in columns must define a width if this is true.
Defaultfalse
defaultSortedColumn isRequiredIf(PropTypes.string, props => props.tableSortable)
Specifies the key of the column that is sorted by default. It is only required if tableSortable is set to true.
defaultSortDirection isRequiredIf(PropTypes.string, props => props.tableSortable)
Specifies the direction the defaultSortedColumn is sorted in by default; it will typically be either 'asc' or 'desc'. It is only required if tableSortable is set to true.
sortButtonsScreenReaderText isRequiredIf( PropTypes.shape({ asc: PropTypes.string, desc: PropTypes.string, defaultText: PropTypes.string, }), props => props.tableSortable, )
Specifies the screen reader only text that accompanies the sort buttons for sortable columns. It takes the form of an object containing the following keys:
1. asc: (string) specifies the screen reader only text for sort buttons in the ascending state.
2. desc: (string) specifies the screen reader only text for sort buttons in the descending state.
3. defaultText: (string) specifies the screen reader only text for sort buttons that are not engaged.
It is only required if tableSortable is set to true.
Default:
```
{
  asc: 'sort ascending',
  desc: 'sort descending',
  defaultText: 'click to sort',
}
```
Default{ asc: 'sort ascending', desc: 'sort descending', defaultText: 'click to sort', }
rowHeaderColumnKey string
Specifies the key for the column that should act as a row header. Rather than rendering as <td> elements, cells in this column will render as <th scope="row">

TableCell Props API

getCellProps func Required
Props for the td element
render func Required
Function that renders the cell contents. Will be called with the string 'Cell'
column shape {
cellClassName: string,
} Required
Table column

TableHeaderCell Props API

getHeaderProps func Required
Returns props for the th element
isSorted bool
Indicates whether or not a column is sorted
Defaultfalse
render func Required
Renders the header content. Passed the string 'Header'
isSortedDesc bool
Indicates whether the column is sorted in descending order
Defaultfalse
getSortByToggleProps func
Gets props related to sorting that will be passed to th
Default() => {}
canSort bool
Indicates whether a column is sortable
Defaultfalse
headerClassName string
Class(es) to be applied to header cells
Defaultnull

TableHeaderRow Props API

headerGroups shape {
headers: shape {
getHeaderProps: func Required,
}[] Required,
getHeaderGroupProps: func Required,
}[] Required

TableRow Props API

row shape {
getRowProps: func Required,
cells: shape {}[] Required,
id: string Required,
isSelected: bool,
isExpanded: bool,
} Required
Row data that is received from react-table API.

CardView Props API

className string
The class name for the CardGrid component
columnSizes shape {
xs: number,
sm: number,
md: number,
lg: number,
xl: number,
}
An object containing the desired column size at each breakpoint, following a similar props API as react-bootstrap/Col
Default{ xs: 12, lg: 6, xl: 4, }
CardComponent func Required
Your card component must be individualized to your table. It will be called with props from the "row" of data it will display
selectionPlacement enum'left' | 'right'
If the Cards are selectable this prop determines from which side of the Card to show selection component.
Default'right'
SkeletonCardComponent func
Overrides default skeleton card component for loading state in CardView
skeletonCardCount number
Customize the number of loading skeleton cards to display in CardView
Default8

Usage Insights#

CardView

Project Name	Paragon Version	Instance Count
frontend-app-admin-portal	21.13.1	3
frontend-app-course-authoring	22.8.1	2
frontend-app-enterprise-public-catalog	21.13.1	2
frontend-app-learning	22.8.1	1

DataTable

Project Name	Paragon Version	Instance Count
edx-ora2	21.13.1	1
frontend-app-admin-portal	21.13.1	33
frontend-app-communications	22.7.0	2
frontend-app-course-authoring	22.8.1	6
frontend-app-ecommerce	20.46.3	1
frontend-app-enterprise-public-catalog	21.13.1	2
frontend-app-gradebook	22.8.1	3
frontend-app-learner-record	22.10.0	1
frontend-app-learning	22.8.1	3
frontend-app-ora-grading	21.11.3	2
frontend-app-publisher	21.13.1	1
frontend-app-support-tools	21.13.1	6

DataTableTable

Project Name	Paragon Version	Instance Count
edx-ora2	21.13.1	1
frontend-app-admin-portal	21.13.1	8
frontend-app-course-authoring	22.8.1	3
frontend-app-ecommerce	20.46.3	1
frontend-app-enterprise-public-catalog	21.13.1	1
frontend-app-gradebook	22.8.1	1
frontend-app-learner-record	22.10.0	1
frontend-app-learning	22.8.1	2
frontend-app-ora-grading	21.11.3	2
frontend-app-support-tools	21.13.1	1

Table

Project Name	Paragon Version	Instance Count
edx-platform	2.6.4	2
frontend-app-admin-portal	21.13.1	1
studio-frontend	3.4.8	1

TableFooter

	Project Name	Paragon Version	Instance Count
	frontend-app-course-authoring	22.8.1	1

Edit this page Leave feedback

Paragon Design System

Theme

Data views

DataTable.Table

Table Subcomponents

CardView and alternate table components

Sample Card component for use with CardView

Theme Variables (SCSS)#

Props API#

Usage Insights#

CardView

DataTable

DataTableTable

Table

TableFooter

All components (A-Z)

Theme

Data views

DataTable.Table#

Table Subcomponents#

CardView and alternate table components#

Sample Card component for use with CardView#

Theme Variables (SCSS)#

Props API#

Usage Insights#

CardView

DataTable

DataTableTable

Table

TableFooter

All components (A-Z)

DataTable.Table

Table Subcomponents

CardView and alternate table components

Sample Card component for use with CardView