Tzezar's Datagrid

Beta

Typescript

Tzezar's data grid fully supports TypeScript and utilizes generics to maintain column and row types, making your work more efficient and less prone to errors.

The first step in simplifying the process is to define your column types. This ensures type safety during column declaration and while rendering the data grid.

import type { BaseColumn } from "$lib/datagrid/types";
    
type InventoryDataRow = {
    product: {
        name: string;
    };
    price: number;
}

export const columns = [
    {
        id: 'product.name',
        title: 'Product name',
        grow: true,
    },
    {
        id: 'price',
        title: 'Price',
    },
] satisfies BaseColumn<InventoryDataRow>[]

nested id's does not provide type safety in version 1.0.0

Important

Make sure to pass your row type using: satisfies BaseColumn<"YOUR_DATA_TYPE">[].

The BaseColumn is a generic type that defines all the column options available to you.

// to make nested column ids work, this has be changed for sure
export type ColumnId<T = unknown> = keyof T | (string & {});

export type BaseColumn<T = unknown> = {
    // has to be unique
    id: ColumnId<T>;
    // used in various places like header
    title: string;
    // starting width of column
    width?: string;
    // filter type for this columns eg. string, number, date etc.
    filterType?: FilterType;
    // default filter value
    filterValue?: FilterValue;
    // options used in select filter
    options?: { value: string; label: string }[];
    // defines if column is sortable
    sortable?: boolean;
    // defines if column is visible by default
    visible?: boolean;
    // defines if column is resizable
    resizable?: boolean;
    // defines if column is moveable
    moveable?: boolean;
    // defines if column is pinnable
    pinnable?: boolean;
    // defines if column is hideable
    hideable?: boolean;
    // defines if column is exportable eg. in excel export
    exportable?: boolean;
    // defines if column is selectable
    selectable?: boolean;
    // this basically makes add flex-grow: 1; to column, can give nice results when used eg. on most important column, columns in the middle or last column
    // I suggest adding it to one column at least
    grow?: boolean;
    // options for pinned columns, offset is in px and is recalculated based on other columns automatically
    // (optional) you can pass starting offset eg. '100px' that will be the same as width of column 
    pinned?: {
        position: 'left' | 'right';
        offset?: string | null;
    };
    // self explanatory, you can override default align passing styles to cells
    align?: 'start' | 'center' | 'end';
};

That's it! With proper typing, you'll have IntelliSense, even for custom columns. Row types are automatically inferred from the shape of the data you provide to the `data` property creating datagrid instance. This will be especially useful when defining custom components or rendering and styling custom cells.