| 1 | ## Data Table
|
| 2 |
|
| 3 | ### HTML
|
| 4 |
|
| 5 | Aside from using new icons from the
|
| 6 | [`carbon-elements`](https://github.com/IBM/carbon-elements) package, there are
|
| 7 | several structural changes and new selectors in the Data Table component. Please
|
| 8 | see the new structure below and reference the
|
| 9 | [data table page](https://next.carbondesignsystem.com/components/data-table/code)
|
| 10 | in our site to copy the specified new markup.
|
| 11 |
|
| 12 | React and other framework variants should reflect the changes automatically.
|
| 13 |
|
| 14 | **Things to note**:
|
| 15 |
|
| 16 | - All `-v2`'s in selectors have been removed
|
| 17 | - All SVG icons have changed to new icons.
|
| 18 | - Structural changes and new selectors in the table title. See structure below
|
| 19 | and SCSS section for more details.
|
| 20 | - Structural changes and new selectors in the table toolbar. See structure below
|
| 21 | and SCSS section for more details.
|
| 22 | - Toolbar overflow menu now uses the overflow menu component `<ul>` markup
|
| 23 | instead of just `button.bx--batch-actions`
|
| 24 | - `bx—search` container in toolbar no longer has the `bx--search—light` class
|
| 25 | - Batch action buttons no longer have `bx--btn—ghost` class
|
| 26 | - New markup/selector involving expandable features includes a
|
| 27 | `div.bx--child-row-inner-container` as a wrapper for content within the child
|
| 28 | row `td`.
|
| 29 | - New markup/selectors involving sortable features include an additional icon
|
| 30 | `bx--table-sort__icon-unsorted` for non-sorted state, and a new class for
|
| 31 | sortable data table `bx--data-table—-sort`.
|
| 32 | - New selectors `bx—table-column-checkbox` and `bx—table-column-menu` for
|
| 33 | checkbox and overflow menu `td`'s and `th`'s.
|
| 34 | - New selector for `li` within a row overflow menu `bx--table-row--menu-option`.
|
| 35 | See SCSS section for more details.
|
| 36 |
|
| 37 | **New Structure**:
|
| 38 |
|
| 39 | ```bash
|
| 40 | bx--data-table-container
|
| 41 | ├── bx--data-table-header
|
| 42 | │ ├── bx--data-table-header__title
|
| 43 | │ └── bx--data-table-header__description
|
| 44 | ├── bx--table-toolbar
|
| 45 | │ ├── bx--batch-actions
|
| 46 | │ │ ├── bx--batch-action-list
|
| 47 | │ │ └── bx--batch-summary
|
| 48 | │ │ └── bx--batch-summary__para
|
| 49 | │ └── bx--toolbar-content
|
| 50 | │ ├── bx--toolbar-search-container-expandable (bx--toolbar-search-container-persistent)
|
| 51 | │ ├── bx--overflow-menu bx--toolbar-action
|
| 52 | │ └── bx--btn--primary
|
| 53 | └── bx--data-table
|
| 54 | ├── thead
|
| 55 | └── tbody
|
| 56 | pagination
|
| 57 | ```
|
| 58 |
|
| 59 | ### Selectors
|
| 60 |
|
| 61 | | Category | v9 | v10 | Notes |
|
| 62 | | --------------------------- | -------------------------------- | ----------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
|
| 63 | | **Table container** | `.bx--data-table-v2-container` | `.bx--data-table-container` | :eyes: Changed |
|
| 64 | | **Table header** | `.bx--data-table-v2-header` | `.bx--data-table-header` | :eyes: Changed; Also, now a container class on a `div` instead of an `h4` |
|
| 65 | | | - | `.bx--data-table-header__title` | :sparkles: New |
|
| 66 | | | - | `.bx--data-table-header__description` | :sparkles: New |
|
| 67 | | **Toolbar** | `bx--toolbar-search-container` | `bx--toolbar-search-container-expandable` | :sparkles: New; Default is expandable search |
|
| 68 | | | - | `bx--toolbar-search-container-persistent` | :sparkles: New; Optional persistent search |
|
| 69 | | **Data Table** | `.bx--data-table-v2--no-border` | - | :skull: Removed |
|
| 70 | | | `.bx--data-table-v2--static` | `.bx--data-table--static` | :eyes: Changed |
|
| 71 | | | `.bx--data-table-v2--selected` | `.bx--data-table--selected` | :eyes: Changed |
|
| 72 | | | `.bx--data-table-v2--zebra` | `.bx--data-table--zebra` | :eyes: Changed |
|
| 73 | | | - | `.bx--data-table—-sort` | :sparkles: New |
|
| 74 | | | `.bx--data-table-v2—-small` | `.bx--data-table—-small` | :eyes: Changed |
|
| 75 | | | `.bx--data-table-v2—-compact` | `.bx--data-table—-compact` | :eyes: Changed |
|
| 76 | | | `.bx--data-table-v2—-tall` | `.bx--data-table—-tall` | :eyes: Changed |
|
| 77 | | | `.bx--data-table-v2--compact` | `.bx--data-table--compact` | :eyes: Changed |
|
| 78 | | | `.bx--data-table-v2--short` | `.bx--data-table--short` | :eyes: Changed |
|
| 79 | | | `.bx--data-table-v2--tall` | `.bx--data-table--tall` | :eyes: Changed |
|
| 80 | | **Table Rows** | `.bx--parent-row-v2` | `.bx--parent-row` | :eyes: Changed |
|
| 81 | | | `.bx--expandable-row-v2` | `.bx--expandable-row` | :eyes: Changed |
|
| 82 | | | `.bx--expandable-row--hidden-v2` | `.bx--expandable-row--hidden` | :eyes: Changed |
|
| 83 | | | `.bx--expandable-row--hover-v2` | `.bx--expandable-row--hover` | :eyes: Changed |
|
| 84 | | **Table Columns** | - | `.bx—table-column-checkbox` | :sparkles: New; Used in `th`'s and `td`'s with checkbox. |
|
| 85 | | | - | `.bx—table-column-menu` | :sparkles: New; Used in `td`'s with overflow menu |
|
| 86 | | | `.bx—table-expand-v2` | `.bx—table-expand` | :eyes: Changed |
|
| 87 | | | - | `.bx--child-row-inner-container` | :sparkles: New; Container inside expand child row `td`, allows for motion animation |
|
| 88 | | **Buttons, Icons and more** | `bx--table-sort-v2` | `bx--table-sort` | :eyes: Changed |
|
| 89 | | | `bx--table-sort-v2__icon` | `bx--table-sort__icon` | :eyes: Changed |
|
| 90 | | | - | `.bx--table-sort__icon-unsorted` | :sparkles: New |
|
| 91 | | | `bx--table-expand-v2__button` | `bx--table-expand__button` | :eyes: Changed |
|
| 92 | | | `bx--table-expand-v2__svg` | `bx--table-expand__svg` | :eyes: Changed |
|
| 93 | | | - | `bx--table-row--menu-option` | :sparkles: New; Addional class added to `li.bx--overflow-menu-options__option` in table row overflow menus |
|