Tzezar's Datagrid

Beta

Installation

As of today, datagrid uses components offered by shadcn-svelte. In the future there will be a native and headless version. So, I assume you have shadcn-svelte installed. If not here is how to do it. You do not need to install all components, only dropdown menu, select, button and optionally context menu, popover are used.

Automatic installation

To easily install datagrid:

Run the CLI

npx tzezars-datagrid init

You will be asked a few questions to configure installation

1 Where do you want to install the component? ... ./src/lib/components/datagrid
2 Where is your global CSS file? ... ./src/app.css
3 Where is your tailwind.config.[cjs|js|ts] located? ... ./tailwind.config.ts
4 Do you want to install dependencies? ... yes

Thats it!

Manual installation

Copy code of datagrid from a github repository into your project /todo: update link/

Update tailwind.config.ts

colors: {
	table: {
		primary: {
			DEFAULT: "hsl(var(--table-primary) / <alpha-value>)",
			hover: "hsl(var(--table-primary-hover) / <alpha-value>)"
		},
		secondary: {
			DEFAULT: "hsl(var(--table-secondary) / <alpha-value>)",
			hover: "hsl(var(--table-secondary-hover) / <alpha-value>)"
		},
		row: {
			even: {
				DEFAULT: "hsl(var(--table-row-even) / <alpha-value>)",
				hover: "hsl(var(--table-row-even-hover) / <alpha-value>)"
			},
			odd: {
				DEFAULT: "hsl(var(--table-row-odd) / <alpha-value>)",
				hover: "hsl(var(--table-row-odd-hover) / <alpha-value>)"
			}
		}
	},
// ...rest
}

Update app.css

@layer base {
	:root {
		--table-primary: 0 0% 98%;
		--table-primary-hover: 0 0% 92%;
		--table-secondary: 0 0% 96%;
		--table-secondary-hover: 0 0% 92%;

		--table-row-odd: 0 0% 99%;
		--table-row-odd-hover: 0 0% 86%;
		--table-row-even: 0 0% 95%;
		--table-row-even-hover: 0 0% 89%;
		/* ...rest */
	}

	.dark {
		--table-primary: 0 0% 9%;
		--table-primary-hover: 0 0% 5%;
		--table-secondary: 0 0% 10%;
		--table-secondary-hover: 0 0% 5%;

		--table-row-odd: 0 0% 9%;
		--table-row-odd-hover: 0 0% 5%;
		--table-row-even: 0 0% 10%;
		--table-row-even-hover: 0 0% 5%;
		/* ...rest */
	}
}

fast-sort (850bytes) is used for sorting, it provides sorting algorithms that are used to provide the best user experience with faster sorting

npm i fast-sort

Exporting data uses the following libraries, this is an optional feature, you can also install your replacements

npm i papaparse
npm i xlsx
npm i fast-xml-parser