Table

A grouped accordian style table

<sl-table></sl-table>

<script>
  const groupBy = [{groupKey: 'group', orderKey: 'group'}, {groupKey: 'subGroup', orderKey: 'subGroup'}];
  const columns = [{key: 'id', label: 'ID', format: 'number'}, {key: 'name', label: 'Name', format: 'string'}, {key: 'age', label: 'Age', format: 'number'}, {key: 'dob', label: 'Date of Birth', format: 'date'}, {key: 'score', label: 'Score', format: 'number', toSum: true}];
  const data = [{id: 1, name: 'John', order: 1, group: 'A', subGroup: 'A', age: 20, dob: '2021-01-01', score: 80}, {id: 2, name: 'Jane', order: 2, group: 'A', subGroup: 'B', age: 25, dob: '2021-02-01', score: 85}, {id: 3, name: 'Doe', order: 3, group: 'B', subGroup: 'A', age: 30, dob: '2021-03-01', score: 90}];
  const tableEl = document.querySelector('sl-table');
  tableEl.groupBy = groupBy;
  tableEl.columns = columns;
  tableEl.data = data;
</script>

Properties

Data

An array of objects of arbitrary type with the data used to populate the table. eg. [{id: 1, name: ‘John’, order: 1, group: ‘A’, subGroup: ‘A’, age: 20, dob: ’2021–01–01′, score: 80}, {id: 2, name: ‘Jane’, order: 2, group: ‘A’, subGroup: ‘B’, age: 25, dob: ‘2021–02–01’, score: 85}, {id: 3, name: ‘Doe’, order: 3, group: ‘B’, subGroup: ‘A’, age: 30, dob: ‘2021–03–01’, score: 90}]

Group By

An array of objects with the information to group the data by

Properties

groupKey

The key of the data object used to group the data by

orderKey

The key of the data object used to order the groups by

defaultGroup

The default group value if the key value is empty or null

defaultOrder

The default order value if the key value is empty of null

Example

[{groupKey: ‘group’, orderKey: ‘group’, defaultGroup: ‘No Group’, defaultOrder: 0}, {groupKey: ‘subGroup’, orderKey: ‘subGroup’, defaultGroup: ‘No Sub Group’, defaultOrder: 0}]

Columns

An array of objects with the information to display the columns of the table. Note that the order of the objects denotes the order of the columns.

Properties

key

The key of the data object used to display the column

label

The label of the column header

visible

Whether to display the column

format

The display format type of the values in the column (string, date, price, quantity, amount, percent)

toSum

Whether to sum the column to display a total

alignRight

Whether to align the column to the right

defaultValue

The default value of the column if the key value is empty or null

Example

[{key: ‘id’, label: ‘ID’, visible: false, format: ‘string’, toSum: false, alignRight: false, defaultValue: ‘N/A’}, {key: ‘name’, label: ‘Name’, visible: true, format: ‘string’, toSum: false, alignRight: false, defaultValue: ‘N/A’}, {key: ‘age’, label: ‘Age’, visible: true, format: ‘string’, toSum: false, alignRight: true, defaultValue: ‘N/A’}, {key: ‘dob’, label: ‘Date of Birth’, visible: true, format: ‘date’, toSum: false, alignRight: true, defaultValue: ‘N/A’}, {key: ‘score’, label: ‘Score’, visible: true, format: ‘amount’, toSum: true, alignRight: true, defaultValue: ‘N/A’}]

Item group key

The key of the data object used to aggregate items in-place (Grouping items into an item)

Sort by

The key of the data object used to sort the items in each group.

Sort ascending

Whether to sort the items in each group in ascending order

Accuracy level

The level of accuracy to use when rounding numbers for different format types. Possible values: (very-low, low, medium, high, very-high) Mapping of number of decimal places for format type and accuracy level:

Total label

The label of the grand total row

Empty state

The label of the empty state

[component-metadata:sl-table]

Custom Properties

Learn more about customizing CSS custom properties.

Parts

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

• <sl-empty-state>
• <sl-example>
• <sl-icon>
• <sl-table-cell>
• <sl-table-header-cell>