@uxf/data-grid

Typescript

import { Schema } from "@uxf/data-grid";

type GridType = {
    columns: {
        // columnName : columnType
        id: "number";
        name: "string";
        active: "boolean"
    };
    filters: {
        // filterName : filterType
        id: "number",
        name: "text",
    };
};

const schema: Schema<GridType> = {
    columns: [
        { name: "id", type: "number", label: "Id"},
        { name: "name", type: "string", label: "Jméno" },
        { name: "active", type: "boolean", label: "Aktivní"},
    ],
    filters: [
        { name: "id", type: "number", label: "Id" },
        { name: "name", type: "text", label: "Jméno" },
    ],
    dir: "asc",
    sort: "id",
    perPage: 10,
    fullText: true,
};

<DataGrid<GridType> schema={schema}/>

Props

getOpenUrl

Return value: null or undefined hides button

getOpenUrl: (row: T) => string | null | undefined;

getEditUrl

Return value: null or undefined hides button

getOpenUrl: (row: T) => string | null | undefined;

rowClass

rowClass: (row: T) => "primary" | "secondary" | "success" | "warning" | "error" | string | null;

ToolbarContent

<DataGrid
    ToolbarContent={({ onFilter, filtersData }) => (
        <Checkbox
            label="Boolean filter in toolbar"
            checked={filtersData.find(f => f.name === "neighbors")?.value}
            onChange={e => onFilter({ name: "neighbors", value: e.target.checked })}
        />
    )}
/>

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}
        />
    );
};