{"componentChunkName":"component---src-pages-components-data-table-style-mdx","path":"/components/data-table/style/","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/style.mdx","titleType":"prepend","MdxNode":{"id":"65b412fa-a5ae-571a-9b5f-0a73a909110c","children":[],"parent":"7e8af7a1-39a8-5834-8e9f-d620c0790ea4","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## Color\n\n| Class                                                                                         | Property         | Color token       |\n| --------------------------------------------------------------------------------------------- | ---------------- | ----------------- |\n| `.bx--data-table-header`                                                                      | background-color | `$ui-01`          |\n| `.bx--data-table-header`                                                                      | text color       | `$text-01`        |\n| `.bx--data-table thead`                                                                       | background-color | `$ui-03`          |\n| `.bx--table-header-label`                                                                     | text color       | `$text-01`        |\n| `.bx--data-table tbody`                                                                       | background-color | `$ui-01`          |\n| `.bx--data-table td`                                                                          | text color       | `$text-02`        |\n| `.bx--data-table--zebra`                                                                      | background-color | –                 |\n| `.bx--expandable-row-v2`                                                                      | background-color | `$ui-01`          |\n| `.bx--table-sort-v2__icon` <br/> `.bx--table-expand-v2__svg` <br/> `.bx--overflow-menu__icon` | fill             | `$icon-01`        |\n| `.bx--batch-actions--active`                                                                  | background-color | `$interactive-01` |\n| `.bx--batch-summary__para`                                                                    | background-color | `$text-04`        |\n| `.bx--batch-actions .bx--btn`                                                                 | text-color       | `$text-04`        |\n\n### Interactive states\n\n| Class                               | Property         | Color token          |\n| ----------------------------------- | ---------------- | -------------------- |\n| `.bx--data-table tr:hover td`       | background-color | `$hover-row`         |\n| `.bx--data-table td:hover`          | text color       | `$text-01`           |\n| `.bx--data-table td:focus`          | border           | `$focus`             |\n| `.bx--data-table--selected`         | background-color | `$selected-ui`       |\n| `.bx--data-table--selected td`      | text color       | `$text-01`           |\n| `.bx--data-table--selected:hover`   | background-color | `$hover-selected-ui` |\n| `.bx--batch-actions .bx--btn:hover` | background color | `$hover-primary`     |\n\n### Style options\n\nSpecific styling on the data table component can be toggled on/off based on user or team preference.\n\n**Row dividers, zebra striping, & table border**\n\nIf zebra striping is turned off, you must have row dividers.\n\n<div className=\"image--fixed\">\n\n![Data table: row styling](images/data-table-style-1.png)\n\n</div>\n\n<Caption>Data table with various row styling</Caption>\n\n<!-- This section is commented out until themes are ready\n\n**Background colors**\n\nData tables are built to be accessible against the `$ui-background` color:\n\n\n\n![Data table: background colors](images/data-table-style-2.png)\n\n\n-->\n\n## Typography\n\n| Class                     | Font-size (px/rem) | Font-weight    | Type token       |\n| ------------------------- | ------------------ | -------------- | ---------------- |\n| `.bx--data-table-header`  | 18 / 1.125         | Regular / 400  | `$heading-03`    |\n| `.bx--table-header-label` | 14 / 0.875         | SemiBold / 600 | `$heading-01`    |\n| `.bx--data-table td`      | 14 / 0.875         | Regular / 400  | `$body-short-01` |\n\n## Structure\n\nTables are a configurable and customizable component. Designers can pick and choose certain elements and interactions.\n\n### Row sizes\n\nShort and Default are offered as **user preferences** that can be accessed from the table settings menu.\n\nRow sizes are customizable. The column header row `.bx--data-table thead` should always match the row size of the table. Tall row heights are only recommended if your data is expected to have 2 lines of content in a single row.\n\n| Class                      | Size    | Row Height (px/rem) |\n| -------------------------- | ------- | ------------------- |\n| `.bx--data-table--compact` | Compact | 24 / 1.5            |\n| `.bx--data-table--short`   | Short   | 32 / 2              |\n| `.bx--data-table tr`       | Default | 48 / 3              |\n| `.bx--data-table--tall`    | Tall    | 64 / 4              |\n\n<div className=\"image--fixed\">\n\n![Data table: row styling](images/data-table-style-3.png)\n\n</div>\n\n<Caption>Data table: varying row sizes</Caption>\n\n### Basics\n\nThe basic table style is the required base from which tables can be developed. Basic tables are composed of a header row followed by rows of data below. At a minimum, tables require three or more columns.\n\nColumn widths can vary by content and only requires a minimum spacing between columns.\n\n| Class                                                                      | Property                    | px / rem | Spacing token |\n| -------------------------------------------------------------------------- | --------------------------- | -------- | ------------- |\n| `.bx--data-table-header`                                                   | margin-bottom               | 16 / 1   | `$spacing-05` |\n| `.bx--table-sort-v2__icon`                                                 | padding                     | 8 / 0.5  | `$spacing-03` |\n| `.bx--data-table td:first-of-type` <br/> `.bx--data-table td:last-of-type` | padding-left, padding-right | 16 / 1   | `$spacing-05` |\n\n### Enhancements\n\nAfter the simple table structure, tables can be enhanced by adding any of the following: selectable rows, expanding rows, nested tables, row menus, table batch actions, overall table menu, and/or table filter.\n\n| Class                       | Property      | px / rem  | Spacing token |\n| --------------------------- | ------------- | --------- | ------------- |\n| `.bx--table-toolbar`        | height        | 48 / 3    | –             |\n| `.bx--table-toolbar--small` | height        | 32 / 2    | –             |\n| `.bx--table-expand-v2__svg` | height        | 16 / 1    | –             |\n| `.bx--checkbox-appearance`  | height, width | 20 / 1.25 | –             |\n\n_Structure and spacing measurements for a basic and an enhanced data table | px / rem_\n\n### Recommended\n\n| Spacing between | Property | px / rem | Spacing token |\n| --------------- | -------- | -------- | ------------- |\n| Columns         | padding  | 16 /1    | `$spacing-05` |\n\n### Toolbar\n\n| Class                        | Property                  | px/rem  | Spacing token |\n| ---------------------------- | ------------------------- | ------- | ------------- |\n| `.bx--toolbar-action`        | height, width             | 48 / 3  | –             |\n| `.bx--toolbar`               | margin-top, margin-bottom | 16 / 1  | `$spacing-05` |\n| `.bx--toolbar-action--small` | height, width             | 32 / 2  | –             |\n| `.bx--toolbar--small`        | margin-top, margin-bottom | 8 / 0.5 | `$spacing-03` |\n\n_Structure and spacing measurements for toolbar icons | px / rem_\n","type":"Mdx","contentDigest":"6998e2f252ecc64c9753b62d94a8def0","counter":1325,"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## Color\n\n| Class                                                                                         | Property         | Color token       |\n| --------------------------------------------------------------------------------------------- | ---------------- | ----------------- |\n| `.bx--data-table-header`                                                                      | background-color | `$ui-01`          |\n| `.bx--data-table-header`                                                                      | text color       | `$text-01`        |\n| `.bx--data-table thead`                                                                       | background-color | `$ui-03`          |\n| `.bx--table-header-label`                                                                     | text color       | `$text-01`        |\n| `.bx--data-table tbody`                                                                       | background-color | `$ui-01`          |\n| `.bx--data-table td`                                                                          | text color       | `$text-02`        |\n| `.bx--data-table--zebra`                                                                      | background-color | –                 |\n| `.bx--expandable-row-v2`                                                                      | background-color | `$ui-01`          |\n| `.bx--table-sort-v2__icon` <br/> `.bx--table-expand-v2__svg` <br/> `.bx--overflow-menu__icon` | fill             | `$icon-01`        |\n| `.bx--batch-actions--active`                                                                  | background-color | `$interactive-01` |\n| `.bx--batch-summary__para`                                                                    | background-color | `$text-04`        |\n| `.bx--batch-actions .bx--btn`                                                                 | text-color       | `$text-04`        |\n\n### Interactive states\n\n| Class                               | Property         | Color token          |\n| ----------------------------------- | ---------------- | -------------------- |\n| `.bx--data-table tr:hover td`       | background-color | `$hover-row`         |\n| `.bx--data-table td:hover`          | text color       | `$text-01`           |\n| `.bx--data-table td:focus`          | border           | `$focus`             |\n| `.bx--data-table--selected`         | background-color | `$selected-ui`       |\n| `.bx--data-table--selected td`      | text color       | `$text-01`           |\n| `.bx--data-table--selected:hover`   | background-color | `$hover-selected-ui` |\n| `.bx--batch-actions .bx--btn:hover` | background color | `$hover-primary`     |\n\n### Style options\n\nSpecific styling on the data table component can be toggled on/off based on user or team preference.\n\n**Row dividers, zebra striping, & table border**\n\nIf zebra striping is turned off, you must have row dividers.\n\n<div className=\"image--fixed\">\n\n![Data table: row styling](images/data-table-style-1.png)\n\n</div>\n\n<Caption>Data table with various row styling</Caption>\n\n<!-- This section is commented out until themes are ready\n\n**Background colors**\n\nData tables are built to be accessible against the `$ui-background` color:\n\n\n\n![Data table: background colors](images/data-table-style-2.png)\n\n\n-->\n\n## Typography\n\n| Class                     | Font-size (px/rem) | Font-weight    | Type token       |\n| ------------------------- | ------------------ | -------------- | ---------------- |\n| `.bx--data-table-header`  | 18 / 1.125         | Regular / 400  | `$heading-03`    |\n| `.bx--table-header-label` | 14 / 0.875         | SemiBold / 600 | `$heading-01`    |\n| `.bx--data-table td`      | 14 / 0.875         | Regular / 400  | `$body-short-01` |\n\n## Structure\n\nTables are a configurable and customizable component. Designers can pick and choose certain elements and interactions.\n\n### Row sizes\n\nShort and Default are offered as **user preferences** that can be accessed from the table settings menu.\n\nRow sizes are customizable. The column header row `.bx--data-table thead` should always match the row size of the table. Tall row heights are only recommended if your data is expected to have 2 lines of content in a single row.\n\n| Class                      | Size    | Row Height (px/rem) |\n| -------------------------- | ------- | ------------------- |\n| `.bx--data-table--compact` | Compact | 24 / 1.5            |\n| `.bx--data-table--short`   | Short   | 32 / 2              |\n| `.bx--data-table tr`       | Default | 48 / 3              |\n| `.bx--data-table--tall`    | Tall    | 64 / 4              |\n\n<div className=\"image--fixed\">\n\n![Data table: row styling](images/data-table-style-3.png)\n\n</div>\n\n<Caption>Data table: varying row sizes</Caption>\n\n### Basics\n\nThe basic table style is the required base from which tables can be developed. Basic tables are composed of a header row followed by rows of data below. At a minimum, tables require three or more columns.\n\nColumn widths can vary by content and only requires a minimum spacing between columns.\n\n| Class                                                                      | Property                    | px / rem | Spacing token |\n| -------------------------------------------------------------------------- | --------------------------- | -------- | ------------- |\n| `.bx--data-table-header`                                                   | margin-bottom               | 16 / 1   | `$spacing-05` |\n| `.bx--table-sort-v2__icon`                                                 | padding                     | 8 / 0.5  | `$spacing-03` |\n| `.bx--data-table td:first-of-type` <br/> `.bx--data-table td:last-of-type` | padding-left, padding-right | 16 / 1   | `$spacing-05` |\n\n### Enhancements\n\nAfter the simple table structure, tables can be enhanced by adding any of the following: selectable rows, expanding rows, nested tables, row menus, table batch actions, overall table menu, and/or table filter.\n\n| Class                       | Property      | px / rem  | Spacing token |\n| --------------------------- | ------------- | --------- | ------------- |\n| `.bx--table-toolbar`        | height        | 48 / 3    | –             |\n| `.bx--table-toolbar--small` | height        | 32 / 2    | –             |\n| `.bx--table-expand-v2__svg` | height        | 16 / 1    | –             |\n| `.bx--checkbox-appearance`  | height, width | 20 / 1.25 | –             |\n\n_Structure and spacing measurements for a basic and an enhanced data table | px / rem_\n\n### Recommended\n\n| Spacing between | Property | px / rem | Spacing token |\n| --------------- | -------- | -------- | ------------- |\n| Columns         | padding  | 16 /1    | `$spacing-05` |\n\n### Toolbar\n\n| Class                        | Property                  | px/rem  | Spacing token |\n| ---------------------------- | ------------------------- | ------- | ------------- |\n| `.bx--toolbar-action`        | height, width             | 48 / 3  | –             |\n| `.bx--toolbar`               | margin-top, margin-bottom | 16 / 1  | `$spacing-05` |\n| `.bx--toolbar-action--small` | height, width             | 32 / 2  | –             |\n| `.bx--toolbar--small`        | margin-top, margin-bottom | 8 / 0.5 | `$spacing-03` |\n\n_Structure and spacing measurements for toolbar icons | px / rem_\n","fileAbsolutePath":"/zeit/3ed0734e/src/pages/components/data-table/style.mdx"}}}}