material-react-table 2.0.0-beta.0 → 2.0.0-beta.1

package/dist/esm/types/body/MRT_TableBodyCell.d.ts

@@ -4,7 +4,7 @@ import { type MRT_Cell, type MRT_TableInstance } from '../types';
 interface Props<TData extends Record<string, any>> {
     cell: MRT_Cell<TData>;
     measureElement?: (element: HTMLTableCellElement) => void;
-    numRows: number;
+    numRows?: number;
     rowIndex: number;
     rowRef: RefObject<HTMLTableRowElement>;
     table: MRT_TableInstance<TData>;

package/dist/esm/types/body/MRT_TableBodyRow.d.ts

@@ -3,7 +3,7 @@ import { type MRT_Row, type MRT_TableInstance } from '../types';
 interface Props<TData extends Record<string, any>> {
     columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
     measureElement?: (element: HTMLTableRowElement) => void;
-    numRows: number;
+    numRows?: number;
     pinnedRowIds?: string[];
     row: MRT_Row<TData>;
     rowIndex: number;

package/dist/index.d.ts

@@ -965,7 +965,7 @@ declare const Memo_MRT_TableBody: <TData extends Record<string, any>>({ columnVi
 interface Props$R<TData extends Record<string, any>> {
     cell: MRT_Cell<TData>;
     measureElement?: (element: HTMLTableCellElement) => void;
-    numRows: number;
+    numRows?: number;
     rowIndex: number;
     rowRef: RefObject<HTMLTableRowElement>;
     table: MRT_TableInstance<TData>;
@@ -983,7 +983,7 @@ declare const MRT_TableBodyCellValue: <TData extends Record<string, any>>({ cell
 interface Props$P<TData extends Record<string, any>> {
     columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
     measureElement?: (element: HTMLTableRowElement) => void;
-    numRows: number;
+    numRows?: number;
     pinnedRowIds?: string[];
     row: MRT_Row<TData>;
     rowIndex: number;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.0-beta.0",
+  "version": "2.0.0-beta.1",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",

package/src/body/MRT_TableBody.tsx

@@ -40,6 +40,7 @@ export const MRT_TableBody = <TData extends Record<string, any>>({
     getState,
     getTopRows,
     options: {
+      createDisplayMode,
       enableGlobalFilterRankedResults,
       enablePagination,
       enableRowPinning,
@@ -64,6 +65,7 @@ export const MRT_TableBody = <TData extends Record<string, any>>({
   } = table;
   const {
     columnFilters,
+    creatingRow,
     density,
     draggingRow,
     expanded,
@@ -222,6 +224,9 @@ export const MRT_TableBody = <TData extends Record<string, any>>({
           ...(parseFromValuesOrFunc(tableBodyProps?.sx, theme) as any),
         })}
       >
+        {creatingRow && createDisplayMode === 'row' && (
+          <MRT_TableBodyRow row={creatingRow} rowIndex={-1} table={table} />
+        )}
         {tableBodyProps?.children ??
           (!rows.length ? (
             <tr

package/src/body/MRT_TableBodyCell.tsx

@@ -26,7 +26,7 @@ import { type MRT_Cell, type MRT_TableInstance } from '../types';
 interface Props<TData extends Record<string, any>> {
   cell: MRT_Cell<TData>;
   measureElement?: (element: HTMLTableCellElement) => void;
-  numRows: number;
+  numRows?: number;
   rowIndex: number;
   rowRef: RefObject<HTMLTableRowElement>;
   table: MRT_TableInstance<TData>;
@@ -63,6 +63,7 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
     setHoveredColumn,
   } = table;
   const {
+    columnSizingInfo,
     creatingRow,
     density,
     draggingColumn,
@@ -118,15 +119,21 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
     const isHoveredRow = hoveredRow?.id === row.id;
     const isFirstColumn = getIsFirstColumn(column, table);
     const isLastColumn = getIsLastColumn(column, table);
-    const isLastRow = rowIndex === numRows - 1;
+    const isLastRow = numRows && rowIndex === numRows - 1;
 
     const borderStyle =
       isDraggingColumn || isDraggingRow
         ? `1px dashed ${theme.palette.text.secondary} !important`
-        : isHoveredColumn || isHoveredRow
+        : isHoveredColumn ||
+          isHoveredRow ||
+          columnSizingInfo.isResizingColumn === column.id
         ? `2px dashed ${theme.palette.primary.main} !important`
         : undefined;
 
+    if (columnSizingInfo.isResizingColumn === column.id) {
+      return { borderRight: borderStyle };
+    }
+
     return borderStyle
       ? {
           borderBottom:
@@ -148,7 +155,14 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
           borderTop: isDraggingRow || isHoveredRow ? borderStyle : undefined,
         }
       : undefined;
-  }, [draggingColumn, draggingRow, hoveredColumn, hoveredRow, rowIndex]);
+  }, [
+    columnSizingInfo.isResizingColumn,
+    draggingColumn,
+    draggingRow,
+    hoveredColumn,
+    hoveredRow,
+    rowIndex,
+  ]);
 
   const isEditable =
     parseFromValuesOrFunc(enableEditing, row) &&

package/src/body/MRT_TableBodyRow.tsx

@@ -16,7 +16,7 @@ import { type MRT_Cell, type MRT_Row, type MRT_TableInstance } from '../types';
 interface Props<TData extends Record<string, any>> {
   columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
   measureElement?: (element: HTMLTableRowElement) => void;
-  numRows: number;
+  numRows?: number;
   pinnedRowIds?: string[];
   row: MRT_Row<TData>;
   rowIndex: number;

package/src/body/MRT_TableDetailPanel.tsx

@@ -74,8 +74,7 @@ export const MRT_TableDetailPanel = <TData extends Record<string, any>>({
             : undefined,
           borderBottom: !row.getIsExpanded() ? 'none' : undefined,
           display: layoutMode?.startsWith('grid') ? 'flex' : 'table-cell',
-          pb: row.getIsExpanded() ? '1rem' : 0,
-          pt: row.getIsExpanded() ? '1rem' : 0,
+          py: row.getIsExpanded() ? '1rem' : 0,
           transition: 'all 150ms ease-in-out',
           width: `${table.getTotalSize()}px`,
           ...(parseFromValuesOrFunc(tableCellProps?.sx, theme) as any),

package/src/head/MRT_TableHeadCell.tsx

@@ -39,6 +39,7 @@ export const MRT_TableHeadCell = <TData extends Record<string, any>>({
     setHoveredColumn,
   } = table;
   const {
+    columnSizingInfo,
     density,
     draggingColumn,
     grouping,
@@ -78,23 +79,30 @@ export const MRT_TableHeadCell = <TData extends Record<string, any>>({
     return pl;
   }, [showColumnActions, showDragHandle]);
 
-  const draggingBorder = useMemo(
-    () =>
-      draggingColumn?.id === column.id
+  const draggingBorders = useMemo(() => {
+    const borderStyle =
+      columnSizingInfo.isResizingColumn === column.id &&
+      !header.subHeaders.length
+        ? `2px solid ${theme.palette.primary.main} !important`
+        : draggingColumn?.id === column.id
         ? `1px dashed ${theme.palette.text.secondary}`
         : hoveredColumn?.id === column.id
         ? `2px dashed ${theme.palette.primary.main}`
-        : undefined,
-    [draggingColumn, hoveredColumn],
-  );
+        : undefined;
+
+    if (columnSizingInfo.isResizingColumn === column.id) {
+      return { borderRight: borderStyle };
+    }
+    const draggingBorders = borderStyle
+      ? {
+          borderLeft: borderStyle,
+          borderRight: borderStyle,
+          borderTop: borderStyle,
+        }
+      : undefined;
 
-  const draggingBorders = draggingBorder
-    ? {
-        borderLeft: draggingBorder,
-        borderRight: draggingBorder,
-        borderTop: draggingBorder,
-      }
-    : undefined;
+    return draggingBorders;
+  }, [draggingColumn, hoveredColumn, columnSizingInfo.isResizingColumn]);
 
   const handleDragEnter = (_e: DragEvent) => {
     if (enableGrouping && hoveredColumn?.id === 'drop-zone') {

package/src/head/MRT_TableHeadCellResizeHandle.tsx

@@ -42,13 +42,18 @@ export const MRT_TableHeadCellResizeHandle = <
       sx={(theme) => ({
         '&:active > hr': {
           backgroundColor: theme.palette.info.main,
-          opacity: 1,
+          opacity: header.subHeaders.length ? 1 : 0,
         },
         cursor: 'col-resize',
-        mr: density === 'compact' ? '-0.75rem' : '-1rem',
+        mr:
+          density === 'compact'
+            ? '-12px'
+            : density === 'comfortable'
+            ? '-20px'
+            : '-28px',
         position: 'absolute',
         px: '4px',
-        right: '4px',
+        right: '0',
       })}
     >
       <Divider

package/src/inputs/MRT_EditCellTextField.tsx

@@ -100,10 +100,10 @@ export const MRT_EditCellTextField = <TData extends Record<string, any>>({
         }
       }}
       label={
-        ['custom', 'modal'].includes(
+        !['custom', 'modal'].includes(
           (isCreating ? createDisplayMode : editDisplayMode) as string,
         )
-          ? column.columnDef.header
+          ? columnDef.header
           : undefined
       }
       margin="none"
@@ -119,6 +119,14 @@ export const MRT_EditCellTextField = <TData extends Record<string, any>>({
       value={value}
       variant="standard"
       {...textFieldProps}
+      InputProps={{
+        disableUnderline: editDisplayMode === 'table',
+        ...textFieldProps.InputProps,
+      }}
+      inputProps={{
+        autoComplete: 'new-password', // disable autocomplete and autofill
+        ...textFieldProps.inputProps,
+      }}
       onBlur={handleBlur}
       onChange={handleChange}
       onClick={(e) => {

package/src/table/MRT_TablePaper.tsx

@@ -52,7 +52,7 @@ export const MRT_TablePaper = <TData extends Record<string, any>>({
               right: 0,
               top: 0,
               width: '100vw',
-              zIndex: 10,
+              zIndex: 9999,
             }
           : {}),
         ...tablePaperProps?.style,

package/src/toolbar/MRT_TablePagination.tsx

@@ -62,8 +62,9 @@ export const MRT_TablePagination = <TData extends Record<string, any> = {}>({
       sx={{
         alignItems: 'center',
         display: 'flex',
+        flexWrap: 'wrap',
         gap: '8px',
-        justifyContent: 'space-between',
+        justifyContent: { md: 'space-between', sm: 'center' },
         justifySelf: 'flex-end',
         mt:
           position === 'top' &&
@@ -83,11 +84,12 @@ export const MRT_TablePagination = <TData extends Record<string, any> = {}>({
             {localization.rowsPerPage}
           </InputLabel>
           <Select
+            disableUnderline
             id="mrt-rows-per-page"
             inputProps={{ 'aria-label': localization.rowsPerPage }}
             label={localization.rowsPerPage}
             onChange={(event) => setPageSize(+event.target.value)}
-            sx={{ '&::before': { border: 'none' }, mb: 0 }}
+            sx={{ mb: 0 }}
             value={pageSize}
             variant="standard"
           >
@@ -122,6 +124,7 @@ export const MRT_TablePagination = <TData extends Record<string, any> = {}>({
       ) : paginationDisplayMode === 'default' ? (
         <>
           <Typography
+            align="center"
             sx={{ mb: 0, minWidth: '10ch', mx: '4px' }}
             variant="body2"
           >{`${