@tanstack/react-table 8.0.0-beta.3 → 8.0.0-beta.4

package/build/cjs/react-table/src/index.js

@@ -66,6 +66,7 @@ function useTableInstance(table, options) {
     onStateChange: () => {},
     // noop
     render,
+    renderFallbackValue: null,
     ...options
   }; // Create a new table instance and store it in state
 

package/build/cjs/react-table/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/index.tsx"],"sourcesContent":["import * as React from 'react'\nexport * from '@tanstack/table-core'\n\nimport {\n  createTableInstance,\n  TableOptions,\n  TableInstance,\n  Table,\n  TableGenerics,\n  createTableFactory,\n  Overwrite,\n  PartialKeys,\n  TableOptionsResolved,\n} from '@tanstack/table-core'\n\nexport type Renderable<TProps> =\n  | React.ReactNode\n  | React.FunctionComponent<TProps>\n  | React.Component<TProps>\n\nexport type Render = <TProps extends {}>(\n  Comp: Renderable<TProps>,\n  props: TProps\n) => React.ReactNode | JSX.Element\n\nexport type ReactTableGenerics = Overwrite<\n  TableGenerics,\n  { Renderer: Render; Rendered: ReturnType<Render> }\n>\n\n//\n\nexport const render: Render = (Comp, props) =>\n  !Comp ? null : isReactComponent(Comp) ? <Comp {...props} /> : Comp\n\nfunction isReactComponent(component: unknown): component is React.FC {\n  return (\n    isClassComponent(component) ||\n    typeof component === 'function' ||\n    isExoticComponent(component)\n  )\n}\n\nfunction isClassComponent(component: any) {\n  return (\n    typeof component === 'function' &&\n    (() => {\n      const proto = Object.getPrototypeOf(component)\n      return proto.prototype && proto.prototype.isReactComponent\n    })()\n  )\n}\n\nfunction isExoticComponent(component: any) {\n  return (\n    typeof component === 'object' &&\n    typeof component.$$typeof === 'symbol' &&\n    ['react.memo', 'react.forward_ref'].includes(component.$$typeof.description)\n  )\n}\n\nexport const createTable = createTableFactory({ render })\n\n// const useIsomorphicLayoutEffect =\n//   typeof document !== 'undefined' ? React.useLayoutEffect : React.useEffect\n\nexport type UseTableInstanceOptions<TGenerics extends ReactTableGenerics> =\n  TableOptions<TGenerics>\n\nexport function useTableInstance<TGenerics extends ReactTableGenerics>(\n  table: Table<TGenerics>,\n  options: UseTableInstanceOptions<TGenerics>\n): TableInstance<TGenerics> {\n  // Compose in the generic options to the user options\n  const resolvedOptions: TableOptionsResolved<TGenerics> = {\n    ...table.options,\n    state: {}, // Dummy state\n    onStateChange: () => {}, // noop\n    render,\n    ...options,\n  }\n\n  // Create a new table instance and store it in state\n  const [instanceRef] = React.useState(() => ({\n    current: createTableInstance<TGenerics>(resolvedOptions),\n  }))\n\n  // By default, manage table state here using the instance's initial state\n  const [state, setState] = React.useState(\n    () => instanceRef.current.initialState\n  )\n\n  // Compose the default state above with any user state. This will allow the user\n  // to only control a subset of the state if desired.\n  instanceRef.current.setOptions(prev => ({\n    ...prev,\n    ...options,\n    state: {\n      ...state,\n      ...options.state,\n    },\n    // Similarly, we'll maintain both our internal state and any user-provided\n    // state.\n    onStateChange: updater => {\n      setState(updater)\n      options.onStateChange?.(updater)\n    },\n  }))\n\n  return instanceRef.current\n}\n"],"names":["render","Comp","props","isReactComponent","React","component","isClassComponent","isExoticComponent","proto","Object","getPrototypeOf","prototype","$$typeof","includes","description","createTable","createTableFactory","useTableInstance","table","options","resolvedOptions","state","onStateChange","instanceRef","useState","current","createTableInstance","setState","initialState","setOptions","prev","updater"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA;AAEO,MAAMA,MAAc,GAAG,CAACC,IAAD,EAAOC,KAAP,KAC5B,CAACD,IAAD,GAAQ,IAAR,GAAeE,gBAAgB,CAACF,IAAD,CAAhB,gBAAyBG,gBAAA,CAAA,aAAA,CAAC,IAAD,EAAUF,KAAV,CAAzB,GAA+CD,KADzD;;AAGP,SAASE,gBAAT,CAA0BE,SAA1B,EAAqE;AACnE,EAAA,OACEC,gBAAgB,CAACD,SAAD,CAAhB,IACA,OAAOA,SAAP,KAAqB,UADrB,IAEAE,iBAAiB,CAACF,SAAD,CAHnB,CAAA;AAKD,CAAA;;AAED,SAASC,gBAAT,CAA0BD,SAA1B,EAA0C;AACxC,EAAA,OACE,OAAOA,SAAP,KAAqB,UAArB,IACA,CAAC,MAAM;AACL,IAAA,MAAMG,KAAK,GAAGC,MAAM,CAACC,cAAP,CAAsBL,SAAtB,CAAd,CAAA;AACA,IAAOG,OAAAA,KAAK,CAACG,SAAN,IAAmBH,KAAK,CAACG,SAAN,CAAgBR,gBAA1C,CAAA;AACD,GAHD,GAFF,CAAA;AAOD,CAAA;;AAED,SAASI,iBAAT,CAA2BF,SAA3B,EAA2C;AACzC,EACE,OAAA,OAAOA,SAAP,KAAqB,QAArB,IACA,OAAOA,SAAS,CAACO,QAAjB,KAA8B,QAD9B,IAEA,CAAC,YAAD,EAAe,mBAAf,CAAA,CAAoCC,QAApC,CAA6CR,SAAS,CAACO,QAAV,CAAmBE,WAAhE,CAHF,CAAA;AAKD,CAAA;;AAEYC,MAAAA,WAAW,GAAGC,wBAAkB,CAAC;AAAEhB,EAAAA,MAAAA;AAAF,CAAD;AAG7C;;AAKO,SAASiB,gBAAT,CACLC,KADK,EAELC,OAFK,EAGqB;AAC1B;AACA,EAAA,MAAMC,eAAgD,GAAG,EACvD,GAAGF,KAAK,CAACC,OAD8C;AAEvDE,IAAAA,KAAK,EAAE,EAFgD;AAE5C;AACXC,IAAAA,aAAa,EAAE,MAAM,EAHkC;AAG9B;AACzBtB,IAAAA,MAJuD;AAKvD,IAAGmB,GAAAA,OAAAA;AALoD,GAAzD,CAF0B;;AAW1B,EAAA,MAAM,CAACI,WAAD,CAAA,GAAgBnB,gBAAK,CAACoB,QAAN,CAAe,OAAO;AAC1CC,IAAAA,OAAO,EAAEC,yBAAmB,CAAYN,eAAZ,CAAA;AADc,GAAP,CAAf,CAAtB,CAX0B;;AAgB1B,EAAA,MAAM,CAACC,KAAD,EAAQM,QAAR,CAAA,GAAoBvB,gBAAK,CAACoB,QAAN,CACxB,MAAMD,WAAW,CAACE,OAAZ,CAAoBG,YADF,CAA1B,CAhB0B;AAqB1B;;AACAL,EAAAA,WAAW,CAACE,OAAZ,CAAoBI,UAApB,CAA+BC,IAAI,KAAK,EACtC,GAAGA,IADmC;AAEtC,IAAA,GAAGX,OAFmC;AAGtCE,IAAAA,KAAK,EAAE,EACL,GAAGA,KADE;AAEL,MAAA,GAAGF,OAAO,CAACE,KAAAA;AAFN,KAH+B;AAOtC;AACA;AACAC,IAAAA,aAAa,EAAES,OAAO,IAAI;AACxBJ,MAAAA,QAAQ,CAACI,OAAD,CAAR,CAAA;AACAZ,MAAAA,OAAO,CAACG,aAAR,IAAA,IAAA,GAAA,KAAA,CAAA,GAAAH,OAAO,CAACG,aAAR,CAAwBS,OAAxB,CAAA,CAAA;AACD,KAAA;AAZqC,GAAL,CAAnC,CAAA,CAAA;AAeA,EAAOR,OAAAA,WAAW,CAACE,OAAnB,CAAA;AACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/index.tsx"],"sourcesContent":["import * as React from 'react'\nexport * from '@tanstack/table-core'\n\nimport {\n  createTableInstance,\n  TableOptions,\n  TableInstance,\n  Table,\n  TableGenerics,\n  createTableFactory,\n  Overwrite,\n  PartialKeys,\n  TableOptionsResolved,\n} from '@tanstack/table-core'\n\nexport type Renderable<TProps> =\n  | React.ReactNode\n  | React.FunctionComponent<TProps>\n  | React.Component<TProps>\n\nexport type Render = <TProps extends {}>(\n  Comp: Renderable<TProps>,\n  props: TProps\n) => React.ReactNode | JSX.Element\n\nexport type ReactTableGenerics = Overwrite<\n  TableGenerics,\n  { Renderer: Render; Rendered: ReturnType<Render> }\n>\n\n//\n\nexport const render: Render = (Comp, props) =>\n  !Comp ? null : isReactComponent(Comp) ? <Comp {...props} /> : Comp\n\nfunction isReactComponent(component: unknown): component is React.FC {\n  return (\n    isClassComponent(component) ||\n    typeof component === 'function' ||\n    isExoticComponent(component)\n  )\n}\n\nfunction isClassComponent(component: any) {\n  return (\n    typeof component === 'function' &&\n    (() => {\n      const proto = Object.getPrototypeOf(component)\n      return proto.prototype && proto.prototype.isReactComponent\n    })()\n  )\n}\n\nfunction isExoticComponent(component: any) {\n  return (\n    typeof component === 'object' &&\n    typeof component.$$typeof === 'symbol' &&\n    ['react.memo', 'react.forward_ref'].includes(component.$$typeof.description)\n  )\n}\n\nexport const createTable = createTableFactory({ render })\n\n// const useIsomorphicLayoutEffect =\n//   typeof document !== 'undefined' ? React.useLayoutEffect : React.useEffect\n\nexport type UseTableInstanceOptions<TGenerics extends ReactTableGenerics> =\n  TableOptions<TGenerics>\n\nexport function useTableInstance<TGenerics extends ReactTableGenerics>(\n  table: Table<TGenerics>,\n  options: UseTableInstanceOptions<TGenerics>\n): TableInstance<TGenerics> {\n  // Compose in the generic options to the user options\n  const resolvedOptions: TableOptionsResolved<TGenerics> = {\n    ...table.options,\n    state: {}, // Dummy state\n    onStateChange: () => {}, // noop\n    render,\n    renderFallbackValue: null,\n    ...options,\n  }\n\n  // Create a new table instance and store it in state\n  const [instanceRef] = React.useState(() => ({\n    current: createTableInstance<TGenerics>(resolvedOptions),\n  }))\n\n  // By default, manage table state here using the instance's initial state\n  const [state, setState] = React.useState(\n    () => instanceRef.current.initialState\n  )\n\n  // Compose the default state above with any user state. This will allow the user\n  // to only control a subset of the state if desired.\n  instanceRef.current.setOptions(prev => ({\n    ...prev,\n    ...options,\n    state: {\n      ...state,\n      ...options.state,\n    },\n    // Similarly, we'll maintain both our internal state and any user-provided\n    // state.\n    onStateChange: updater => {\n      setState(updater)\n      options.onStateChange?.(updater)\n    },\n  }))\n\n  return instanceRef.current\n}\n"],"names":["render","Comp","props","isReactComponent","React","component","isClassComponent","isExoticComponent","proto","Object","getPrototypeOf","prototype","$$typeof","includes","description","createTable","createTableFactory","useTableInstance","table","options","resolvedOptions","state","onStateChange","renderFallbackValue","instanceRef","useState","current","createTableInstance","setState","initialState","setOptions","prev","updater"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA;AAEO,MAAMA,MAAc,GAAG,CAACC,IAAD,EAAOC,KAAP,KAC5B,CAACD,IAAD,GAAQ,IAAR,GAAeE,gBAAgB,CAACF,IAAD,CAAhB,gBAAyBG,gBAAA,CAAA,aAAA,CAAC,IAAD,EAAUF,KAAV,CAAzB,GAA+CD,KADzD;;AAGP,SAASE,gBAAT,CAA0BE,SAA1B,EAAqE;AACnE,EAAA,OACEC,gBAAgB,CAACD,SAAD,CAAhB,IACA,OAAOA,SAAP,KAAqB,UADrB,IAEAE,iBAAiB,CAACF,SAAD,CAHnB,CAAA;AAKD,CAAA;;AAED,SAASC,gBAAT,CAA0BD,SAA1B,EAA0C;AACxC,EAAA,OACE,OAAOA,SAAP,KAAqB,UAArB,IACA,CAAC,MAAM;AACL,IAAA,MAAMG,KAAK,GAAGC,MAAM,CAACC,cAAP,CAAsBL,SAAtB,CAAd,CAAA;AACA,IAAOG,OAAAA,KAAK,CAACG,SAAN,IAAmBH,KAAK,CAACG,SAAN,CAAgBR,gBAA1C,CAAA;AACD,GAHD,GAFF,CAAA;AAOD,CAAA;;AAED,SAASI,iBAAT,CAA2BF,SAA3B,EAA2C;AACzC,EACE,OAAA,OAAOA,SAAP,KAAqB,QAArB,IACA,OAAOA,SAAS,CAACO,QAAjB,KAA8B,QAD9B,IAEA,CAAC,YAAD,EAAe,mBAAf,CAAA,CAAoCC,QAApC,CAA6CR,SAAS,CAACO,QAAV,CAAmBE,WAAhE,CAHF,CAAA;AAKD,CAAA;;AAEYC,MAAAA,WAAW,GAAGC,wBAAkB,CAAC;AAAEhB,EAAAA,MAAAA;AAAF,CAAD;AAG7C;;AAKO,SAASiB,gBAAT,CACLC,KADK,EAELC,OAFK,EAGqB;AAC1B;AACA,EAAA,MAAMC,eAAgD,GAAG,EACvD,GAAGF,KAAK,CAACC,OAD8C;AAEvDE,IAAAA,KAAK,EAAE,EAFgD;AAE5C;AACXC,IAAAA,aAAa,EAAE,MAAM,EAHkC;AAG9B;AACzBtB,IAAAA,MAJuD;AAKvDuB,IAAAA,mBAAmB,EAAE,IALkC;AAMvD,IAAGJ,GAAAA,OAAAA;AANoD,GAAzD,CAF0B;;AAY1B,EAAA,MAAM,CAACK,WAAD,CAAA,GAAgBpB,gBAAK,CAACqB,QAAN,CAAe,OAAO;AAC1CC,IAAAA,OAAO,EAAEC,yBAAmB,CAAYP,eAAZ,CAAA;AADc,GAAP,CAAf,CAAtB,CAZ0B;;AAiB1B,EAAA,MAAM,CAACC,KAAD,EAAQO,QAAR,CAAA,GAAoBxB,gBAAK,CAACqB,QAAN,CACxB,MAAMD,WAAW,CAACE,OAAZ,CAAoBG,YADF,CAA1B,CAjB0B;AAsB1B;;AACAL,EAAAA,WAAW,CAACE,OAAZ,CAAoBI,UAApB,CAA+BC,IAAI,KAAK,EACtC,GAAGA,IADmC;AAEtC,IAAA,GAAGZ,OAFmC;AAGtCE,IAAAA,KAAK,EAAE,EACL,GAAGA,KADE;AAEL,MAAA,GAAGF,OAAO,CAACE,KAAAA;AAFN,KAH+B;AAOtC;AACA;AACAC,IAAAA,aAAa,EAAEU,OAAO,IAAI;AACxBJ,MAAAA,QAAQ,CAACI,OAAD,CAAR,CAAA;AACAb,MAAAA,OAAO,CAACG,aAAR,IAAA,IAAA,GAAA,KAAA,CAAA,GAAAH,OAAO,CAACG,aAAR,CAAwBU,OAAxB,CAAA,CAAA;AACD,KAAA;AAZqC,GAAL,CAAnC,CAAA,CAAA;AAeA,EAAOR,OAAAA,WAAW,CAACE,OAAnB,CAAA;AACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/cjs/table-core/build/esm/index.js

