material-react-table 0.23.3 → 0.24.0

package/README.md

@@ -12,6 +12,9 @@
 <a href="https://github.com/KevinVandy/material-react-table" target="_blank_">
   <img alt="" src="https://img.shields.io/github/stars/KevinVandy/material-react-table.svg?style=social&label=Star" />
 </a>
+<a href="http://makeapullrequest.com" target="_blank_">
+  <img alt="" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square" />
+</a>
 
 ---
 
@@ -108,7 +111,7 @@ npm install material-react-table
 > Read the full usage docs [here](https://www.material-react-table.com/docs/usage/)
 
 ```jsx
-import React, { useMemo } from 'react';
+import React, { useMemo, useState, useEffect } from 'react';
 import MaterialReactTable from 'material-react-table';
 
 export default function App() {
@@ -145,6 +148,13 @@ export default function App() {
     [],
   );
 
+  //optionally, you can manage any/all of the table state yourself
+  const [rowSelection, setRowSelection] = useState({});
+
+  useEffect(() => {
+    //do something when the row selection changes
+  }, [rowSelection]);
+
   return (
     <MaterialReactTable 
       columns={columns} 
@@ -152,6 +162,8 @@ export default function App() {
       enableColumnOrdering //enable some features
       enableRowSelection 
       enableStickyHeader
+      onRowSelectionChange={setRowSelection} //hoist internal state to your own state (optional)
+      state={{ rowSelection }} //manage your own state, pass it back to the table (optional)
    />
    );
 }

package/dist/MaterialReactTable.d.ts

@@ -1,7 +1,7 @@
-import { ChangeEvent, Dispatch, FC, FocusEvent, ReactNode, SetStateAction } from 'react';
-import { AlertProps, ButtonProps, CheckboxProps, IconButtonProps, LinearProgressProps, PaperProps, SkeletonProps, TableBodyProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, TableProps, TableRowProps, TextFieldProps, ToolbarProps } from '@mui/material';
-import { Cell, Column, ColumnDef, FilterFn, Header, HeaderGroup, OnChangeFn, Row, SortingFn, Table, TableOptions, TableState } from '@tanstack/react-table';
-import { Options as VirtualizerOptions } from 'react-virtual';
+import { ChangeEvent, Dispatch, DragEvent, FC, FocusEvent, ReactNode, SetStateAction } from 'react';
+import type { AlertProps, ButtonProps, CheckboxProps, IconButtonProps, LinearProgressProps, PaperProps, SkeletonProps, TableBodyProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, TableProps, TableRowProps, TextFieldProps, ToolbarProps } from '@mui/material';
+import type { Cell, Column, ColumnDef, FilterFn, Header, HeaderGroup, OnChangeFn, Row, SortingFn, Table, TableOptions, TableState } from '@tanstack/react-table';
+import type { Options as VirtualizerOptions } from 'react-virtual';
 import { MRT_Localization } from './localization';
 import { MRT_Icons } from './icons';
 import { MRT_FilterFns } from './filtersFns';
@@ -43,6 +43,7 @@ export declare type MRT_TableInstance<TData extends Record<string, any> = {}> =
         localization: MRT_Localization;
     };
     setCurrentDraggingColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
+    setCurrentDraggingRow: Dispatch<SetStateAction<MRT_Row<TData> | null>>;
     setCurrentEditingCell: Dispatch<SetStateAction<MRT_Cell | null>>;
     setCurrentEditingRow: Dispatch<SetStateAction<MRT_Row | null>>;
     setCurrentFilterFns: Dispatch<SetStateAction<{
@@ -50,6 +51,7 @@ export declare type MRT_TableInstance<TData extends Record<string, any> = {}> =
     }>>;
     setCurrentGlobalFilterFn: Dispatch<SetStateAction<MRT_FilterOption>>;
     setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
+    setCurrentHoveredRow: Dispatch<SetStateAction<MRT_Row | null>>;
     setDensity: Dispatch<SetStateAction<'comfortable' | 'compact' | 'spacious'>>;
     setIsFullScreen: Dispatch<SetStateAction<boolean>>;
     setShowAlertBanner: Dispatch<SetStateAction<boolean>>;
@@ -58,11 +60,13 @@ export declare type MRT_TableInstance<TData extends Record<string, any> = {}> =
 };
 export declare type MRT_TableState<TData extends Record<string, any> = {}> = TableState & {
     currentDraggingColumn: MRT_Column<TData> | null;
+    currentDraggingRow: MRT_Row<TData> | null;
     currentEditingCell: MRT_Cell<TData> | null;
     currentEditingRow: MRT_Row<TData> | null;
     currentFilterFns: Record<string, MRT_FilterOption>;
     currentGlobalFilterFn: Record<string, MRT_FilterOption>;
     currentHoveredColumn: MRT_Column<TData> | null;
+    currentHoveredRow: MRT_Row<TData> | null;
     density: 'comfortable' | 'compact' | 'spacious';
     isFullScreen: boolean;
     isLoading: boolean;
@@ -123,6 +127,7 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
     columns?: MRT_ColumnDef<TData>[];
     enableClickToCopy?: boolean;
     enableColumnActions?: boolean;
+    enableColumnDragging?: boolean;
     enableColumnFilterChangeMode?: boolean;
     enableColumnOrdering?: boolean;
     enableEditing?: boolean;
@@ -170,6 +175,10 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
         table: MRT_TableInstance<TData>;
         column: MRT_Column<TData>;
     }) => IconButtonProps);
+    muiTableHeadCellDragHandleProps?: IconButtonProps | (({ table, column, }: {
+        table: MRT_TableInstance<TData>;
+        column: MRT_Column<TData>;
+    }) => IconButtonProps);
     muiTableHeadCellFilterTextFieldProps?: TextFieldProps | (({ table, column, }: {
         table: MRT_TableInstance<TData>;
         column: MRT_Column<TData>;
@@ -206,11 +215,10 @@ export declare type MRT_Header<TData extends Record<string, any> = {}> = Omit<He
 export declare type MRT_HeaderGroup<TData extends Record<string, any> = {}> = Omit<HeaderGroup<TData>, 'headers'> & {
     headers: MRT_Header<TData>[];
 };
-export declare type MRT_Row<TData extends Record<string, any> = {}> = Omit<Row<TData>, 'getVisibleCells' | 'getAllCells' | 'subRows' | 'original' | '_valuesCache'> & {
+export declare type MRT_Row<TData extends Record<string, any> = {}> = Omit<Row<TData>, 'getVisibleCells' | 'getAllCells' | 'subRows' | '_valuesCache'> & {
     getAllCells: () => MRT_Cell<TData>[];
     getVisibleCells: () => MRT_Cell<TData>[];
     subRows?: MRT_Row<TData>[];
-    original: TData;
     _valuesCache?: TData;
 };
 export declare type MRT_Cell<TData extends Record<string, any> = {}> = Omit<Cell<TData, unknown>, 'column' | 'row'> & {
@@ -221,10 +229,20 @@ export declare type MRT_SortingOption = keyof typeof MRT_SortingFns;
 export declare type MRT_SortingFn<TData extends Record<string, any> = {}> = SortingFn<TData> | MRT_SortingOption;
 export declare type MRT_FilterOption = keyof typeof MRT_FilterFns;
 export declare type MRT_FilterFn<TData extends Record<string, any> = {}> = FilterFn<TData> | MRT_FilterOption;
+/**
+ * `columns` and `data` props are the only required props, but there are over 150 other optional props.
+ *
+ * See more info on creating columns and data on the official docs site:
+ * @link https://www.material-react-table.com/docs/usage
+ *
+ * See the full props list on the official docs site:
+ * @link https://www.material-react-table.com/docs/api/props
+ */
 export declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = MRT_TableOptions<TData> & {
     editingMode?: 'table' | 'row' | 'cell';
     enableClickToCopy?: boolean;
     enableColumnActions?: boolean;
+    enableColumnDragging?: boolean;
     enableColumnFilterChangeMode?: boolean;
     enableColumnOrdering?: boolean;
     enableDensityToggle?: boolean;
@@ -235,7 +253,9 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     enableGlobalFilterRankedResults?: boolean;
     enablePagination?: boolean;
     enableRowActions?: boolean;
+    enableRowDragging?: boolean;
     enableRowNumbers?: boolean;
+    enableRowOrdering?: boolean;
     enableRowVirtualization?: boolean;
     enableSelectAll?: boolean;
     enableStickyHeader?: boolean;
@@ -255,7 +275,8 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
         table: MRT_TableInstance<TData>;
         row: MRT_Row<TData>;
     }) => IconButtonProps);
-    muiLinearProgressProps?: LinearProgressProps | (({ table, }: {
+    muiLinearProgressProps?: LinearProgressProps | (({ isTopToolbar, table, }: {
+        isTopToolbar: boolean;
         table: MRT_TableInstance<TData>;
     }) => LinearProgressProps);
     muiSearchTextFieldProps?: TextFieldProps | (({ table }: {
@@ -284,6 +305,10 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
         table: MRT_TableInstance<TData>;
         cell: MRT_Cell<TData>;
     }) => SkeletonProps);
+    muiTableBodyRowDragHandleProps?: IconButtonProps | (({ table, row, }: {
+        table: MRT_TableInstance<TData>;
+        row: MRT_Row<TData>;
+    }) => IconButtonProps);
     muiTableBodyProps?: TableBodyProps | (({ table }: {
         table: MRT_TableInstance<TData>;
     }) => TableBodyProps);
@@ -313,6 +338,10 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
         table: MRT_TableInstance<TData>;
         column: MRT_Column<TData>;
     }) => IconButtonProps);
+    muiTableHeadCellDragHandleProps?: IconButtonProps | (({ table, column, }: {
+        table: MRT_TableInstance<TData>;
+        column: MRT_Column<TData>;
+    }) => IconButtonProps);
     muiTableHeadCellFilterTextFieldProps?: TextFieldProps | (({ table, column, }: {
         table: MRT_TableInstance<TData>;
         column: MRT_Column<TData>;
@@ -356,7 +385,13 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
         cell: MRT_Cell<TData>;
         table: MRT_TableInstance<TData>;
     }) => void;
+    onColumnDrop?: ({ event, draggedColumn, targetColumn, }: {
+        event: DragEvent<HTMLButtonElement>;
+        draggedColumn: MRT_Column<TData>;
+        targetColumn: MRT_Column<TData> | null;
+    }) => void;
     onCurrentDraggingColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
+    onCurrentDraggingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
     onCurrentEditingCellChange?: OnChangeFn<MRT_Cell<TData> | null>;
     onCurrentEditingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
     onCurrentFilterFnsChange?: OnChangeFn<{
@@ -364,12 +399,18 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     }>;
     onCurrentGlobalFilterFnChange?: OnChangeFn<MRT_FilterOption>;
     onCurrentHoveredColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
+    onCurrentHoveredRowChange?: OnChangeFn<MRT_Row<TData> | null>;
     onEditRowSubmit?: ({ row, table, }: {
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
     }) => Promise<void> | void;
     onDensityChange?: OnChangeFn<boolean>;
     onIsFullScreenChange?: OnChangeFn<boolean>;
+    onRowDrop?: ({ event, draggedRow, targetRow, }: {
+        event: DragEvent<HTMLButtonElement>;
+        draggedRow: MRT_Row<TData>;
+        targetRow: MRT_Row<TData> | null;
+    }) => void;
     onShowAlertBannerChange?: OnChangeFn<boolean>;
     onShowFiltersChange?: OnChangeFn<boolean>;
     onShowGlobalFilterChange?: OnChangeFn<boolean>;
@@ -421,13 +462,4 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     virtualizerProps?: Partial<VirtualizerOptions<HTMLDivElement>>;
 };
 declare const _default: <TData extends Record<string, any> = {}>({ autoResetExpanded, columnResizeMode, defaultColumn, editingMode, enableColumnActions, enableColumnFilterChangeMode, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterChangeMode, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarBottom, enableToolbarInternalActions, enableToolbarTop, icons, localization, positionActionsColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, rowNumberMode, selectAllMode, ...rest }: MaterialReactTableProps<TData>) => JSX.Element;
-/**
- * `columns` and `data` props are the only required props, but there are over 150 other optional props.
- *
- * See more info on creating columns and data on the official docs site:
- * @link https://www.material-react-table.com/docs/usage
- *
- * See the full props list on the official docs site:
- * @link https://www.material-react-table.com/docs/api/props
- */
 export default _default;

package/dist/body/MRT_TableBodyCell.d.ts

@@ -1,9 +1,10 @@
-import { FC } from 'react';
+import { FC, RefObject } from 'react';
 import type { MRT_Cell, MRT_TableInstance } from '..';
 interface Props {
     cell: MRT_Cell;
     enableHover?: boolean;
     rowIndex: number;
+    rowRef: RefObject<HTMLTableRowElement>;
     table: MRT_TableInstance;
 }
 export declare const MRT_TableBodyCell: FC<Props>;

package/dist/body/MRT_TableBodyRowGrabHandle.d.ts

@@ -0,0 +1,9 @@
+import { FC, RefObject } from 'react';
+import { MRT_Cell, MRT_TableInstance } from '..';
+interface Props {
+    cell: MRT_Cell;
+    rowRef: RefObject<HTMLTableRowElement>;
+    table: MRT_TableInstance;
+}
+export declare const MRT_TableBodyRowGrabHandle: FC<Props>;
+export {};

package/dist/buttons/MRT_GrabHandleButton.d.ts

@@ -1,8 +1,10 @@
+import { IconButtonProps } from '@mui/material';
 import { DragEventHandler, FC } from 'react';
 import { MRT_TableInstance } from '..';
 interface Props {
-    handleDragStart: DragEventHandler<HTMLButtonElement>;
-    handleDragEnd: DragEventHandler<HTMLButtonElement>;
+    iconButtonProps?: IconButtonProps;
+    onDragStart: DragEventHandler<HTMLButtonElement>;
+    onDragEnd: DragEventHandler<HTMLButtonElement>;
     table: MRT_TableInstance;
 }
 export declare const MRT_GrabHandleButton: FC<Props>;

package/dist/head/MRT_TableHeadCellGrabHandle.d.ts

@@ -0,0 +1,9 @@
+import { FC, RefObject } from 'react';
+import type { MRT_Column, MRT_TableInstance } from '..';
+interface Props {
+    column: MRT_Column;
+    table: MRT_TableInstance;
+    tableHeadCellRef: RefObject<HTMLTableCellElement>;
+}
+export declare const MRT_TableHeadCellGrabHandle: FC<Props>;
+export {};

package/dist/localization.d.ts

@@ -34,6 +34,7 @@ export interface MRT_Localization {
     hideColumn: string;
     max: string;
     min: string;
+    move: string;
     pinToLeft: string;
     pinToRight: string;
     resetColumnSize: string;