UNPKG

carbon-components

Version:

Carbon Components is a component library for IBM Cloud

carbondesignsystem.com

IBM/carbon-components

61 lines (50 loc) • 7.43 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
### SCSS #### Modifiers Modifier classes for Data Tables are used with various classes. | Selector | Description | | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `bx--responsive-table--tall` | Makes tables taller. Specifically, rendered height of a table row will be `44px` (by default, table rows are `32px` without this modifier). Apply this class to `div.bx--responsive-tabler-container` element | | `bx--parent-row--even` | The class for even parent rows | | `bx--expandable-row` | The class for expandable rows | | `bx--expandable-row--even` | The class for even expandable rows | | `bx--expandable-row--hidden` | The class for hidden expandable rows | | `bx--table-sort--ascending` | The class modifier for sorting columns in ascending order | ### JavaScript #### Public Methods | Name | Params | Description | | ------------- | ------ | ---------------------------------------------------------------------------- | | `release` | | Deletes the instance and removes document event listeners | | `refreshRows` | | When adding in new table rows, use this method to correctly re-apply stripes | #### Options | Option | Default Selector | Description | | -------------------------- | ---------------------------------------- | ----------------------------------------------------------------------------------- | | `selectorInit` | `[data-responsive-table]` | The selector to find instances of the component | | `selectorExpandCells` | `.bx--table-expand` | The selector to find expanded cells | | `selectorExpandableRows` | `.bx--expandable-row` | The selector to find expandable rows | | `selectorParentRows` | `.bx--parent-row` | The selector to find parent rows | | `selectorTableBody` | `.bx--table-body` | The selector to find table body | | `selectorCheckbox` | `.bx--checkbox` | The selector to find checkboxes | | `classParentRowEven` | `bx--parent-row--even` | The class for even parent rows | | `classExpandableRow` | `bx--expandable-row` | The class for expandable rows | | `classExpandableRowEven` | `bx--expandable-row--even` | The class for even expandable rows | | `classExpandableRowHidden` | `bx--expandable-row--hidden` | The class for hidden expandable rows | | `classTableSortAscending` | `bx--table-sort--ascending` | The class modifier for sorting columns in ascending order | | `eventBeforeExpand` | `responsive-table-beforetoggleexpand` | Event triggered before expanding a table row | | `eventAfterExpand` | `responsive-table-aftertoggleexpand` | Event triggered after expanding a table row | | `eventBeforeSort` | `responsive-table-beforetogglesort` | Event triggered before toggling a sort action | | `eventAfterSort` | `responsive-table-aftertogglesort` | Event triggered after toggling a sort action | | `eventBeforeSelectAll` | `responsive-table-beforetoggleselectall` | Event triggered before selecting all rows with checkbox | | `eventAfterSelectAll` | `responsive-table-aftertoggleselectall` | Event triggered after selecting all rows with checkbox | | `eventTrigger` | `[data-event]` | Used for listing describing the event type on HTML (`expand`, `sort`, `select-all`) | | `eventParentContainer` | `[data-parent-row]` | Indicates the parent row of an event target | #### Events | Option | Default Selector | Description | | ---------------------- | ---------------------------------------- | ----------------------------------------------------------------------------------- | | `eventBeforeExpand` | `responsive-table-beforetoggleexpand` | Event triggered before expanding a table row | | `eventAfterExpand` | `responsive-table-aftertoggleexpand` | Event triggered after expanding a table row | | `eventBeforeSort` | `responsive-table-beforetogglesort` | Event triggered before toggling a sort action | | `eventAfterSort` | `responsive-table-aftertogglesort` | Event triggered after toggling a sort action | | `eventBeforeSelectAll` | `responsive-table-beforetoggleselectall` | Event triggered before selecting all rows with checkbox | | `eventAfterSelectAll` | `responsive-table-aftertoggleselectall` | Event triggered after selecting all rows with checkbox | | `eventTrigger` | `[data-event]` | Used for listing describing the event type on HTML (`expand`, `sort`, `select-all`) | | `eventParentContainer` | `[data-parent-row]` | Indicates the parent row of an event target |