@mrii/react-table-builder
Version:
library to easily build tables using MUI grid
62 lines (59 loc) • 2.37 kB
JavaScript
import { jsx, jsxs } from 'react/jsx-runtime';
import { forwardRef, useMemo } from 'react';
import { GridToolbarContainer, GridToolbarColumnsButton, GridToolbarDensitySelector, GridToolbarExport } from '@mui/x-data-grid';
import { Grid, Box } from '@mui/material';
import { FilterField } from '../../filter-field/index.mjs';
import { CustomGridToolbarFilterButton } from '../custom-grid-filter-button/index.mjs';
import { useTableBuilderFilters } from '../../../context/filter/provider.mjs';
import { useTranslation } from '../../../context/translation/provider.mjs';
const CustomGridToolbar = /*#__PURE__*/ forwardRef(function CustomGridToolbar(props, ref) {
const [filters, editFilter] = useTableBuilderFilters((s)=>[
s.filters,
s.editFilter
]);
const t = useTranslation((s)=>s.getFieldLabel);
const inputs = useMemo(()=>filters.map((filter)=>/*#__PURE__*/ jsx(Grid, {
item: true,
children: /*#__PURE__*/ jsx(FilterField, {
type: filter.column.type,
value: filter.value,
label: t(filter.field, true),
onChange: (value)=>editFilter({
...filter,
value
}),
items: filter.column.extraProps?.items
})
}, filter.field)), [
editFilter,
filters,
t
]);
return /*#__PURE__*/ jsxs(Box, {
display: "flex",
justifyContent: "space-between",
alignItems: "flex-start",
p: 2,
children: [
/*#__PURE__*/ jsx(Grid, {
container: true,
spacing: 2,
flexWrap: "wrap",
flex: "1 0",
children: inputs
}),
/*#__PURE__*/ jsxs(GridToolbarContainer, {
...props,
ref: ref,
children: [
/*#__PURE__*/ jsx(GridToolbarColumnsButton, {}),
/*#__PURE__*/ jsx(GridToolbarDensitySelector, {}),
/*#__PURE__*/ jsx(CustomGridToolbarFilterButton, {}),
/*#__PURE__*/ jsx(GridToolbarExport, {})
]
})
]
});
});
export { CustomGridToolbar };
//# sourceMappingURL=index.mjs.map