UNPKG

carbon-components

Version:

Carbon Components is a component library for IBM Cloud

carbondesignsystem.com

carbon-design-system/carbon-components

79 lines (60 loc) • 5.4 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
### SCSS The update to tables splits out the `scss` files into multiple partial files with specific functionality, with a main index file bringing them together. #### Files | Name | Description | |--------------------------|------------------------------------------| | data-tables | index file, brings in all functionality | | data-table-v2-core | Core styles and base modifiers, required | | data-table-v2-action | Action bar styles | | data-table-v2-expandable | Expandable row styles | | data-table-v2-sort | Sortable header styles | #### Modifiers | Name | Description | |------------------------------|----------------------------------------------| | bx--data-table-v2--compact | Change table row height to 24 | | bx--data-table-v2--short | Change table row height to 32 | | bx--data-table-v2--tall | Change table row height to 64 | | bx--data-table-v2--zebra | Toggle on zebra striping | | bx--data-table-v2--static | Change default table width from 100% to auto | | bx--data-table-v2--no-border | Remove default border on table cells | ### JavaScript #### Public Methods | Name | Params | Descriptions | |-------------|--------|-------------------------------------------------------------------------------------------------------------------| | release | | Deletes the instance and removes document event listeners | | refreshRows | | When adding in new table rows, reinitialize parent-child relationships. Not required if not using expandable rows | #### Events | Key | Value | Description | |--------------------------|----------------------------------|--------------------------------------------| | eventBeforeExpand | data-table-v2-beforetoggleexpand | Row expansion event | | eventAfterExpand | data-table-v2-aftertoggleexpand | Row expansion event | | eventBeforeSort | data-table-v2-beforetogglesort | Sort event | | eventAfterSort | data-table-v2-aftertogglesort | Sort event | | eventTrigger | [data-event] | Data attribute for clickable events | | eventParentContainer | [data-parent-row] | Data attribute for event container | #### Options | Key | Value | Description | |--------------------------|----------------------------------|--------------------------------------------| | selectorInit | [data-table-v2] | Required css class to target table element | | selectorToolbar | .bx--table--toolbar | Toolbar parent selector | | selectorActions | .bx--batch-actions | Action bar parent selector | | selectorCount | [data-items-selected] | Selected count span selector | | selectorActionCancel | .bx--batch-summary__cancel | Action cancel button selector | | selectorCheckbox | .bx--checkbox | Checkbox class selector | | selectorExpandCells | .bx--table-expand-v2 | Expand td selector | | selectorExpandableRows | .bx--expandable-row-v2 | Expand tr selector | | selectorParentRows | .bx--parent-row-v2 | Parent row selector | | selectorChildRow | [data-child-row] | Child row selector | | selectorTableBody | tbody | Generic tbody selector | | classExpandableRow | bx--expandable-row-v2 | Expandable Row parent class | | classExpandableRowHidden | bx--expandable-row--hidden-v2 | Initial hidden class | | classExpandableRowHover | bx--expandable-row--hover-v2 | Hover styles class | | classTableSortAscending | bx--table-sort-v2--ascending | Ascending sort icon class | | classTableSortActive | bx--table-sort-v2--active | Active sort icon class | ### FAQ **How do I sort the tables** The table component does not sort the table for you, rather it emits an event and toggles the sort UI. It is up to the user to re-render the table rows sorted; you can see this in action `here`. **How do I use the expandable rows** If you would like to programmatically expand table rows, you can add the `bx--expandable-row-v2` to the `selectorParentRows` elements. **How do I activate the batch actions pane** If you would like to programmatically activate the batch actions pane, you can add `bx--batch-actions--active` to the `bx--batch-actions` element.