{"componentChunkName":"component---src-pages-components-data-table-usage-mdx","path":"/components/data-table/usage/","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Data table","description":"The data table component allows for the flexible display and sorting of information.","tabs":["Code","Usage","Style"]},"relativePagePath":"/components/data-table/usage.mdx","titleType":"prepend","MdxNode":{"id":"9319eebe-cea8-5610-8b5e-bf0b0cda7d87","children":[],"parent":"4c9f5115-9ee8-56c4-91f2-e2fdf462491a","internal":{"content":"---\ntitle: Data table\ndescription: The data table component allows for the flexible display and sorting of information.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Basic data table\n\nThe data table component is designed in a way for additional functionality to be added on to fit your team's needs.\n\nThe basic data table is shipped with a base style, which includes:\n\n- Borders\n- No zebra striping, row dividers instead.\n- No Pagination, search, table toolbar, or multi-select\n\n\n\n\n\n
\n\nBasic data table\n\n## Additional functionality\n\nThe following can be added to the data table to increase its functionality.\n\n### Pagination\n\nPagination divides table data into separate pages. Pagination is accompanied by an option that enables the user to change the number of items per page. See the [pagination](/components/pagination/code) component for further guidelines.\n\n\n\n\n\n
\n\nData table with various Pagination methods\n\n### Search\n\nSearch returns results based on matches. It is used to locate and display a set of results. Search functionality within a table follows [small search](/components/search/code) conventions. Search should be closed by default, and live below the table title.\n\n\n\n\n\n
\n\nSearch on data tables.\n\n### Sorting\n\nMake data sortable to improve table usability. Sorting controls are located in the column headers and indicated with an arrow icon.\n\nA sorted data table has three states: unsorted (`arrows`), sorted-up (`arrow--up`) or sorted-down (`arrow--down`). The icon indicates the current sorted state and is only shown if sorting is activated. Only the column being sorted should display an icon, and unsorted icons are only visible on hover. You can see a demo of table sorting in Carbon’s [React Storybook](http://react.carbondesignsystem.com/?path=/story/datatable--with-sorting).\n\n\n\n\n\n
\n\nSorting on data tables\n\n### Table toolbar\n\nThe table toolbar is reserved for global table actions such as table settings, complex filter, export, or editing table data. Additional options can be added if you have an icon to support that function. Icons should be 16x16 px (glyphs). We recommend using no more than 5 icons within the table toolbar.\n\n\n\n\n\n
\n\nTable toolbar: table settings\n\n### Multi-select / batch action\n\nBatch actions are functions that may be performed on multiple items within a table. Once the user selects at least one row from the table, the **batch action bar** appears at the top of the table, presenting the user with actions they can take. To exit or escape \"batch action mode,\" the user can cancel out or deselect the items.\n\n\n\n\n\n
\n\nBatch action mode on data tables\n\n### Inline actions\n\nInline actions are functions that may be performed on a specific table item. Each row is accompanied by an [overflow menu](/components/overflow-menu/code) that contains actions related specifically to that table row.\n\n\n\n\n\n
\n\nOverflow menu example\n\nWhen the overflow menu contains less than three options, keep the actions inline as icon buttons instead. This reduces 1 click and makes available actions visible to users at a glance.\n\n\n\n\n\n
\n\nOverflow menu example\n\n#### Persistent overflow menu\n\nBy default, the overflow menu icon appears on hover or focus. This reduces visual clutter and drives user interactions with clear context and results.\n\nData table also supports persistent overflow menu icons. Overflow icons should only persist if the actions contained within them are core to the function of your table. Enabling persistent overflow icons may complicate data presentation and impact general usability.\n\n\n\n\n\n
\n\nOverflow menu example\n\n### Expandable\n\nThe expandable data table is useful for presenting large amounts of data in a small space. Use the expanded section for supplementary information or data that needs additional query time.\n\n\n\n\n\n
\n\nExpandable data table with one row expanded\n\nBy default, the expand-all chevron is not shown. Keeping detailed information in expanded section saves user loading time by postponing some data queries until needed. Expanding all rows at once will typically negate this advantages of the expandable table. If additional load time is expected to display expanded information, use skeleton states instead of spinners.\n\n\n\n\n\n
\n\nExpandabling all rows with skeleton states\n","type":"Mdx","contentDigest":"f4fd22fffdd0bbe7a4288bd98b674e67","counter":1341,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Data table","description":"The data table component allows for the flexible display and sorting of information.","tabs":["Code","Usage","Style"]},"exports":{},"rawBody":"---\ntitle: Data table\ndescription: The data table component allows for the flexible display and sorting of information.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Basic data table\n\nThe data table component is designed in a way for additional functionality to be added on to fit your team's needs.\n\nThe basic data table is shipped with a base style, which includes:\n\n- Borders\n- No zebra striping, row dividers instead.\n- No Pagination, search, table toolbar, or multi-select\n\n\n\n\n\n
\n\nBasic data table\n\n## Additional functionality\n\nThe following can be added to the data table to increase its functionality.\n\n### Pagination\n\nPagination divides table data into separate pages. Pagination is accompanied by an option that enables the user to change the number of items per page. See the [pagination](/components/pagination/code) component for further guidelines.\n\n\n\n\n\n
\n\nData table with various Pagination methods\n\n### Search\n\nSearch returns results based on matches. It is used to locate and display a set of results. Search functionality within a table follows [small search](/components/search/code) conventions. Search should be closed by default, and live below the table title.\n\n\n\n\n\n
\n\nSearch on data tables.\n\n### Sorting\n\nMake data sortable to improve table usability. Sorting controls are located in the column headers and indicated with an arrow icon.\n\nA sorted data table has three states: unsorted (`arrows`), sorted-up (`arrow--up`) or sorted-down (`arrow--down`). The icon indicates the current sorted state and is only shown if sorting is activated. Only the column being sorted should display an icon, and unsorted icons are only visible on hover. You can see a demo of table sorting in Carbon’s [React Storybook](http://react.carbondesignsystem.com/?path=/story/datatable--with-sorting).\n\n\n\n\n\n
\n\nSorting on data tables\n\n### Table toolbar\n\nThe table toolbar is reserved for global table actions such as table settings, complex filter, export, or editing table data. Additional options can be added if you have an icon to support that function. Icons should be 16x16 px (glyphs). We recommend using no more than 5 icons within the table toolbar.\n\n\n\n\n\n
\n\nTable toolbar: table settings\n\n### Multi-select / batch action\n\nBatch actions are functions that may be performed on multiple items within a table. Once the user selects at least one row from the table, the **batch action bar** appears at the top of the table, presenting the user with actions they can take. To exit or escape \"batch action mode,\" the user can cancel out or deselect the items.\n\n\n\n\n\n
\n\nBatch action mode on data tables\n\n### Inline actions\n\nInline actions are functions that may be performed on a specific table item. Each row is accompanied by an [overflow menu](/components/overflow-menu/code) that contains actions related specifically to that table row.\n\n\n\n\n\n
\n\nOverflow menu example\n\nWhen the overflow menu contains less than three options, keep the actions inline as icon buttons instead. This reduces 1 click and makes available actions visible to users at a glance.\n\n\n\n\n\n
\n\nOverflow menu example\n\n#### Persistent overflow menu\n\nBy default, the overflow menu icon appears on hover or focus. This reduces visual clutter and drives user interactions with clear context and results.\n\nData table also supports persistent overflow menu icons. Overflow icons should only persist if the actions contained within them are core to the function of your table. Enabling persistent overflow icons may complicate data presentation and impact general usability.\n\n\n\n\n\n
\n\nOverflow menu example\n\n### Expandable\n\nThe expandable data table is useful for presenting large amounts of data in a small space. Use the expanded section for supplementary information or data that needs additional query time.\n\n\n\n\n\n
\n\nExpandable data table with one row expanded\n\nBy default, the expand-all chevron is not shown. Keeping detailed information in expanded section saves user loading time by postponing some data queries until needed. Expanding all rows at once will typically negate this advantages of the expandable table. If additional load time is expected to display expanded information, use skeleton states instead of spinners.\n\n\n\n\n\n
\n\nExpandabling all rows with skeleton states\n","fileAbsolutePath":"/zeit/3eb073a4/src/pages/components/data-table/usage.mdx"}}}}