@orbe-agro/client-core 5.5.54 → 5.5.55
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/@ecme/components/shared/DataTable.js +11 -1
- package/dist/@ecme/components/shared/DataTable.js.map +1 -1
- package/dist/@types/@ecme/components/shared/DataTable.d.ts +3 -0
- package/dist/@types/@ecme/components/shared/DataTable.d.ts.map +1 -1
- package/lib/@ecme/components/shared/DataTable.tsx +15 -0
- package/package.json +1 -1
|
@@ -71,11 +71,17 @@ function DataTable(props) {
|
|
|
71
71
|
getRowCanExpand = () => false,
|
|
72
72
|
onSelectionChange,
|
|
73
73
|
hidePagination = false,
|
|
74
|
+
enableGlobalFilter = false,
|
|
75
|
+
globalFilter: globalFilterProp,
|
|
76
|
+
onGlobalFilterChange,
|
|
74
77
|
...rest
|
|
75
78
|
} = props;
|
|
76
79
|
const { pageSize, pageIndex, total } = pagingData;
|
|
77
80
|
const [sorting, setSorting] = useState(null);
|
|
78
81
|
const [selection, setRowSelection] = useState({});
|
|
82
|
+
const [internalGlobalFilter, setInternalGlobalFilter] = useState("");
|
|
83
|
+
const globalFilter = globalFilterProp ?? internalGlobalFilter;
|
|
84
|
+
const setGlobalFilter = onGlobalFilterChange ?? setInternalGlobalFilter;
|
|
79
85
|
const { t } = useTranslation();
|
|
80
86
|
const pageSizeOption = useMemo(
|
|
81
87
|
() => pageSizes.map((number) => ({
|
|
@@ -153,13 +159,17 @@ function DataTable(props) {
|
|
|
153
159
|
getSortedRowModel: getSortedRowModel(),
|
|
154
160
|
manualPagination: true,
|
|
155
161
|
manualSorting: props.manualSorting ?? false,
|
|
162
|
+
enableGlobalFilter,
|
|
163
|
+
globalFilterFn: "includesString",
|
|
164
|
+
onGlobalFilterChange: setGlobalFilter,
|
|
156
165
|
onSortingChange: (sorter) => {
|
|
157
166
|
setSorting(sorter);
|
|
158
167
|
},
|
|
159
168
|
onRowSelectionChange: setRowSelection,
|
|
160
169
|
state: {
|
|
161
170
|
sorting,
|
|
162
|
-
rowSelection: selection
|
|
171
|
+
rowSelection: selection,
|
|
172
|
+
globalFilter: enableGlobalFilter ? globalFilter : void 0
|
|
163
173
|
},
|
|
164
174
|
getRowCanExpand
|
|
165
175
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTable.js","sources":["../../../../lib/@ecme/components/shared/DataTable.tsx"],"sourcesContent":["import FileNotFound from '@/assets/svg/FileNotFound'\nimport type { CheckboxProps } from '@/components/ui/Checkbox'\nimport Checkbox from '@/components/ui/Checkbox'\nimport Pagination from '@/components/ui/Pagination'\nimport Select from '@/components/ui/Select'\nimport type { SkeletonProps } from '@/components/ui/Skeleton'\nimport type { TableProps } from '@/components/ui/Table'\nimport Table from '@/components/ui/Table'\nimport {\n CellContext,\n ColumnDef,\n ColumnSort,\n flexRender,\n getCoreRowModel,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n Row,\n useReactTable,\n} from '@tanstack/react-table'\nimport classNames from 'classnames'\nimport type { ChangeEvent, ReactNode, Ref } from 'react'\nimport {\n Fragment,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState\n} from 'react'\nimport { useTranslation } from 'react-i18next'\nimport TableRowSkeleton from './loaders/TableRowSkeleton'\nimport Loading from './Loading'\n\nexport type OnSortParam = { order: 'asc' | 'desc' | ''; key: string | number }\n\nexport type DataTableProps<T> = {\n columns: ColumnDef<T>[]\n customNoDataIcon?: ReactNode\n data?: T[]\n loading?: boolean\n noData?: boolean\n instanceId?: string\n onCheckBoxChange?: (checked: boolean, row: T) => void\n onIndeterminateCheckBoxChange?: (checked: boolean, rows: Row<T>[]) => void\n onPaginationChange?: (page: number) => void\n onSelectChange?: (num: number) => void\n onSort?: (sort: OnSortParam) => void\n pageSizes?: number[]\n manualSorting?: boolean\n selectable?: boolean\n skeletonAvatarColumns?: number[]\n skeletonAvatarProps?: SkeletonProps\n pagingData?: {\n total: number\n pageIndex: number\n pageSize: number\n }\n checkboxChecked?: (row: T) => boolean\n indeterminateCheckboxChecked?: (row: Row<T>[]) => boolean\n ref?: Ref<DataTableResetHandle | HTMLTableElement>\n onSelectionChange?: (selected: T[]) => void\n renderSubComponent?: (row: Row<T>) => React.ReactNode\n getRowCanExpand?: (row: Row<T>) => boolean\n hidePagination?: boolean\n isAllSelected?: boolean\n selectedRows?: T[]\n} & TableProps\n\nexport type CheckBoxChangeEvent = ChangeEvent<HTMLInputElement>\n\nexport interface IndeterminateCheckboxProps\n extends Omit<CheckboxProps, 'onChange'> {\n onChange: (event: CheckBoxChangeEvent) => void\n indeterminate: boolean\n onCheckBoxChange?: (event: CheckBoxChangeEvent) => void\n onIndeterminateCheckBoxChange?: (event: CheckBoxChangeEvent) => void\n}\n\nconst { Tr, Th, Td, THead, TBody, Sorter } = Table\n\nconst IndeterminateCheckbox = (props: IndeterminateCheckboxProps) => {\n const {\n indeterminate,\n onChange,\n onCheckBoxChange,\n onIndeterminateCheckBoxChange,\n ...rest\n } = props\n\n const ref = useRef<HTMLInputElement>(null)\n\n useEffect(() => {\n if (typeof indeterminate === 'boolean' && ref.current) {\n ref.current.indeterminate = !rest.checked && indeterminate\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [ref, indeterminate])\n\n const handleChange = (e: CheckBoxChangeEvent) => {\n onChange(e)\n onCheckBoxChange?.(e)\n onIndeterminateCheckBoxChange?.(e)\n }\n\n return (\n <Checkbox\n ref={ref}\n className=\"mb-0\"\n onChange={(_, e) => handleChange(e)}\n {...rest}\n />\n )\n}\n\nexport type DataTableResetHandle = {\n resetSorting: () => void\n resetSelected: () => void\n}\n\nfunction DataTable<T>(props: DataTableProps<T>) {\n const {\n skeletonAvatarColumns,\n columns: columnsProp = [],\n data = [],\n customNoDataIcon,\n loading,\n noData,\n onCheckBoxChange,\n onIndeterminateCheckBoxChange,\n onPaginationChange,\n onSelectChange,\n onSort,\n pageSizes = [10, 25, 50, 100],\n selectable = false,\n skeletonAvatarProps,\n pagingData = {\n total: 0,\n pageIndex: 1,\n pageSize: 10,\n },\n checkboxChecked,\n indeterminateCheckboxChecked,\n instanceId = 'data-table',\n ref,\n renderSubComponent = () => null,\n getRowCanExpand = () => false,\n onSelectionChange,\n hidePagination = false,\n ...rest\n } = props\n\n const { pageSize, pageIndex, total } = pagingData\n\n const [sorting, setSorting] = useState<ColumnSort[] | null>(null)\n const [selection, setRowSelection] = useState({})\n\n const { t } = useTranslation()\n\n const pageSizeOption = useMemo(\n () =>\n pageSizes.map((number) => ({\n value: number,\n label: `${number} / ${t('common.table.pageAbbr')}`,\n })),\n [pageSizes],\n )\n\n useEffect(() => {\n if (Array.isArray(sorting)) {\n const sortOrder =\n sorting.length > 0 ? (sorting[0].desc ? 'desc' : 'asc') : ''\n const id = sorting.length > 0 ? sorting[0].id : ''\n onSort?.({ order: sortOrder, key: id })\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [sorting])\n\n const handleIndeterminateCheckBoxChange = (\n checked: boolean,\n rows: Row<T>[],\n ) => {\n if (!loading) {\n onIndeterminateCheckBoxChange?.(checked, rows)\n }\n }\n\n const handleCheckBoxChange = (checked: boolean, row: T) => {\n if (!loading) {\n onCheckBoxChange?.(checked, row)\n }\n }\n\n const finalColumns: ColumnDef<T>[] = useMemo(() => {\n const columns = columnsProp\n\n if (selectable) {\n return [\n {\n id: 'select',\n maxSize: 50,\n header: ({ table }) => (\n <IndeterminateCheckbox\n checked={\n indeterminateCheckboxChecked\n ? indeterminateCheckboxChecked(\n table.getRowModel().rows,\n )\n : table.getIsAllRowsSelected()\n }\n indeterminate={table.getIsSomeRowsSelected()}\n onChange={table.getToggleAllRowsSelectedHandler()}\n onIndeterminateCheckBoxChange={(e) => {\n handleIndeterminateCheckBoxChange(\n e.target.checked,\n table.getRowModel().rows,\n )\n }}\n />\n ),\n cell: ({ row }) => (\n <IndeterminateCheckbox\n checked={\n checkboxChecked\n ? checkboxChecked(row.original)\n : row.getIsSelected()\n }\n disabled={!row.getCanSelect()}\n indeterminate={row.getIsSomeSelected()}\n onChange={row.getToggleSelectedHandler()}\n onCheckBoxChange={(e) =>\n handleCheckBoxChange(\n e.target.checked,\n row.original,\n )\n }\n />\n ),\n },\n ...columns,\n ]\n }\n return columns\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [columnsProp, selectable, loading, checkboxChecked])\n\n const table = useReactTable({\n data,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n columns: finalColumns,\n getCoreRowModel: getCoreRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n manualPagination: true,\n manualSorting: props.manualSorting ?? false,\n onSortingChange: (sorter) => {\n setSorting(sorter as ColumnSort[])\n },\n onRowSelectionChange: setRowSelection,\n state: {\n sorting: sorting as ColumnSort[],\n rowSelection: selection,\n },\n getRowCanExpand,\n })\n\n const resetSorting = () => {\n table.resetSorting()\n }\n\n const resetSelected = () => {\n table.resetRowSelection(true)\n }\n\n useImperativeHandle(ref, () => ({\n resetSorting,\n resetSelected,\n }))\n\n const handlePaginationChange = (page: number) => {\n if (!loading) {\n resetSelected()\n onPaginationChange?.(page)\n }\n }\n\n const handleSelectChange = (value?: number) => {\n if (!loading) {\n onSelectChange?.(Number(value))\n }\n }\n\n const prevSelectedRef = useRef<T[]>([])\n\n useEffect(() => {\n if (!onSelectionChange) return\n\n const selectedRows = table\n .getSelectedRowModel()\n .rows.map((r) => r.original as T)\n\n const isEqual =\n selectedRows.length === prevSelectedRef.current.length &&\n selectedRows.every(\n (item, idx) => item === prevSelectedRef.current[idx],\n )\n\n if (!isEqual) {\n prevSelectedRef.current = selectedRows\n onSelectionChange(selectedRows)\n }\n }, [table.getState().rowSelection, onSelectionChange, table])\n\n // Sync external selectedRows prop with internal selection state\n useEffect(() => {\n if (props.selectedRows && data.length > 0) {\n const externalSelection = {}\n data.forEach((row, index) => {\n const isSelected = props.selectedRows?.some(selectedRow => selectedRow === row)\n if (isSelected) {\n externalSelection[index] = true\n }\n })\n setRowSelection(externalSelection)\n }\n }, [props.selectedRows, data])\n\n // isAllSelected management - only when selectedRows is not provided\n useEffect(() => {\n if (!props.selectedRows) { // Only manage isAllSelected when selectedRows is not used\n if (props.isAllSelected === true && table) {\n const all = {}\n table.getRowModel().rows.forEach((row) => {\n all[row.id] = true\n })\n setRowSelection(all)\n } else if (props.isAllSelected === false) {\n setRowSelection({})\n }\n // When isAllSelected is undefined, preserve current selections\n }\n }, [props.isAllSelected, table, props.selectedRows])\n\n return (\n <Loading loading={Boolean(loading && data.length !== 0)} type=\"cover\">\n <Table {...rest}>\n <THead>\n {table.getHeaderGroups().map((headerGroup) => (\n <Tr key={headerGroup.id}>\n {headerGroup.headers.map((header) => {\n // 1. LEITURA E VALIDAÇÕES DO ALINHAMENTO\n const headerAlign = (header.column.columnDef as any).meta?.headerAlign || 'between';\n\n let justifyClass = 'justify-between'; // Padrão: Nome Esquerda, Sorter Direita\n\n // Flag para o alinhamento complexo desejado\n const sorterEnd = headerAlign === 'name-center-sorter-end';\n\n // Define a classe de justificação principal para os alinhamentos simples\n if (headerAlign === 'center') {\n justifyClass = 'justify-center'; // Nome + Sorter juntos no centro\n } else if (headerAlign === 'start') {\n justifyClass = 'justify-start'; // Nome + Sorter juntos na esquerda\n } else if (headerAlign === 'end') {\n justifyClass = 'justify-end'; // Nome + Sorter juntos na direita\n }\n\n // Se for o layout complexo, usamos 'justify-center' como base\n if (sorterEnd) {\n // Usamos justify-center, e o ml-auto do Sorter o empurra para o canto.\n justifyClass = 'justify-center';\n }\n\n // Define classes para o SPAN do nome (Ocupa largura total e centraliza o texto)\n const nameClasses = classNames('truncate', {\n // Se for sorterEnd, o SPAN ocupa a largura total para centralizar o nome\n 'w-full text-center': sorterEnd,\n });\n\n // Define a classe para o wrapper do Sorter.\n let sorterClasses = '';\n if (sorterEnd) {\n // Para sorterEnd, ml-auto empurra o Sorter para a EXTREMA direita\n sorterClasses = 'ml-auto';\n }\n\n return (\n <Th\n key={header.id}\n colSpan={header.colSpan}\n >\n {header.isPlaceholder ? null : (\n <div\n className={classNames(\n 'flex items-center gap-1', // O 'gap-1' fornece o espaçamento entre Nome e Sorter\n justifyClass,\n header.column.getCanSort() &&\n 'cursor-pointer select-none',\n loading &&\n 'pointer-events-none',\n )}\n onClick={header.column.getToggleSortingHandler()}\n >\n {/* 2. RENDERIZAÇÃO DO NOME (Sempre primeiro, pois o Sorter deve ser à direita) */}\n <span className={nameClasses}>\n {flexRender(\n header.column.columnDef\n .header,\n header.getContext(),\n )}\n </span>\n\n {/* 3. RENDERIZAÇÃO DO SORTER: Sempre depois do nome. O ml-auto será aplicado APENAS em sorterEnd */}\n {header.column.getCanSort() && (\n // O Sorter deve estar em uma div se precisar de classes condicionais (ml-auto)\n <div className={sorterClasses}>\n <Sorter\n sort={header.column.getIsSorted()}\n />\n </div>\n )}\n </div>\n )}\n </Th>\n );\n })}\n </Tr>\n ))}\n </THead>\n {loading && data.length === 0 ? (\n <TableRowSkeleton\n columns={(finalColumns as Array<T>).length}\n rows={pagingData.pageSize}\n avatarInColumns={skeletonAvatarColumns}\n avatarProps={skeletonAvatarProps}\n />\n ) : (\n <TBody>\n {noData ? (\n <Tr>\n <Td\n className=\"hover:bg-transparent\"\n colSpan={finalColumns.length}\n >\n <div className=\"flex flex-col items-center gap-4\">\n {customNoDataIcon ? (\n customNoDataIcon\n ) : (\n <>\n <FileNotFound />\n <span className=\"font-semibold\">\n No data found!\n </span>\n </>\n )}\n </div>\n </Td>\n </Tr>\n ) : (\n table\n .getRowModel()\n .rows.slice(0, pageSize)\n .map((row) => {\n return (\n <Fragment key={row.id}>\n <Tr key={row.id}>\n {row\n .getVisibleCells()\n .map((cell) => {\n return (\n <Td\n key={cell.id}\n style={{\n width: cell.column.getSize(),\n }}\n >\n {flexRender(\n cell.column\n .columnDef\n .cell,\n cell.getContext(),\n )}\n </Td>\n )\n })}\n </Tr>\n {row.getIsExpanded() && (\n <Tr>\n <Td\n colSpan={\n row.getVisibleCells()\n .length\n }\n >\n {renderSubComponent(\n row,\n )}\n </Td>\n </Tr>\n )}\n </Fragment>\n )\n })\n )}\n </TBody>\n )}\n </Table>\n {!hidePagination && (\n <div className=\"mt-4 flex items-center justify-between\">\n <Pagination\n pageSize={pageSize}\n currentPage={pageIndex}\n total={total}\n onChange={handlePaginationChange}\n />\n <div style={{ minWidth: 130 }}>\n <Select\n instanceId={instanceId}\n size=\"sm\"\n menuPlacement=\"top\"\n isSearchable={false}\n value={pageSizeOption.filter(\n (option) => option.value === pageSize,\n )}\n options={pageSizeOption}\n onChange={(option) =>\n handleSelectChange(option?.value)\n }\n />\n </div>\n </div>\n )}\n </Loading>\n )\n}\n\nexport { DataTable }\nexport type { CellContext, ColumnDef, ColumnSort, Row }\nexport default DataTable"],"names":["table","Fragment"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DataTable.js","sources":["../../../../lib/@ecme/components/shared/DataTable.tsx"],"sourcesContent":["import FileNotFound from '@/assets/svg/FileNotFound'\nimport type { CheckboxProps } from '@/components/ui/Checkbox'\nimport Checkbox from '@/components/ui/Checkbox'\nimport Pagination from '@/components/ui/Pagination'\nimport Select from '@/components/ui/Select'\nimport type { SkeletonProps } from '@/components/ui/Skeleton'\nimport type { TableProps } from '@/components/ui/Table'\nimport Table from '@/components/ui/Table'\nimport {\n CellContext,\n ColumnDef,\n ColumnSort,\n flexRender,\n getCoreRowModel,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n Row,\n useReactTable,\n} from '@tanstack/react-table'\nimport classNames from 'classnames'\nimport type { ChangeEvent, ReactNode, Ref } from 'react'\nimport {\n Fragment,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState\n} from 'react'\nimport { useTranslation } from 'react-i18next'\nimport TableRowSkeleton from './loaders/TableRowSkeleton'\nimport Loading from './Loading'\n\nexport type OnSortParam = { order: 'asc' | 'desc' | ''; key: string | number }\n\nexport type DataTableProps<T> = {\n columns: ColumnDef<T>[]\n customNoDataIcon?: ReactNode\n data?: T[]\n loading?: boolean\n noData?: boolean\n instanceId?: string\n onCheckBoxChange?: (checked: boolean, row: T) => void\n onIndeterminateCheckBoxChange?: (checked: boolean, rows: Row<T>[]) => void\n onPaginationChange?: (page: number) => void\n onSelectChange?: (num: number) => void\n onSort?: (sort: OnSortParam) => void\n pageSizes?: number[]\n manualSorting?: boolean\n selectable?: boolean\n skeletonAvatarColumns?: number[]\n skeletonAvatarProps?: SkeletonProps\n pagingData?: {\n total: number\n pageIndex: number\n pageSize: number\n }\n checkboxChecked?: (row: T) => boolean\n indeterminateCheckboxChecked?: (row: Row<T>[]) => boolean\n ref?: Ref<DataTableResetHandle | HTMLTableElement>\n onSelectionChange?: (selected: T[]) => void\n renderSubComponent?: (row: Row<T>) => React.ReactNode\n getRowCanExpand?: (row: Row<T>) => boolean\n hidePagination?: boolean\n isAllSelected?: boolean\n selectedRows?: T[]\n enableGlobalFilter?: boolean\n globalFilter?: string\n onGlobalFilterChange?: (value: string) => void\n} & TableProps\n\nexport type CheckBoxChangeEvent = ChangeEvent<HTMLInputElement>\n\nexport interface IndeterminateCheckboxProps\n extends Omit<CheckboxProps, 'onChange'> {\n onChange: (event: CheckBoxChangeEvent) => void\n indeterminate: boolean\n onCheckBoxChange?: (event: CheckBoxChangeEvent) => void\n onIndeterminateCheckBoxChange?: (event: CheckBoxChangeEvent) => void\n}\n\nconst { Tr, Th, Td, THead, TBody, Sorter } = Table\n\nconst IndeterminateCheckbox = (props: IndeterminateCheckboxProps) => {\n const {\n indeterminate,\n onChange,\n onCheckBoxChange,\n onIndeterminateCheckBoxChange,\n ...rest\n } = props\n\n const ref = useRef<HTMLInputElement>(null)\n\n useEffect(() => {\n if (typeof indeterminate === 'boolean' && ref.current) {\n ref.current.indeterminate = !rest.checked && indeterminate\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [ref, indeterminate])\n\n const handleChange = (e: CheckBoxChangeEvent) => {\n onChange(e)\n onCheckBoxChange?.(e)\n onIndeterminateCheckBoxChange?.(e)\n }\n\n return (\n <Checkbox\n ref={ref}\n className=\"mb-0\"\n onChange={(_, e) => handleChange(e)}\n {...rest}\n />\n )\n}\n\nexport type DataTableResetHandle = {\n resetSorting: () => void\n resetSelected: () => void\n}\n\nfunction DataTable<T>(props: DataTableProps<T>) {\n const {\n skeletonAvatarColumns,\n columns: columnsProp = [],\n data = [],\n customNoDataIcon,\n loading,\n noData,\n onCheckBoxChange,\n onIndeterminateCheckBoxChange,\n onPaginationChange,\n onSelectChange,\n onSort,\n pageSizes = [10, 25, 50, 100],\n selectable = false,\n skeletonAvatarProps,\n pagingData = {\n total: 0,\n pageIndex: 1,\n pageSize: 10,\n },\n checkboxChecked,\n indeterminateCheckboxChecked,\n instanceId = 'data-table',\n ref,\n renderSubComponent = () => null,\n getRowCanExpand = () => false,\n onSelectionChange,\n hidePagination = false,\n enableGlobalFilter = false,\n globalFilter: globalFilterProp,\n onGlobalFilterChange,\n ...rest\n } = props\n\n const { pageSize, pageIndex, total } = pagingData\n\n const [sorting, setSorting] = useState<ColumnSort[] | null>(null)\n const [selection, setRowSelection] = useState({})\n const [internalGlobalFilter, setInternalGlobalFilter] = useState('')\n\n // Use external globalFilter if provided, otherwise use internal state\n const globalFilter = globalFilterProp ?? internalGlobalFilter\n const setGlobalFilter = onGlobalFilterChange ?? setInternalGlobalFilter\n\n const { t } = useTranslation()\n\n const pageSizeOption = useMemo(\n () =>\n pageSizes.map((number) => ({\n value: number,\n label: `${number} / ${t('common.table.pageAbbr')}`,\n })),\n [pageSizes],\n )\n\n useEffect(() => {\n if (Array.isArray(sorting)) {\n const sortOrder =\n sorting.length > 0 ? (sorting[0].desc ? 'desc' : 'asc') : ''\n const id = sorting.length > 0 ? sorting[0].id : ''\n onSort?.({ order: sortOrder, key: id })\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [sorting])\n\n const handleIndeterminateCheckBoxChange = (\n checked: boolean,\n rows: Row<T>[],\n ) => {\n if (!loading) {\n onIndeterminateCheckBoxChange?.(checked, rows)\n }\n }\n\n const handleCheckBoxChange = (checked: boolean, row: T) => {\n if (!loading) {\n onCheckBoxChange?.(checked, row)\n }\n }\n\n const finalColumns: ColumnDef<T>[] = useMemo(() => {\n const columns = columnsProp\n\n if (selectable) {\n return [\n {\n id: 'select',\n maxSize: 50,\n header: ({ table }) => (\n <IndeterminateCheckbox\n checked={\n indeterminateCheckboxChecked\n ? indeterminateCheckboxChecked(\n table.getRowModel().rows,\n )\n : table.getIsAllRowsSelected()\n }\n indeterminate={table.getIsSomeRowsSelected()}\n onChange={table.getToggleAllRowsSelectedHandler()}\n onIndeterminateCheckBoxChange={(e) => {\n handleIndeterminateCheckBoxChange(\n e.target.checked,\n table.getRowModel().rows,\n )\n }}\n />\n ),\n cell: ({ row }) => (\n <IndeterminateCheckbox\n checked={\n checkboxChecked\n ? checkboxChecked(row.original)\n : row.getIsSelected()\n }\n disabled={!row.getCanSelect()}\n indeterminate={row.getIsSomeSelected()}\n onChange={row.getToggleSelectedHandler()}\n onCheckBoxChange={(e) =>\n handleCheckBoxChange(\n e.target.checked,\n row.original,\n )\n }\n />\n ),\n },\n ...columns,\n ]\n }\n return columns\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [columnsProp, selectable, loading, checkboxChecked])\n\n const table = useReactTable({\n data,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n columns: finalColumns,\n getCoreRowModel: getCoreRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n manualPagination: true,\n manualSorting: props.manualSorting ?? false,\n enableGlobalFilter,\n globalFilterFn: 'includesString',\n onGlobalFilterChange: setGlobalFilter,\n onSortingChange: (sorter) => {\n setSorting(sorter as ColumnSort[])\n },\n onRowSelectionChange: setRowSelection,\n state: {\n sorting: sorting as ColumnSort[],\n rowSelection: selection,\n globalFilter: enableGlobalFilter ? globalFilter : undefined,\n },\n getRowCanExpand,\n })\n\n const resetSorting = () => {\n table.resetSorting()\n }\n\n const resetSelected = () => {\n table.resetRowSelection(true)\n }\n\n useImperativeHandle(ref, () => ({\n resetSorting,\n resetSelected,\n }))\n\n const handlePaginationChange = (page: number) => {\n if (!loading) {\n resetSelected()\n onPaginationChange?.(page)\n }\n }\n\n const handleSelectChange = (value?: number) => {\n if (!loading) {\n onSelectChange?.(Number(value))\n }\n }\n\n const prevSelectedRef = useRef<T[]>([])\n\n useEffect(() => {\n if (!onSelectionChange) return\n\n const selectedRows = table\n .getSelectedRowModel()\n .rows.map((r) => r.original as T)\n\n const isEqual =\n selectedRows.length === prevSelectedRef.current.length &&\n selectedRows.every(\n (item, idx) => item === prevSelectedRef.current[idx],\n )\n\n if (!isEqual) {\n prevSelectedRef.current = selectedRows\n onSelectionChange(selectedRows)\n }\n }, [table.getState().rowSelection, onSelectionChange, table])\n\n // Sync external selectedRows prop with internal selection state\n useEffect(() => {\n if (props.selectedRows && data.length > 0) {\n const externalSelection = {}\n data.forEach((row, index) => {\n const isSelected = props.selectedRows?.some(selectedRow => selectedRow === row)\n if (isSelected) {\n externalSelection[index] = true\n }\n })\n setRowSelection(externalSelection)\n }\n }, [props.selectedRows, data])\n\n // isAllSelected management - only when selectedRows is not provided\n useEffect(() => {\n if (!props.selectedRows) { // Only manage isAllSelected when selectedRows is not used\n if (props.isAllSelected === true && table) {\n const all = {}\n table.getRowModel().rows.forEach((row) => {\n all[row.id] = true\n })\n setRowSelection(all)\n } else if (props.isAllSelected === false) {\n setRowSelection({})\n }\n // When isAllSelected is undefined, preserve current selections\n }\n }, [props.isAllSelected, table, props.selectedRows])\n\n return (\n <Loading loading={Boolean(loading && data.length !== 0)} type=\"cover\">\n <Table {...rest}>\n <THead>\n {table.getHeaderGroups().map((headerGroup) => (\n <Tr key={headerGroup.id}>\n {headerGroup.headers.map((header) => {\n // 1. LEITURA E VALIDAÇÕES DO ALINHAMENTO\n const headerAlign = (header.column.columnDef as any).meta?.headerAlign || 'between';\n\n let justifyClass = 'justify-between'; // Padrão: Nome Esquerda, Sorter Direita\n\n // Flag para o alinhamento complexo desejado\n const sorterEnd = headerAlign === 'name-center-sorter-end';\n\n // Define a classe de justificação principal para os alinhamentos simples\n if (headerAlign === 'center') {\n justifyClass = 'justify-center'; // Nome + Sorter juntos no centro\n } else if (headerAlign === 'start') {\n justifyClass = 'justify-start'; // Nome + Sorter juntos na esquerda\n } else if (headerAlign === 'end') {\n justifyClass = 'justify-end'; // Nome + Sorter juntos na direita\n }\n\n // Se for o layout complexo, usamos 'justify-center' como base\n if (sorterEnd) {\n // Usamos justify-center, e o ml-auto do Sorter o empurra para o canto.\n justifyClass = 'justify-center';\n }\n\n // Define classes para o SPAN do nome (Ocupa largura total e centraliza o texto)\n const nameClasses = classNames('truncate', {\n // Se for sorterEnd, o SPAN ocupa a largura total para centralizar o nome\n 'w-full text-center': sorterEnd,\n });\n\n // Define a classe para o wrapper do Sorter.\n let sorterClasses = '';\n if (sorterEnd) {\n // Para sorterEnd, ml-auto empurra o Sorter para a EXTREMA direita\n sorterClasses = 'ml-auto';\n }\n\n return (\n <Th\n key={header.id}\n colSpan={header.colSpan}\n >\n {header.isPlaceholder ? null : (\n <div\n className={classNames(\n 'flex items-center gap-1', // O 'gap-1' fornece o espaçamento entre Nome e Sorter\n justifyClass,\n header.column.getCanSort() &&\n 'cursor-pointer select-none',\n loading &&\n 'pointer-events-none',\n )}\n onClick={header.column.getToggleSortingHandler()}\n >\n {/* 2. RENDERIZAÇÃO DO NOME (Sempre primeiro, pois o Sorter deve ser à direita) */}\n <span className={nameClasses}>\n {flexRender(\n header.column.columnDef\n .header,\n header.getContext(),\n )}\n </span>\n\n {/* 3. RENDERIZAÇÃO DO SORTER: Sempre depois do nome. O ml-auto será aplicado APENAS em sorterEnd */}\n {header.column.getCanSort() && (\n // O Sorter deve estar em uma div se precisar de classes condicionais (ml-auto)\n <div className={sorterClasses}>\n <Sorter\n sort={header.column.getIsSorted()}\n />\n </div>\n )}\n </div>\n )}\n </Th>\n );\n })}\n </Tr>\n ))}\n </THead>\n {loading && data.length === 0 ? (\n <TableRowSkeleton\n columns={(finalColumns as Array<T>).length}\n rows={pagingData.pageSize}\n avatarInColumns={skeletonAvatarColumns}\n avatarProps={skeletonAvatarProps}\n />\n ) : (\n <TBody>\n {noData ? (\n <Tr>\n <Td\n className=\"hover:bg-transparent\"\n colSpan={finalColumns.length}\n >\n <div className=\"flex flex-col items-center gap-4\">\n {customNoDataIcon ? (\n customNoDataIcon\n ) : (\n <>\n <FileNotFound />\n <span className=\"font-semibold\">\n No data found!\n </span>\n </>\n )}\n </div>\n </Td>\n </Tr>\n ) : (\n table\n .getRowModel()\n .rows.slice(0, pageSize)\n .map((row) => {\n return (\n <Fragment key={row.id}>\n <Tr key={row.id}>\n {row\n .getVisibleCells()\n .map((cell) => {\n return (\n <Td\n key={cell.id}\n style={{\n width: cell.column.getSize(),\n }}\n >\n {flexRender(\n cell.column\n .columnDef\n .cell,\n cell.getContext(),\n )}\n </Td>\n )\n })}\n </Tr>\n {row.getIsExpanded() && (\n <Tr>\n <Td\n colSpan={\n row.getVisibleCells()\n .length\n }\n >\n {renderSubComponent(\n row,\n )}\n </Td>\n </Tr>\n )}\n </Fragment>\n )\n })\n )}\n </TBody>\n )}\n </Table>\n {!hidePagination && (\n <div className=\"mt-4 flex items-center justify-between\">\n <Pagination\n pageSize={pageSize}\n currentPage={pageIndex}\n total={total}\n onChange={handlePaginationChange}\n />\n <div style={{ minWidth: 130 }}>\n <Select\n instanceId={instanceId}\n size=\"sm\"\n menuPlacement=\"top\"\n isSearchable={false}\n value={pageSizeOption.filter(\n (option) => option.value === pageSize,\n )}\n options={pageSizeOption}\n onChange={(option) =>\n handleSelectChange(option?.value)\n }\n />\n </div>\n </div>\n )}\n </Loading>\n )\n}\n\nexport { DataTable }\nexport type { CellContext, ColumnDef, ColumnSort, Row }\nexport default DataTable"],"names":["table","Fragment"],"mappings":"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"}
|
|
@@ -38,6 +38,9 @@ export type DataTableProps<T> = {
|
|
|
38
38
|
hidePagination?: boolean;
|
|
39
39
|
isAllSelected?: boolean;
|
|
40
40
|
selectedRows?: T[];
|
|
41
|
+
enableGlobalFilter?: boolean;
|
|
42
|
+
globalFilter?: string;
|
|
43
|
+
onGlobalFilterChange?: (value: string) => void;
|
|
41
44
|
} & TableProps;
|
|
42
45
|
export type CheckBoxChangeEvent = ChangeEvent<HTMLInputElement>;
|
|
43
46
|
export interface IndeterminateCheckboxProps extends Omit<CheckboxProps, 'onChange'> {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../../../lib/@ecme/components/shared/DataTable.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAI7D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAC7D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAEvD,OAAO,EACH,WAAW,EACX,SAAS,EACT,UAAU,EAMV,GAAG,EAEN,MAAM,uBAAuB,CAAA;AAE9B,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAaxD,MAAM,MAAM,WAAW,GAAG;IAAE,KAAK,EAAE,KAAK,GAAG,MAAM,GAAG,EAAE,CAAC;IAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CAAA;AAE9E,MAAM,MAAM,cAAc,CAAC,CAAC,IAAI;IAC5B,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAA;IACvB,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,IAAI,CAAC,EAAE,CAAC,EAAE,CAAA;IACV,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,IAAI,CAAA;IACrD,6BAA6B,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,CAAA;IAC1E,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAA;IACpC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAA;IACpB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,qBAAqB,CAAC,EAAE,MAAM,EAAE,CAAA;IAChC,mBAAmB,CAAC,EAAE,aAAa,CAAA;IACnC,UAAU,CAAC,EAAE;QACT,KAAK,EAAE,MAAM,CAAA;QACb,SAAS,EAAE,MAAM,CAAA;QACjB,QAAQ,EAAE,MAAM,CAAA;KACnB,CAAA;IACD,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,OAAO,CAAA;IACrC,4BAA4B,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,OAAO,CAAA;IACzD,GAAG,CAAC,EAAE,GAAG,CAAC,oBAAoB,GAAG,gBAAgB,CAAC,CAAA;IAClD,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,IAAI,CAAA;IAC3C,kBAAkB,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,CAAA;IACrD,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,KAAK,OAAO,CAAA;IAC1C,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,YAAY,CAAC,EAAE,CAAC,EAAE,CAAA;
|
|
1
|
+
{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../../../lib/@ecme/components/shared/DataTable.tsx"],"names":[],"mappings":"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"}
|
|
@@ -65,6 +65,9 @@ export type DataTableProps<T> = {
|
|
|
65
65
|
hidePagination?: boolean
|
|
66
66
|
isAllSelected?: boolean
|
|
67
67
|
selectedRows?: T[]
|
|
68
|
+
enableGlobalFilter?: boolean
|
|
69
|
+
globalFilter?: string
|
|
70
|
+
onGlobalFilterChange?: (value: string) => void
|
|
68
71
|
} & TableProps
|
|
69
72
|
|
|
70
73
|
export type CheckBoxChangeEvent = ChangeEvent<HTMLInputElement>
|
|
@@ -147,6 +150,9 @@ function DataTable<T>(props: DataTableProps<T>) {
|
|
|
147
150
|
getRowCanExpand = () => false,
|
|
148
151
|
onSelectionChange,
|
|
149
152
|
hidePagination = false,
|
|
153
|
+
enableGlobalFilter = false,
|
|
154
|
+
globalFilter: globalFilterProp,
|
|
155
|
+
onGlobalFilterChange,
|
|
150
156
|
...rest
|
|
151
157
|
} = props
|
|
152
158
|
|
|
@@ -154,6 +160,11 @@ function DataTable<T>(props: DataTableProps<T>) {
|
|
|
154
160
|
|
|
155
161
|
const [sorting, setSorting] = useState<ColumnSort[] | null>(null)
|
|
156
162
|
const [selection, setRowSelection] = useState({})
|
|
163
|
+
const [internalGlobalFilter, setInternalGlobalFilter] = useState('')
|
|
164
|
+
|
|
165
|
+
// Use external globalFilter if provided, otherwise use internal state
|
|
166
|
+
const globalFilter = globalFilterProp ?? internalGlobalFilter
|
|
167
|
+
const setGlobalFilter = onGlobalFilterChange ?? setInternalGlobalFilter
|
|
157
168
|
|
|
158
169
|
const { t } = useTranslation()
|
|
159
170
|
|
|
@@ -254,6 +265,9 @@ function DataTable<T>(props: DataTableProps<T>) {
|
|
|
254
265
|
getSortedRowModel: getSortedRowModel(),
|
|
255
266
|
manualPagination: true,
|
|
256
267
|
manualSorting: props.manualSorting ?? false,
|
|
268
|
+
enableGlobalFilter,
|
|
269
|
+
globalFilterFn: 'includesString',
|
|
270
|
+
onGlobalFilterChange: setGlobalFilter,
|
|
257
271
|
onSortingChange: (sorter) => {
|
|
258
272
|
setSorting(sorter as ColumnSort[])
|
|
259
273
|
},
|
|
@@ -261,6 +275,7 @@ function DataTable<T>(props: DataTableProps<T>) {
|
|
|
261
275
|
state: {
|
|
262
276
|
sorting: sorting as ColumnSort[],
|
|
263
277
|
rowSelection: selection,
|
|
278
|
+
globalFilter: enableGlobalFilter ? globalFilter : undefined,
|
|
264
279
|
},
|
|
265
280
|
getRowCanExpand,
|
|
266
281
|
})
|