Table Summary

<sl-table-summary> | SlTableSummary
Since 1.0 stable

A simple summary grouped table

<sl-table-summary>
  <sl-icon id="greenTick" name="check" style="color: green;"></sl-icon>
  <sl-icon id="redTick" name="check" style="color: red;"></sl-icon>
</sl-table-summary>

<script>
  (() => {
    const data = {
      Growth: [
        { AssetClass: 'Australian equities', value: 860611.01, percent: 28.101 },
        { AssetClass: 'Global equities', value: 1458989, percent: 47.7 },
        { AssetClass: 'Listed property', value: 271794, percent: 1.7 },
        { AssetClass: 'Global listed property', value: 271794, percent: 1.7 },
        { AssetClass: 'Direct property', value: 271794, percent: 1.7 },
        { AssetClass: 'Other', value: 215450, percent: 4.1 },
      ],
      Defensive: [
        { AssetClass: 'Fixed interest', value: 167422.1, percent: 5.5 },
        { AssetClass: 'Global fixed interest', value: 51334, percent: 1.7 },
        { AssetClass: 'Cash', value: 123130, percent: 4 },
      ],
      Other: [
        { AssetClass: 'Other', value: 294818, percent: 9.62 },
      ],
    };
    const columns = [
      { key: 'AssetClass', sum: false, alignRight: false, format: (value) => value },
      { key: 'value', sum: true, alignRight: true, format: (value) => value.toLocaleString('en-AU', { style: 'currency', currency: 'AUD', maximumFractionDigits: 0 }) },
      { key: 'percent', sum: true, alignRight: true, format: (value) => value.toFixed(1) + '%', slotId: (d) => d.value % 2 ? 'greenTick' : 'redTick' },
    ];
    const table = document.querySelector('sl-table-summary');
    table.data = data;
    table.columns = columns;
  })();
</script>

Examples

Fixed Layout

Use fixed-layout to make table fixed layout.

<sl-table-summary id="fixed" fixed-layout>
  <sl-icon id="greenTick" name="check" style="color: green;"></sl-icon>
  <sl-icon id="redTick" name="check" style="color: red;"></sl-icon>
</sl-table-summary>

<script>
  (() => {
    const data = {
      Growth: [
        { AssetClass: 'Australian equities', value: 860611.01, percent: 28.101 },
        { AssetClass: 'Global equities', value: 1458989, percent: 47.7 },
        { AssetClass: 'Listed property', value: 271794, percent: 1.7 },
        { AssetClass: 'Global listed property', value: 271794, percent: 1.7 },
        { AssetClass: 'Direct property', value: 271794, percent: 1.7 },
        { AssetClass: 'Other', value: 215450, percent: 4.1 },
      ],
      Defensive: [
        { AssetClass: 'Fixed interest', value: 167422.1, percent: 5.5 },
        { AssetClass: 'Global fixed interest', value: 51334, percent: 1.7 },
        { AssetClass: 'Cash', value: 123130, percent: 4 },
      ],
      Other: [
        { AssetClass: 'Other', value: 294818, percent: 9.62 },
      ],
    };
    const columns = [
      { key: 'AssetClass', sum: false, alignRight: false, format: (value) => value },
      { key: 'value', sum: true, alignRight: true, format: (value) => value.toLocaleString('en-AU', { style: 'currency', currency: 'AUD', maximumFractionDigits: 0 }) },
      { key: 'percent', sum: true, alignRight: true, format: (value) => value.toFixed(1) + '%', slotId: (d) => d.value % 2 ? 'greenTick' : 'redTick' },
    ];
    const table = document.querySelector('#fixed');
    table.data = data;
    table.columns = columns;
  })();
</script>

Show Headers and Net total

Use show-column-headers, show-net-total to show headers and net total.

<sl-table-summary id="example3" show-column-headers show-net-total>
  <sl-icon id="greenTick" name="check" style="color: green;"></sl-icon>
  <sl-icon id="redTick" name="check" style="color: red;"></sl-icon>
</sl-table-summary>

