@uxf/data-grid

@uxf/data-grid

Migration from v1 to v2

DataGridConfigurator => removed
LoaderFunction => Loader

-- DataGridProps --
DataGridBo

Example usage

// prepare data
export interface Country {
    code: string;
    name: string;
}

export const countries: Country[] = [
    { code: "AT", name: "Austria" },
    { code: "CZ", name: "Czech Republic" },
    { code: "DE", name: "Germany" },
    { code: "GR", name: "Greece" },
    { code: "HU", name: "Hungary" },
    { code: "IT", name: "Italy" },
    { code: "MT", name: "Malta" },
    { code: "MC", name: "Monaco" },
    { code: "NL", name: "Netherlands" },
    { code: "NO", name: "Norway" },
    { code: "PL", name: "Poland" },
    { code: "PT", name: "Portugal" },
];

export const App: React.FC = () => {
    const [hiddenColumns, setHiddenColumns] = useState<string[]>([]);
    const [selectedRows, setSelectedRows] = useState<Country[]>([]);

    // create config 
    const config = DataGridConfigurator.create()
        .addColumn({ name: "code", label: "Code" })
        .addColumn({ name: "name", label: "Name", sort: true })
        .addFilter({
            name: "code",
            label: "Code",
            type: "select",
            options: countries.map(c => ({ label: c.name, value: c.code })),
        })
        .addFilter({ name: "name", label: "Name", type: "text" })
        .getConfig();
    
    // create loader 
    const loader: Loader = async (_, { dir, page = 1, perPage = 10 }) => {
        const result = countries.sort((a, b) =>
            dir === "asc" ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name),
        );
    
        return {
            count: result.length,
            totalCount: countries.length,
            result: result.slice(page * perPage, page * perPage + perPage),
        };
    };

    return (
        <DataGrid<Country>
            {...config}
            gridName="test"
            title="Test"
            loader={loader}
            onChangeHiddenColumns={setHiddenColumns}
            hiddenColumns={hiddenColumns}
            selectableRows="multiple"
            onChangeSelectedRows={setSelectedRows}
            selectedRows={selectedRows}
        />
    );
};