@@ -1535,6 +1535,12 @@ const Grouping = {
     };
   },
   createCell: (cell, column, row, instance) => {
+    const getRenderValue = () => {
+      var _cell$getValue;
+
+      return (_cell$getValue = cell.getValue()) != null ? _cell$getValue : instance.options.renderFallbackValue;
+    };
+
     return {
       getIsGrouped: () => column.getIsGrouped() && column.id === row.groupingColumnId,
       getIsPlaceholder: () => !cell.getIsGrouped() && column.getIsGrouped(),
@@ -1544,15 +1550,19 @@ const Grouping = {
         return !cell.getIsGrouped() && !cell.getIsPlaceholder() && ((_row$subRows = row.subRows) == null ? void 0 : _row$subRows.length) > 1;
       },
       renderAggregatedCell: () => {
-        var _column$columnDef$agg;
+        if (process.env.NODE_ENV === 'development') {
+          if (!column.columnDef.aggregatedCell) {
+            console.warn('A columnDef.aggregatedCell template is recommended for displaying aggregated values.');
+          }
+        }
 
-        const template = (_column$columnDef$agg = column.columnDef.aggregatedCell) != null ? _column$columnDef$agg : column.columnDef.cell;
+        const template = column.columnDef.aggregatedCell || column.columnDef.cell;
         return template ? instance._render(template, {
           instance,
           column,
           row,
           cell,
-          getValue: cell.getValue
+          getValue: getRenderValue
         }) : null;
       }
     };
@@ -2535,8 +2545,10 @@ const Sorting = {
         //   })
         //   return
         // }
+        // this needs to be outside of instance.setSorting to be in sync with rerender
+        const nextSortingOrder = column.getNextSortingOrder();
         instance.setSorting(old => {
-          var _ref2, _column$columnDef$sor, _instance$options$ena, _instance$options$ena2;
+          var _instance$options$ena, _instance$options$ena2;
 
           // Find any existing sorting for this column
           const existingSorting = old == null ? void 0 : old.find(d => d.id === column.id);
@@ -2561,30 +2573,29 @@ const Sorting = {
             } else {
               sortAction = 'replace';
             }
-          }
+          } // Handle toggle states that will remove the sorting
 
-          const sortDescFirst = (_ref2 = (_column$columnDef$sor = column.columnDef.sortDescFirst) != null ? _column$columnDef$sor : instance.options.sortDescFirst) != null ? _ref2 : column.getAutoSortDir() === 'desc'; // Handle toggle states that will remove the sorting
 
           if (sortAction === 'toggle' && ( // Must be toggling
           (_instance$options$ena = instance.options.enableSortingRemoval) != null ? _instance$options$ena : true) && // If enableSortRemove, enable in general
           !hasDescDefined && ( // Must not be setting desc
-          multi ? (_instance$options$ena2 = instance.options.enableMultiRemove) != null ? _instance$options$ena2 : true : true) && ( // If multi, don't allow if enableMultiRemove
-          existingSorting != null && existingSorting.desc // Finally, detect if it should indeed be removed
-          ? !sortDescFirst : sortDescFirst)) {
+          multi ? (_instance$options$ena2 = instance.options.enableMultiRemove) != null ? _instance$options$ena2 : true : true) && // If multi, don't allow if enableMultiRemove
+          !nextSortingOrder // Finally, detect if it should indeed be removed
+          ) {
             sortAction = 'remove';
           }
 
           if (sortAction === 'replace') {
             newSorting = [{
               id: column.id,
-              desc: hasDescDefined ? desc : !!sortDescFirst
+              desc: hasDescDefined ? desc : nextSortingOrder === 'desc'
             }];
           } else if (sortAction === 'add' && old != null && old.length) {
             var _instance$options$max;
 
             newSorting = [...old, {
               id: column.id,
-              desc: hasDescDefined ? desc : !!sortDescFirst
+              desc: hasDescDefined ? desc : nextSortingOrder === 'desc'
             }]; // Take latest n columns
 
             newSorting.splice(0, newSorting.length - ((_instance$options$max = instance.options.maxMultiSortColCount) != null ? _instance$options$max : Number.MAX_SAFE_INTEGER));
@@ -2593,7 +2604,7 @@ const Sorting = {
             newSorting = old.map(d => {
               if (d.id === column.id) {
                 return { ...d,
-                  desc: hasDescDefined ? desc : !(existingSorting != null && existingSorting.desc)
+                  desc: hasDescDefined ? desc : nextSortingOrder === 'desc'
                 };
               }
 
@@ -2606,6 +2617,23 @@ const Sorting = {
           return newSorting;
         });
       },
+      getNextSortingOrder: () => {
+        var _ref2, _column$columnDef$sor;
+
+        const sortDescFirst = (_ref2 = (_column$columnDef$sor = column.columnDef.sortDescFirst) != null ? _column$columnDef$sor : instance.options.sortDescFirst) != null ? _ref2 : column.getAutoSortDir() === 'desc';
+        const firstSortDirection = sortDescFirst ? 'desc' : 'asc';
+        const isSorted = column.getIsSorted();
+
+        if (!isSorted) {
+          return firstSortDirection;
+        }
+
+        if (isSorted === firstSortDirection) {
+          return isSorted === 'desc' ? 'asc' : 'desc';
+        } else {
+          return false;
+        }
+      },
       getCanSort: () => {
         var _column$columnDef$ena, _instance$options$ena3;
 
@@ -3055,6 +3083,12 @@ function createTable(_, __, options) {
 }
 
 function createCell(instance, row, column, columnId) {
+  const getRenderValue = () => {
+    var _cell$getValue;
+
+    return (_cell$getValue = cell.getValue()) != null ? _cell$getValue : instance.options.renderFallbackValue;
+  };
+
   const cell = {
     id: row.id + "_" + column.id,
     row,
@@ -3066,7 +3100,7 @@ function createCell(instance, row, column, columnId) {
         column,
         row,
         cell: cell,
-        getValue: cell.getValue
+        getValue: getRenderValue
       }) : null;
     }
   };