<script>
  (() => {
    const data = {
      Growth: [
        { AssetClass: 'Australian equities', value: 860611.01, percent: 28.101 },
        { AssetClass: 'Global equities', value: 1458989, percent: 47.7 },
        { AssetClass: 'Listed property', value: 271794, percent: 1.7 },
        { AssetClass: 'Global listed property', value: 271794, percent: 1.7 },
        { AssetClass: 'Direct property', value: 271794, percent: 1.7 },
        { AssetClass: 'Other', value: 215450, percent: 4.1 },
      ],
      Defensive: [
        { AssetClass: 'Fixed interest', value: 167422.1, percent: 5.5 },
        { AssetClass: 'Global fixed interest', value: 51334, percent: 1.7 },
        { AssetClass: 'Cash', value: 123130, percent: 4 },
      ],
      Other: [
        { AssetClass: 'Other', value: 294818, percent: 9.62 },
      ],
    };
    const columns = [
      { key: 'AssetClass', label: 'Asset Class', sum: false, alignRight: false, format: (value) => value },
      { key: 'value', label: 'Value', sum: true, alignRight: true, format: (value) => value.toLocaleString('en-AU', { style: 'currency', currency: 'AUD', maximumFractionDigits: 0 }) },
      { key: 'percent', label: 'Percent', sum: true, alignRight: true, format: (value) => value.toFixed(1) + '%', slotId: (d) => d.value % 2 ? 'greenTick' : 'redTick' },
    ];
    const table = document.querySelector('#example3');
    table.data = data;
    table.columns = columns;
  })();
</script>

Edit cell

Use --master-cell-font-size, --master-cell-description-font-size, --master-cell-padding, --master-cell-border-width to modify cell’s --font-size, --description-font-size, --cell-padding, --border-width respectively. 

<sl-table-summary class="base-font" id="example4" show-column-headers show-net-total>
  <sl-icon id="greenTick" name="check" style="color: green;"></sl-icon>
  <sl-icon id="redTick" name="check" style="color: red;"></sl-icon>
</sl-table-summary>

<style>
  .base-font {
      --master-cell-font-size: 10px;
      --master-cell-description-font-size: 8px;
      --master-cell-padding: 0px;
  }
  </style>

<script>
  (() => {
    const data = {
      Growth: [
        { AssetClass: 'Australian equities', value: 860611.01, percent: 28.101 },
        { AssetClass: 'Global equities', value: 1458989, percent: 47.7 },
        { AssetClass: 'Listed property', value: 271794, percent: 1.7 },
        { AssetClass: 'Global listed property', value: 271794, percent: 1.7 },
        { AssetClass: 'Direct property', value: 271794, percent: 1.7 },
        { AssetClass: 'Other', value: 215450, percent: 4.1 },
      ],
      Defensive: [
        { AssetClass: 'Fixed interest', value: 167422.1, percent: 5.5 },
        { AssetClass: 'Global fixed interest', value: 51334, percent: 1.7 },
        { AssetClass: 'Cash', value: 123130, percent: 4 },
      ],
      Other: [
        { AssetClass: 'Other', value: 294818, percent: 9.62 },
      ],
    };
    const columns = [
      { key: 'AssetClass', label: 'Asset Class', sum: false, alignRight: false, format: (value) => value },
      { key: 'value', label: 'Value', sum: true, alignRight: true, format: (value) => value.toLocaleString('en-AU', { style: 'currency', currency: 'AUD', maximumFractionDigits: 0 }) },
      { key: 'percent', label: 'Percent', sum: true, alignRight: true, format: (value) => value.toFixed(1) + '%', slotId: (d) => d.value % 2 ? 'greenTick' : 'redTick' },
    ];
    const table = document.querySelector('#example4');
    table.data = data;
    table.columns = columns;
  })();
</script>

[component-metadata:sl-table-summary]

Slots

Name Description
default The default slot for cell content.

Learn more about using slots.

Properties

Name Description Reflects Type Default
showColumnHeaders
show-column-headers 		Whether to show column headers boolean false
subtleRows
subtle-rows 		Array of subtle rows number[] []
emptyStateText
empty-state-text 		Text to show when there is no data string 'No data'
showNetTotal
show-net-total 		Whether to show net total boolean false
netTotalLabel
net-total-label 		Net total label string 'Net Total'
fixedLayout
fixed-layout 		Whether to use fixed layout boolean false
groupSelectable
group-selectable 		Whether to allow group selection boolean false
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
select Emitted when the table cell is clicked. -

Learn more about events.

Parts

Name Description
base The component’s base wrapper.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

  • <sl-empty-state>
  • <sl-icon>
  • <sl-master-table-cell>