@uxf/data-grid
v11.49.0
Published
UXF DataGrid
Downloads
1,388
Readme
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";
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, 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}/>
}