material-react-table 1.5.0-beta.0 → 1.5.0-beta.2

package/dist/esm/types/MaterialReactTable.d.ts

@@ -709,5 +709,5 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> = Om
      */
     virtualizerProps?: any;
 };
-declare const MaterialReactTable: <TData extends Record<string, any> = {}>({ aggregationFns, autoResetExpanded, columnResizeMode, defaultColumn, defaultDisplayColumn, editingMode, enableBottomToolbar, enableColumnActions, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarInternalActions, enableTopToolbar, filterFns, icons, layoutMode, localization, positionActionsColumn, positionExpandColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, rowNumberMode, selectAllMode, sortingFns, ...rest }: MaterialReactTableProps<TData>) => JSX.Element;
+declare const MaterialReactTable: <TData extends Record<string, any> = {}>({ aggregationFns, autoResetExpanded, columnResizeMode, defaultColumn, defaultDisplayColumn, editingMode, enableBottomToolbar, enableColumnActions, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarInternalActions, enableTopToolbar, filterFns, icons, layoutMode, localization, manualFiltering, manualGrouping, manualPagination, manualSorting, positionActionsColumn, positionExpandColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, rowNumberMode, selectAllMode, sortingFns, ...rest }: MaterialReactTableProps<TData>) => JSX.Element;
 export default MaterialReactTable;

package/dist/index.d.ts

@@ -832,7 +832,7 @@ type MaterialReactTableProps<TData extends Record<string, any> = {}> = Omit<Part
      */
     virtualizerProps?: any;
 };
