@uxf/data-grid

DataGrid

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/data-grid/styles.css");
@import url("@uxf/ui/button/button.css");
@import url("@uxf/ui/dropdown/dropdown.css");
@import url("@uxf/ui/form-component/form-component.css");
@import url("@uxf/ui/icon/icon.css");
@import url("@uxf/ui/input/input.css");
@import url("@uxf/ui/input/input-basic.css");
@import url("@uxf/ui/label/label.css");
@import url("@uxf/ui/pagination/pagination.css");
@import url("@uxf/ui/_select-base/select-base.css");

State and actions of data-grid

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

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

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";

function BasicExample() {
    const { state, actions } = useDataGridControl({ schema });
    const { isLoading, error, data, onReload } = useDataGridFetching(loader, schema, "grid-name", state);

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