Responsive Table Examples?

[rgfx]

I noticed there was a grid plugin, but didn't see any examples of how that works.

[bryanmylee]

Sorry about that, I've added an example in the docs!

https://svelte-headless-table.bryanmylee.com/docs/plugins/add-grid-layout

The plugin simply swaps out display: table for display: grid, and provides the correct styles to layout the cells properly.

[rgfx]

Correct, this one the main ways to make a table responsive. You can see how its done here. https://codepen.io/geoffyuen/pen/DZxEKy. I wonder if this will make column sorting useless.

[bryanmylee]

Ah okay, that's the first time I've seen this.

We can definitely support something similar with a plugin to set display: contents on the thead and tbody elements, then add the data attributes accordingly.

[secretgspot]

to pile on this discussion.

I've got access to cell.id which does populate data-title with key of the field. Is it possible to grab the value of (header) instead that is being constructed inside table.createColumns() and put it in?

[bryanmylee]

@secretgspot The header property can be retrieved with cell.column.header. If you're using simple string headers, then there should be no issue there.

<script>
const table = createTable();
const columns = table.createColumns([
  table.column({
    header: 'First Name', // string returned to `cell.column.header`
    accessor: 'firstName',
  }),
  table.column({
    header: createRender(HeaderCell, {...}), // config returned to `cell.column.header`
    accessor: 'lastName',
  }),
  ...
]);
...
</script>

...
{#each row.cells as cell (cell.id)}
  <Subscribe attrs={cell.attrs()} let:attrs>
    <td {...attrs} data-th={cell.column.header}>
    </td>
  </Subscribe>
{/each}

[rgfx]

@bryanmylee Thanks this what I was looking for .