Mantine Table
Anis
javascript
5 months ago
3.4 kB
5
Indexable
import { IQueryType, ITableProps } from '@/types'; import { MRT_Row, MantineReactTable, useMantineReactTable, type MRT_ColumnDef } from 'mantine-react-table'; import { useMemo } from 'react'; import toast from 'react-hot-toast'; export default function Table({ isLoading, isFetching, response, structure, tableProperties = {}, setQuery, query, enableGlobalFilter = true, enablePagination = true, enableRowActions = false, enableDnD = false, sort, sortContext, enableRowNumbers = false, searchPlaceHolder = 'Search', searchFieldWidth = '180px', renderDetailPanel, showGlobalFilter = true, }: ITableProps) { const { data, pagination } = response; const handleFilter = (keyword: string) => { if (setQuery) { setQuery((prev: IQueryType) => { return { ...prev, search: keyword, }; }); } }; const columns = useMemo<MRT_ColumnDef[]>(() => structure, [structure]); const table = useMantineReactTable({ columns, data, ...tableProperties, mantineSearchTextInputProps: { placeholder: searchPlaceHolder, style: { width: searchFieldWidth }, variant: 'outlined', }, positionGlobalFilter: 'left', initialState: { showGlobalFilter: showGlobalFilter, }, ...(enablePagination && { manualPagination: pagination, mantinePaginationProps: { rowsPerPageOptions: ['10', '20', '25', '50'], withEdges: false, }, rowCount: pagination && pagination.totalDocuments, state: { isLoading: isLoading, showProgressBars: isFetching, pagination: { pageIndex: query?.pageIndex as number, pageSize: query?.pageSize as number, }, }, onPaginationChange: setQuery, }), ...(!enablePagination && { state: { isLoading: isLoading, showProgressBars: isFetching, }, }), enablePagination: enablePagination, enableGlobalFilter, enableFullScreenToggle: false, enableDensityToggle: false, enableHiding: false, enableRowActions: enableRowActions, positionActionsColumn: 'last', enableToolbarInternalActions: false, enableColumnActions: false, onGlobalFilterChange: handleFilter, enableSorting: enableDnD, enableRowNumbers: enableRowNumbers, ...(enableDnD && { enableRowDragging: true, enableRowOrdering: true, mantineRowDragHandleProps: ({ table }) => ({ onDragEnd: async () => { const { draggingRow, hoveredRow } = table.getState(); if (hoveredRow && draggingRow) { const rowData = [...data]; // Shallow Copy rowData.splice((hoveredRow as MRT_Row<any>).index, 0, rowData.splice(draggingRow.index, 1)[0]); const sortIds = rowData.map((row: any) => row._id); if (sort) { const response: any = await sort({ title: sortContext, sortedData: sortIds, }); if (response?.data?.status == true) { toast.success('Sorting successfully!'); } } } }, }), }), renderDetailPanel, }); return <MantineReactTable table={table} />; }
Editor is loading...
Leave a Comment