@uxf/data-grid NPM

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

data-table data-grid uxf

@uxf/core @uxf/core-react @uxf/ui dayjs deepmerge fast-glob qs react-data-grid yargs

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

9 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago