Data Table - a combination of Pagination and Sort removes the sort property from the props object

[robots4life]

Describe the bug

In a simple Data Table, when having pagination and sort enabled the the props object is missing the sort property, hence a condition to check for the sort property with the aim to show ArrowUp or ArrowDowm icons does not work.

Not using Shadcn-Svelte does not have the issue as can been see in this REPL. https://svelte.dev/repl/9b98604e674b482fa50ed1b8ab5fd1e2?version=4.2.18

Reproduction

https://github.com/robots4life/shadcn-svelte-data-table/tree/main

Logs

No response

System Info

System:
    OS: Linux 6.5 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
    Memory: 24.07 GB / 31.23 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
    npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
    pnpm: 8.14.1 - ~/.local/share/pnpm/pnpm
    bun: 1.0.4 - ~/.bun/bin/bun
  Browsers:
    Chrome: 126.0.6478.182

Severity

annoyance

[robots4life]

Solution

https://github.com/robots4life/shadcn-svelte-data-table/commit/1bdfd9fc1a5b34aa9c8e8c90e3043a3a077fda4b

https://github.com/robots4life/shadcn-svelte-data-table/blob/main/src/routes/data-table.svelte#L85-L87

// pageCount and pageSize must be included even though they are not used
// only if pageCount and pageSize are included will sort work correctly
const { hasNextPage, hasPreviousPage, pageIndex, pageCount, pageSize } = pluginStates.page;

Shadcn-Svelte Data Table Documentation

https://shadcn-svelte.com/docs/components/data-table#enable-the-addpagination-plugin

Ideally when introducing pagination to the Date Table in the docs this could be pointed out.

In the next step we are going to add sorting to the data table, for pagination and sorting to work correctly you will have to modify pluginStates.page, more about this in the next step.

const { hasNextPage, hasPreviousPage, pageIndex, pageCount, pageSize } = pluginStates.page;

https://shadcn-svelte.com/docs/components/data-table#make-header-cell-sortable

If you like to use sorting with an icon on condition of the sort order and you have pagination in place you will need to add pageCount and pageSize to pluginStates.page.

{#if props.sort.order === 'asc'}
    <ArrowUp class={'ml-2 h-4 w-4'} />
{:else}
    <ArrowDown class={'ml-2 h-4 w-4'} />
{/if}