-declare const MaterialReactTable: <TData extends Record<string, any> = {}>({ aggregationFns, autoResetExpanded, columnResizeMode, defaultColumn, defaultDisplayColumn, editingMode, enableBottomToolbar, enableColumnActions, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarInternalActions, enableTopToolbar, filterFns, icons, layoutMode, localization, positionActionsColumn, positionExpandColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, rowNumberMode, selectAllMode, sortingFns, ...rest }: MaterialReactTableProps<TData>) => JSX.Element;
+declare const MaterialReactTable: <TData extends Record<string, any> = {}>({ aggregationFns, autoResetExpanded, columnResizeMode, defaultColumn, defaultDisplayColumn, editingMode, enableBottomToolbar, enableColumnActions, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarInternalActions, enableTopToolbar, filterFns, icons, layoutMode, localization, manualFiltering, manualGrouping, manualPagination, manualSorting, positionActionsColumn, positionExpandColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, rowNumberMode, selectAllMode, sortingFns, ...rest }: MaterialReactTableProps<TData>) => JSX.Element;
 
 interface Props$b<TData extends Record<string, any> = {}> {
     cell: MRT_Cell<TData>;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.0-beta.0",
+  "version": "1.5.0-beta.2",
   "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/MaterialReactTable.tsx

@@ -1127,6 +1127,10 @@ const MaterialReactTable = <TData extends Record<string, any> = {}>({
   icons,
   layoutMode = 'semantic',
   localization,
+  manualFiltering,
+  manualGrouping,
+  manualPagination,
+  manualSorting,
   positionActionsColumn = 'first',
   positionExpandColumn = 'first',
   positionGlobalFilter = 'right',
@@ -1138,7 +1142,7 @@ const MaterialReactTable = <TData extends Record<string, any> = {}>({
   sortingFns,
   ...rest
 }: MaterialReactTableProps<TData>) => {
-  const _icons = useMemo(() => ({ ...MRT_Default_Icons, ...icons }), []);
+  const _icons = useMemo(() => ({ ...MRT_Default_Icons, ...icons }), [icons]);
   const _localization = useMemo(
     () => ({
       ...MRT_Localization_EN,
@@ -1154,14 +1158,14 @@ const MaterialReactTable = <TData extends Record<string, any> = {}>({
   const _sortingFns = useMemo(() => ({ ...MRT_SortingFns, ...sortingFns }), []);
   const _defaultColumn = useMemo<Partial<MRT_ColumnDef<TData>>>(
     () => ({ ...MRT_DefaultColumn, ...defaultColumn }),
-    [],
+    [defaultColumn],
   );
   const _defaultDisplayColumn = useMemo<Partial<MRT_ColumnDef<TData>>>(
     () => ({
       ...(MRT_DefaultDisplayColumn as Partial<MRT_ColumnDef<TData>>),
       ...defaultDisplayColumn,
     }),
-    [],
+    [defaultDisplayColumn],
   );
 
   if (rest.enableRowVirtualization || rest.enableColumnVirtualization) {
@@ -1169,6 +1173,13 @@ const MaterialReactTable = <TData extends Record<string, any> = {}>({
     enableStickyHeader = true;
   }
 
+  if (!rest.data?.length) {
+    manualFiltering = true;
+    manualGrouping = true;
+    manualPagination = true;
+    manualSorting = true;
+  }
+
   return (
     <MRT_TableRoot
       aggregationFns={_aggregationFns}
@@ -1206,6 +1217,10 @@ const MaterialReactTable = <TData extends Record<string, any> = {}>({
       icons={_icons}
       layoutMode={layoutMode}
       localization={_localization}
+      manualFiltering={manualFiltering}
+      manualGrouping={manualGrouping}
+      manualPagination={manualPagination}
+      manualSorting={manualSorting}
       positionActionsColumn={positionActionsColumn}
       positionExpandColumn={positionExpandColumn}
       positionGlobalFilter={positionGlobalFilter}

package/src/column.utils.ts

@@ -221,7 +221,7 @@ export const getIsFirstRightPinnedColumn = (column: MRT_Column) => {
 
 export const getTotalRight = (table: MRT_TableInstance, column: MRT_Column) => {
   return (
-    (table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 160
+    (table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 200
   );
 };
 
@@ -253,6 +253,26 @@ export const getCommonCellStyles = ({
     column.getIsPinned() === 'left'
       ? `${column.getStart('left')}px`
       : undefined,
+  ml:
+    table.options.enableColumnVirtualization &&
+    column.getIsPinned() === 'left' &&
+    column.getPinnedIndex() === 0
+      ? `-${
+          column.getSize() *
+          (table.getState().columnPinning.left?.length ?? 1) *
+          1.2
+        }px`
+      : undefined,
+  mr:
+    table.options.enableColumnVirtualization &&
+    column.getIsPinned() === 'right' &&
+    column.getPinnedIndex() === table.getVisibleLeafColumns().length - 1
+      ? `-${
+          column.getSize() *
+          (table.getState().columnPinning.right?.length ?? 1) *
+          1.2
+        }px`
+      : undefined,
   opacity:
     table.getState().draggingColumn?.id === column.id ||
     table.getState().hoveredColumn?.id === column.id
@@ -266,7 +286,10 @@ export const getCommonCellStyles = ({
     column.getIsPinned() === 'right'
       ? `${getTotalRight(table, column)}px`
       : undefined,
-  transition: `all ${column.getIsResizing() ? 0 : '150ms'} ease-in-out`,
+  transition:
+    table.options.enableColumnVirtualization || column.getIsResizing()
+      ? 'none'
+      : `all 150ms ease-in-out`,
   ...(tableCellProps?.sx instanceof Function
     ? tableCellProps.sx(theme)
     : (tableCellProps?.sx as any)),

package/src/footer/MRT_TableFooterCell.tsx

@@ -8,10 +8,7 @@ interface Props {
   table: MRT_TableInstance;
 }
 
-export const MRT_TableFooterCell: FC<Props> = ({
-  footer,
-  table,
-}) => {
+export const MRT_TableFooterCell: FC<Props> = ({ footer, table }) => {
   const {
     getState,
     options: { layoutMode, muiTableFooterCellProps },

package/src/footer/MRT_TableFooterRow.tsx

@@ -59,11 +59,7 @@ export const MRT_TableFooterRow: FC<Props> = ({
           : (footerOrVirtualFooter as MRT_Header);
 
         return (
-          <MRT_TableFooterCell
-            footer={footer}
-            key={footer.id}
-            table={table}
-          />
+          <MRT_TableFooterCell footer={footer} key={footer.id} table={table} />
         );
       })}
       {virtualPaddingRight ? (

package/src/head/MRT_TableHeadCell.tsx

@@ -17,10 +17,7 @@ interface Props {
   table: MRT_TableInstance;
 }
 
-export const MRT_TableHeadCell: FC<Props> = ({
-  header,
-  table,
-}) => {
+export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
   const theme = useTheme();
   const {
     getState,

package/src/head/MRT_TableHeadRow.tsx

@@ -51,11 +51,7 @@ export const MRT_TableHeadRow: FC<Props> = ({
           : (headerOrVirtualHeader as MRT_Header);
 
         return (
-          <MRT_TableHeadCell
-            header={header}
-            key={header.id}
-            table={table}
-          />
+          <MRT_TableHeadCell header={header} key={header.id} table={table} />
         );
       })}
       {virtualPaddingRight ? (

package/src/table/MRT_Table.tsx

@@ -52,25 +52,23 @@ export const MRT_Table: FC<Props> = ({ table }) => {
         .getRowModel()
         .rows[0]?.getCenterVisibleCells()
         ?.slice(0, 16)
-        ?.map((cell) => cell.column.getSize() * 1.25) ?? [];
+        ?.map((cell) => cell.column.getSize() * 1.2) ?? [];
     return columnsWidths.reduce((a, b) => a + b, 0) / columnsWidths.length;
   }, [table.getRowModel().rows, columnPinning, columnVisibility]);
 
-  const pinnedColumnIndexes = useMemo(
+  const [leftPinnedIndexes, rightPinnedIndexes] = useMemo(
     () =>
       enableColumnVirtualization && enablePinning
         ? [
-            ...table.getLeftFlatHeaders().map((h) => h.column.getPinnedIndex()),
-            ...table
-              .getRightFlatHeaders()
+            table.getLeftLeafColumns().map((c) => c.getPinnedIndex()),
+            table
+              .getRightLeafColumns()
               .map(
-                (h) =>
-                  table.getVisibleFlatColumns().length -
-                  h.column.getPinnedIndex() -
-                  1,
+                (c) =>
+                  table.getVisibleLeafColumns().length - c.getPinnedIndex() - 1,
               ),
           ]
-        : [],
+        : [[], []],
     [columnPinning, enableColumnVirtualization, enablePinning],
   );
 
@@ -78,21 +76,20 @@ export const MRT_Table: FC<Props> = ({ table }) => {
     | Virtualizer<HTMLDivElement, HTMLTableCellElement>
     | undefined = enableColumnVirtualization
     ? useVirtualizer({
-        count: table.getRowModel().rows[0].getVisibleCells().length,
+        count: table.getVisibleLeafColumns().length,
         estimateSize: () => averageColumnWidth,
         getScrollElement: () => tableContainerRef.current,
         horizontal: true,
-        measureElement: (element) => element?.getBoundingClientRect().width,
         overscan: 3,
         rangeExtractor: useCallback(
-          (range: Range) =>
-            [
-              ...new Set([
-                ...pinnedColumnIndexes,
-                ...defaultRangeExtractor(range),
-              ]),
-            ].sort((a, b) => a - b),
-          [pinnedColumnIndexes],
+          (range: Range) => [
+            ...new Set([
+              ...leftPinnedIndexes,
+              ...defaultRangeExtractor(range),
+              ...rightPinnedIndexes,
+            ]),
+          ],
+          [leftPinnedIndexes, rightPinnedIndexes],
         ),
         ...vProps,
       })
@@ -110,13 +107,11 @@ export const MRT_Table: FC<Props> = ({ table }) => {
   let virtualPaddingRight: number | undefined;
 
   if (columnVirtualizer && virtualColumns?.length) {
-    virtualPaddingLeft = virtualColumns?.length
-      ? virtualColumns[0]?.start || 0
-      : 0;
-    virtualPaddingRight = virtualColumns?.length
-      ? columnVirtualizer.getTotalSize() -
-        (virtualColumns[virtualColumns.length - 1]?.end || 0)
-      : 0;
+    virtualPaddingLeft = virtualColumns[leftPinnedIndexes.length]?.start ?? 0;
+    virtualPaddingRight =
+      columnVirtualizer.getTotalSize() -
+      (virtualColumns[virtualColumns.length - 1 - rightPinnedIndexes.length]
+        ?.end ?? 0);
   }
 
   const props = {

package/src/table/MRT_TableRoot.tsx

@@ -239,7 +239,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
               {},
               ...getAllLeafColumnDefs(props.columns as MRT_ColumnDef[]).map(
                 (col) => ({
-                  [col.id ?? col.accessorKey ?? '']: null,
+                  [getColumnId(col)]: null,
                 }),
               ),
             ),