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

`css
@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

`tsx
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);
`

Row type

Create a column-types.d.ts file in root of your project (next to tsconfig) and add the following:
(be aware - it must be interface)

`tsx
declare module "@uxf/data-grid/column-types" {
export interface ColumnTypes {
"my-custom-type": MyCustomType;
}
}
`

Then you can use it in your code:

`tsx
import { InferDataGridRow } from "@uxf/data-grid";
import { schema } from "@generated/data-grid/schema/example";

type Row = InferDataGridRow;
`

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

$3

`tsx
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 (
reload={reload}
state={state}
actions={actions}
data={data}
isLoading={isLoading}
error={error}
schema={schema}
/>
);
}
`

$3

`tsx
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


}
``