60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
import React, { useEffect, useImperativeHandle } from "react";
|
|
import {
|
|
MantineReactTable,
|
|
MRT_ColumnDef,
|
|
MRT_RowData,
|
|
MRT_TableInstance,
|
|
MRT_TableOptions,
|
|
useMantineReactTable,
|
|
} from "mantine-react-table";
|
|
import { MRT_Localization_RU } from "mantine-react-table/locales/ru";
|
|
|
|
type Props<T extends MRT_RowData> = {
|
|
data: T[];
|
|
onSelectionChange?: (selectedRows: T[]) => void;
|
|
columns: MRT_ColumnDef<T>[];
|
|
restProps?: MRT_TableOptions<T>;
|
|
striped?: boolean | "odd" | "even";
|
|
};
|
|
|
|
export type BaseTableRef<T extends MRT_RowData> = {
|
|
getTable: () => MRT_TableInstance<T>;
|
|
};
|
|
|
|
function BaseTableInner<T extends MRT_RowData>(
|
|
{ data, columns, restProps, onSelectionChange, striped = false }: Props<T>,
|
|
ref: React.Ref<BaseTableRef<T>>
|
|
) {
|
|
const table = useMantineReactTable<T>({
|
|
localization: MRT_Localization_RU,
|
|
enablePagination: false,
|
|
data,
|
|
columns,
|
|
mantineTableProps: {
|
|
striped,
|
|
highlightOnHover: false,
|
|
},
|
|
enableTopToolbar: false,
|
|
enableBottomToolbar: false,
|
|
enableRowSelection: onSelectionChange !== undefined,
|
|
...restProps,
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (!onSelectionChange) return;
|
|
onSelectionChange(
|
|
table.getSelectedRowModel().rows.map(r => r.original)
|
|
);
|
|
}, [onSelectionChange, table.getState().rowSelection]);
|
|
|
|
useImperativeHandle(ref, () => ({ getTable: () => table }));
|
|
|
|
return <MantineReactTable table={table} />;
|
|
}
|
|
|
|
const BaseTable = React.forwardRef(BaseTableInner) as <T extends MRT_RowData>(
|
|
props: Props<T> & { ref?: React.Ref<BaseTableRef<T>> }
|
|
) => React.ReactElement | null;
|
|
|
|
export default BaseTable;
|