0.0.7 • Published 11 months ago
@mediakular/svelte-data-grid v0.0.7
@mediakular/svelte-data-grid
Svelte Data Grid Table 📊
@mediakular/svelte-data-grid
is a powerful data grid package tailored for Sveltekit applications. It offers an array of features to elevate the presentation and interaction with tabular data.
Demo
Coming soon
Exciting Features ✨
- Paging: Navigate through large datasets effortlessly.
- Sorting: Arrange data in ascending or descending order with ease.
- Custom Filtering: Tailor data views to your specific needs.
- Grouping: Organize related data into logical groups.
- Row Selection: Select and manipulate individual or multiple rows.
- Customizable Output: Personalize grid appearance to match your style guide.
- Tailwind CSS ready: Completely compatible with tailwind CSS.
Installation
npm install @mediakular/svelte-data-grid
or
yarn add @mediakular/svelte-data-grid
Usage
Most basic usage:
import { Grid, GridColumn } from '@mediakular/svelte-data-grid';
// Define your data and columns
let clients = getClientsFromDb();
let columns = [...];
<Grid
bind:data={clients}
bind:columns={columns}>
</Grid>
Example With Column Definition
Here a more advanced usage with column definition.
interface Client {
id: string;
firstname: string;
lastname: string;
avatar: string;
email: string;
age: number;
birthdate: Date;
amount: number;
quantity: number;
}
let clients: Client[] = getClientsFromDb();
let columns: GridColumn<Client>[] = [
{
key: 'name',
title: 'Name',
accessor: (row: Client) => {
return {
avatar: row.avatar,
firstname: row.firstname,
lastname: row.lastname,
email: row.email
}
},
sortValue: (row: Client) => {
return `${row.firstname} ${row.lastname}`
},
renderComponent: ClientCell,
},
{
key: 'age',
title: 'Age',
accessor: (row: Client) => { return row.age },
},
{
key: 'birthdate',
title: 'Birthday',
renderComponent: DateCell,
sortValue: (row: Client) => {
return row.birthdate;
},
accessor: (row: Client) => { return { value : row.birthdate } },
},
{
key: 'total',
title: 'Total',
accessor: (row: Client) => { return row.amount * row.quantity },
renderComponent: CurrencyCell,
},
];
<Grid
bind:data={clients}
bind:columns={columns}>
</Grid>
Example With Footer & Paging
let itemsPerPage = 10;
let currentPage = 1;
let totalPages = 1;
let totalResults = 0;
let columns: GridColumn<Client>[] = [];
let clients: Client[] = getClientsFromDB() //replace getClientsFromDB with your DB function
<Grid
bind:data={clients}
bind:columns={columns}
bind:currentPage
bind:itemsPerPage
bind:totalPages
bind:totalResults>
</Grid>
<GridFooter bind:currentPage bind:totalPages bind:totalResults bind:itemsPerPage />
Example With Grouping
Coming soon
Example With Selecting Rows
Coming soon
Example With Different Filters
Coming soon
Example With Group By
Coming soon
Example With Customized Appearance
Coming soon
API Documentation
Grid Properties
Coming soon
Columns
key
: needs to be the name of the propertytitle
: Title of the columnaccessor
(optional): returns custom objects or manipulated valuessortValue
(optional): returned value will be used for sortingrenderComponent
(optional): Reference to a SvelteKit component. Will be used to render the column-cellcellRender
(optional): Can be used to render a sveltekit component AND provide custum properties for the component. Those will be automatically injected. { component: MyFancyCellComponent, props: {myVal: 123, other: "abc"} }visible
(optional): Can be set to true/false to show/hide the columnsortable
(optional): Can be set to true/false to activate/deactivate sorting of the columnwidth
(optional): Width of the column. Either as number (px) or string value "123px" or "1rem" or "33%"
License
This package is licensed under the MIT License.