material-react-table 0.9.3 → 0.9.4

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.9.3",
+  "version": "0.9.4",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI implementation of TanStack React Table, inspired by material-table and the MUI X DataGrid, written from the ground up in TypeScript.",

package/src/MaterialReactTable.tsx

@@ -767,6 +767,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
         IconButtonProps & { tableInstance: MRT_TableInstance<D> }
       >;
     }) => ReactNode;
+    rowNumberMode?: 'original' | 'static';
     selectAllMode?: 'all' | 'page';
     tableId?: string;
   };
@@ -806,6 +807,7 @@ export default <D extends Record<string, any> = {}>({
   positionGlobalFilter = 'right',
   positionToolbarActions = 'top',
   positionToolbarAlertBanner = 'top',
+  rowNumberMode = 'original',
   selectAllMode = 'all',
   ...rest
 }: MaterialReactTableProps<D>) => (
@@ -844,6 +846,7 @@ export default <D extends Record<string, any> = {}>({
     positionPagination={positionPagination}
     positionToolbarActions={positionToolbarActions}
     positionToolbarAlertBanner={positionToolbarAlertBanner}
+    rowNumberMode={rowNumberMode}
     selectAllMode={selectAllMode}
     {...rest}
   />

package/src/body/MRT_TableBody.tsx

@@ -55,7 +55,7 @@ export const MRT_TableBody: FC<Props> = ({
       )}
       {/* @ts-ignore */}
       {(enableRowVirtualization ? virtualRows : rows).map(
-        (rowOrVirtualRow: any) => {
+        (rowOrVirtualRow: any, rowIndex: number) => {
           const row = enableRowVirtualization
             ? (rows[rowOrVirtualRow.index] as MRT_Row)
             : (rowOrVirtualRow as MRT_Row);
@@ -63,6 +63,9 @@ export const MRT_TableBody: FC<Props> = ({
             <MRT_TableBodyRow
               key={row.id}
               row={row}
+              rowIndex={
+                enableRowVirtualization ? rowOrVirtualRow.index : rowIndex
+              }
               tableInstance={tableInstance}
             />
           );

package/src/body/MRT_TableBodyCell.tsx

@@ -9,12 +9,14 @@ import type { MRT_Cell, MRT_Column, MRT_TableInstance } from '..';
 interface Props {
   cell: MRT_Cell;
   enableHover?: boolean;
+  rowIndex: number;
   tableInstance: MRT_TableInstance;
 }
 
 export const MRT_TableBodyCell: FC<Props> = ({
   cell,
   enableHover,
+  rowIndex,
   tableInstance,
 }) => {
   const {
@@ -25,10 +27,12 @@ export const MRT_TableBodyCell: FC<Props> = ({
       enableColumnOrdering,
       enableColumnResizing,
       enableEditing,
+      enableRowNumbers,
       enableRowVirtualization,
       muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps,
       onMrtCellClick,
+      rowNumberMode,
       tableId,
     },
     setColumnOrder,
@@ -206,6 +210,10 @@ export const MRT_TableBodyCell: FC<Props> = ({
             width={skeletonWidth}
             {...muiTableBodyCellSkeletonProps}
           />
+        ) : enableRowNumbers &&
+          rowNumberMode === 'static' &&
+          column.id === 'mrt-row-numbers' ? (
+          rowIndex + 1
         ) : columnDefType === 'display' ? (
           columnDef.Cell?.({ cell, tableInstance })
         ) : cell.getIsPlaceholder() ||

package/src/body/MRT_TableBodyRow.tsx

@@ -6,10 +6,11 @@ import type { MRT_Row, MRT_TableInstance } from '..';
 
 interface Props {
   row: MRT_Row;
+  rowIndex: number;
   tableInstance: MRT_TableInstance;
 }
 
-export const MRT_TableBodyRow: FC<Props> = ({ row, tableInstance }) => {
+export const MRT_TableBodyRow: FC<Props> = ({ row, rowIndex, tableInstance }) => {
   const {
     getIsSomeColumnsPinned,
     options: { muiTableBodyRowProps, onMrtRowClick, renderDetailPanel },
@@ -48,6 +49,7 @@ export const MRT_TableBodyRow: FC<Props> = ({ row, tableInstance }) => {
             cell={cell}
             key={cell.id}
             enableHover={tableRowProps?.hover !== false}
+            rowIndex={rowIndex}
             tableInstance={tableInstance}
           />
         ))}