MultiSelect Filter as/in column header

[ruhrpotter]

Hi all,

my current logic to filter the table with the MultiSelect component, that are outside the table, is working fine. But I would like to put the dropdown filter into the column header itself. Like in Excel for example. I found an example (don't ask me how), which seems to be for react:

https://deploy-preview-1526--carbon-addons-iot-react.netlify.app/?path=/story/watson-iot-table--stateful-example-with-multiselect-filtering

Can we do something similar in the svelte version?

Thanks!

[metonym]

Try using the DataTable cellHeader slot with columnMenu: true on the header to render a MultiSelect (or Dropdown) filter directly in the column header. The cellHeader slot receives { header } and lets you customize the header content per column. Subsequently, you can filter the rows in your script based on selectedStatuses before passing to DataTable.

<script>
  import { DataTable, MultiSelect } from 'carbon-components-svelte';

  const headers = [
    { key: 'name', value: 'Name' },
    { key: 'status', value: 'Status', columnMenu: true },
  ];

  const rows = [
    { id: 1, name: 'Item 1', status: 'Active' },
    { id: 2, name: 'Item 2', status: 'Inactive' },
  ];

  let selectedStatuses = [];
  const statusOptions = [
    { id: 'active', text: 'Active' },
    { id: 'inactive', text: 'Inactive' },
  ];
</script>

<DataTable {headers} {rows}>
  <svelte:fragment slot="cellHeader" let:header>
    {#if header.columnMenu && header.key === 'status'}
      <MultiSelect
        labelText="Filter"
        hideLabel
        items={statusOptions}
        bind:selectedIds={selectedStatuses}
        size="sm"
      />
    {:else}
      {header.value}
    {/if}
  </svelte:fragment>
</DataTable>