ExmgGrid()

Styling

The following custom properties and mixins are available for styling:

Custom property Description Default
--exmg-arrow-upward-url Url to icon that is used for soring direction indicator url('/assets/arrow-upward.svg');
--exmg-table-card-width table card width 100%;
--exmg-table-card-margin-bottom table bottom margin 5px;
--exmg-table-color table text color #02182b;
--exmg-table-background-color table background color #ffffff;
--exmg-table-box-shadow table box shadow #{0px 1px 5px 0px rgba($onSurface, .2), 0px 2px 2px 0px rgba($onSurface, .14), 0px 3px 1px -2px rgba($onSurface, .12)},
--exmg-table-row-divider-color table rows separator color #dbdbdb;
--exmg-table-row-selected-color selected row text color #02182b;
--exmg-table-row-selected-background-color selected row background color #e2f1fe;
--exmg-table-row-hover-color row hover text color #02182b;
--exmg-table-row-hover-background-color row hover background color #f1f1f1;
--exmg-table-row-dragged-background-color sortable row background color when dragged #f1f1f1;
--exmg-table-rows-expanded-divider-border border between row and expanded row detail none;
--exmg-table-rows-expanded-border border around row and expanded row detail 1px solid #dbdbdb;
--exmg-table-rows-expanded-background-color background color of row and expanded row detail #e2f1fe;
--exmg-table-rows-expanded-color text color of row and expanded row detail #02182b;
--exmg-table-th-color header text color #0071dc;
--exmg-table-columns-background-color header background color #ffffff;
--exmg-table-th-sortable-hover-color sortable header hover text color #02182b;
--exmg-table-th-height header height 48px;
--exmg-table-th-sort-margin-left header margin after text but before icon 0px;
--exmg-table-td-height row cell height 48px;
--exmg-table-th-sort-icon-height sort icon height 1em;
--exmg-table-th-sort-icon-width sort icon width 1em;
--exmg-table-col-number-padding-right right padding of number column 10px;
--exmg-table-checkbox-cell-width width of cell with checkbox 24px;

Members

disableRowClickSelection

By default a ros is also selactable by clicking anywhere inside the row when the rowSElectable option is enabled

expandedRowIds

Map of row id and expandable row state Useful for setup default expanded rows or manipulating programmatically

hiddenColumnNames

Map of column names that should be hidden

items

Array of data which mapped to rows

rowsSelectable

Feature that allow select rows

rowsSortable

Feature that allow sort rows If table has turn on feature selectable then it takes precedence and rowSelectable will be ignored

selectedRowIds

Map of row id and selection state Useful for setup default selection or manipulating programmatically

sortable

Feature that turn on sort by column

tableLayout

Set table layout. If fixed then text overflow will be hidden and ellipsis added.