Table Complex component
Components discussed:
A simple HTML table can be created with this component. The table header must be implemented with the TableHeader component. The table rows must be implemented with the TableRow component.
Supported events:
Show, Hide, Animation, Scroll, Hotkey, Drag&Drop
TableHeader
This component is used with the Table component. This represents a table header row, that can have a cell.
Supported events:
Show, Hide, Animation, Click, MouseEvents, Touch, Drag&Drop
TableRow
This component is to be used with the Table component. The component represents a table row. The table row component can have table cell components added to it. Other components can also be added, which will be automatically put in a table cell component.
Supported events:
Show, Hide, Animation, Click, MouseEvents, Touch, Drag&Drop
TableCell
The component can be used with the Table , TableRow or TableHeader components. The component represents a table row. The table cell can have any JBStrap component added to it, meaning that tables can be fully customized.
Supported events:
Show, Hide, Animation, Click, MouseEvents, Scroll, Touch, Drag&Drop
Style customization
The TableHeader, TableRow and TableCells components do not have specific variables to use for style customization. However, you can use custom style classes to change the appearance of this component.
| Name | Default value | Derived value | Computed value | Comment |
|---|---|---|---|---|
| $table-cell-padding | .75rem | .75rem | ||
| $table-cell-padding-sm | .3rem | .3rem | ||
| $table-color | $body-color | #212529 | ||
| $table-bg | null | null | ||
| $table-accent-bg | rgba($black, .05) | rgba(#000, .05) | ||
| $table-hover-color | $table-color | #212529 | ||
| $table-hover-bg | rgba($black, .075) | rgba(#000, .075) | ||
| $table-active-bg | $table-hover-bg | rgba(#000, .075) | ||
| $table-border-width | $border-width | 1px | ||
| $table-border-color | $border-color | #dee2e6 | ||
| $table-head-bg | $gray-200 | #e9ecef | ||
| $table-head-color | $gray-700 | #495057 | ||
| $table-dark-color | $white | #fff | ||
| $table-dark-bg | $gray-800 | #343a40 | ||
| $table-dark-accent-bg | rgba($white, .05) | rgba(#fff, .05) | ||
| $table-dark-hover-color | $table-dark-color | #fff | ||
| $table-dark-hover-bg | rgba($white, .075) | rgba(#fff, .075) | ||
| $table-dark-border-color | lighten($table-dark-bg, 7.5%) | lighten(#343a40, 7.5%) | ||
| $table-striped-order | odd | odd | ||
| $table-caption-color | $text-muted | #6c757d | ||
| $table-bg-level | -9 | -9 | ||
| $table-border-level | -6 | -6 |