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

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.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/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

@@ -266,7 +266,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_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,
                 }),
               ),
             ),