Table Summary

<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>