Installation

shadcn-svelte

I assume you already have shadcn-svelte installed, if not here is a tutorial: https://www.shadcn-svelte.com/docs/installation

Component

Copy content of https://github.com/530RGE/table/tree/main/src/lib/components/table into your project.

You also need cn helper function from https://github.com/530RGE/table/blob/main/src/lib/utils.ts.

flyAndScale util is used for draggable column reordering (optional if you make custom component)

Table out of the box use those shadcn-svelte components

        npx shadcn-svelte@latest add button
        npx shadcn-svelte@latest add select
        npx shadcn-svelte@latest add checkbox
        npx shadcn-svelte@latest add pagination
        npx shadcn-svelte@latest add dropdown-menu
        npx shadcn-svelte@latest add popover
        npx shadcn-svelte@latest add sheet
        npx shadcn-svelte@latest add input
    

Draggable column reordering uses svelte-dnd-action

        npm i svelte-dnd-action
        npm i svelte-legos
    

Optional

        npm install mode-watcher
        npm i @tanstack/svelte-query
        npm i @tanstack/svelte-query-devtools
    

mode-watches is easy way to implement dark mode, and tanstack-query is good for data fetching

04/04/2024 update

I rebuilt the shadcn table to use divs (easier styling, ability to change width, no weird behaviour) and used them in the component. It made component cleaner and easier to read. You don't have to overwrite it, you can have both the official shadcn version and the one for the component built with divs. just take a look at repo folder

Code from examples

The code from the example as well as the annotations are available at GITHUB