DataGrid

Note: This package contains translations. For proper functionality, you must use the TranslationsProvider from @uxf/core-react/translations. See the core-react documentation for more information.

Installation / Upgrade

yarn add @uxf/core @uxf/ui @uxf/data-grid

// or

yarn upgrade @uxf/core@latest @uxf/ui@latest @uxf/data-grid@latest

CSS dependencies

@import url("tailwindcss/components.css");
@import url("@uxf/ui/button/button.css");
@import url("@uxf/ui/button-list/button-list.css");
@import url("@uxf/ui/calendar/calendar.css");
@import url("@uxf/ui/checkbox/checkbox.css");
@import url("@uxf/ui/chip/chip.css");
@import url("@uxf/ui/dialog/dialog.css");
@import url("@uxf/ui/dropdown/dropdown.css");
@import url("@uxf/ui/icon/icon.css");
@import url("@uxf/ui/label/label.css");
@import url("@uxf/ui/form-component/form-component.css");
@import url("@uxf/ui/input/input-basic.css");
@import url("@uxf/ui/input/input.css");
@import url("@uxf/ui/_input-with-popover/input-with-popover.css");
@import url("@uxf/ui/combobox/combobox.css");
@import url("@uxf/ui/modal-header/modal-header.css");
@import url("@uxf/ui/multi-select/multi-select.css");
@import url("@uxf/ui/multi-combobox/multi-combobox.css");
@import url("@uxf/ui/pagination/pagination.css");
@import url("@uxf/ui/select/select.css");
@import url("@uxf/ui/toggle/toggle.css");
@import url("@uxf/ui/tabs/tabs.css");

/* must be after component css files */
@import url("@uxf/data-grid/styles.css");

State and actions of data-grid

import { useDataGridControl } from "@uxf/data-grid/use-data-grid-control";
import { useUserConfigLocalStorageAdapter } from "@uxf/data-grid/user-config-storage-adapters/local-storage";

const { middleware, useUserConfig } = useUserConfigLocalStorageAdapter(schema);

const { state, actions } = useDataGridControl({
    schema,
    initialState: "Request or string (base64 encoded request)",
    userConfig: {
        columns: {
            id: { isHidden: true },
        }
    },
    middleware,
    isDebug: true,
});

useUserConfig(actions);

Supported FilterHandlers

• bool - Select (yes / no / null)
• checkbox, boolean - Checkbox (is sent only if checkbox is checked)
• date
• datetime
• entityMultiSelect
• entitySelect
• interval
• multiSelect
• select
• string, text

Examples

DataGrid

import { useDataGridControl } from "@uxf/data-grid/use-data-grid-control";
import { useDataGridFetching } from "@uxf/data-grid/use-data-grid-fetching";
import { useUserConfigLocalStorageAdapter } from "@uxf/data-grid/user-config-storage-adapters/local-storage";

function BasicExample() {
    const { middleware, useUserConfig } = useUserConfigLocalStorageAdapter(schema);
    const { state, actions } = useDataGridControl({ schema, middleware });

    useUserConfig(actions);

    const { isLoading, error, data, reload } = useDataGridFetching(loader, schema, "grid-name", state);

    return (
        <DataGrid
            reload={reload}
            state={state}
            actions={actions}
            data={data}
            isLoading={isLoading}
            error={error}
            schema={schema}
        />
    );
}

FrontendConfig

import { useDataGridControl } from "@uxf/data-grid/use-data-grid-control";
import { mergeSchemaWithConfig } from "@uxf/data-grid";

const schema = mergeSchemaWithConfig(
    dataGridSchema_ExampleGrid,
    {
        columns: {
            id: { width: 100, isHidden: true },
        },
        filters: {
            id: { placeholder: "Hledejte podle ID..." }
        },
        perPage: 100,
    }
);

function Example_1(props) {
    const { state, actions } = useDataGridControl({
        schema,
        initialUserConfig: props.userConfig,
    })

    return <Table schema={schema}/>
}