feat(component): DataTable

[metonym]

Supported

• [x] DataTable (read-only, sortable)
• [x] DataTableSkeleton
• [x] Expandable DataTable + batch expansion
• [x] Selectable DataTable + batch selection
• [x] Radio DataTable
• [x] Table toolbar (#349 )
• [x] Toolbar action menu
• [x] Empty columns

No plans to support

• Filterable ToolbarSearch: opt-in filtering behavior where the value from Search filters the current rows supplied to the DataTable
  • IMO, any row filtering logic should be deferred to the consumer.

[hovancik]

Would nice to be able to have HTML (ie. a ) in rows

[metonym]

@hovancik This is a belated follow up but it's now possible with slotted cells (#342):

<DataTable
  headers="{[
    { key: "name", value: "Name" },
    { key: "protocol", value: "Protocol" },
    { key: "port", value: "Port" },
    { key: "rule", value: "Rule" }
  ]}"
  rows="{[
    {
      id: "a",
      name: "Load Balancer 3",
      protocol: "HTTP",
      port: 3000,
      rule: "Round robin"
    },
    {
      id: "b",
      name: "Load Balancer 1",
      protocol: "HTTP",
      port: 443,
      rule: "Round robin"
    },
    {
      id: "c",
      name: "Load Balancer 2",
      protocol: "HTTP",
      port: 80,
      rule: "DNS delegation"
    },
    {
      id: "d",
      name: "Load Balancer 6",
      protocol: "HTTP",
      port: 3000,
      rule: "Round robin"
    },
    {
      id: "e",
      name: "Load Balancer 4",
      protocol: "HTTP",
      port: 443,
      rule: "Round robin"
    },
    {
      id: "f",
      name: "Load Balancer 5",
      protocol: "HTTP",
      port: 80,
      rule: "DNS delegation"
    },
  ]}"
>
  <span slot="cell" let:row let:cell>
    {#if cell.key === 'rule' && cell.value === 'Round robin'}
      <Link inline href="https://en.wikipedia.org/wiki/Round-robin_DNS" target="_blank">{cell.value}</Link>
    {:else}
      {cell.value}
    {/if}
  </span>
</DataTable>