@tanstack/react-table 8.2.6 → 8.3.0

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

@@ -102,6 +102,7 @@ exports.Visibility = index.Visibility;
 exports.aggregationFns = index.aggregationFns;
 exports.buildHeaderGroups = index.buildHeaderGroups;
 exports.createColumn = index.createColumn;
+exports.createColumnHelper = index.createColumnHelper;
 exports.createRow = index.createRow;
 exports.createTable = index.createTable;
 exports.defaultColumnSizing = index.defaultColumnSizing;

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  TableOptions,\n  TableOptionsResolved,\n  RowData,\n  createTable,\n} from '@tanstack/table-core'\n\nexport type Renderable<TProps> = React.ReactNode | React.ComponentType<TProps>\n\n//\n\nexport function flexRender<TProps extends object>(\n  Comp: Renderable<TProps>,\n  props: TProps\n): React.ReactNode | JSX.Element {\n  return !Comp ? null : isReactComponent<TProps>(Comp) ? (\n    <Comp {...props} />\n  ) : (\n    Comp\n  )\n}\n\nfunction isReactComponent<TProps>(\n  component: unknown\n): component is React.ComponentType<TProps> {\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 function useReactTable<TData extends RowData>(\n  options: TableOptions<TData>\n) {\n  // Compose in the generic options to the user options\n  const resolvedOptions: TableOptionsResolved<TData> = {\n    state: {}, // Dummy state\n    onStateChange: () => {}, // noop\n    renderFallbackValue: null,\n    ...options,\n  }\n\n  // Create a new table and store it in state\n  const [tableRef] = React.useState(() => ({\n    current: createTable<TData>(resolvedOptions),\n  }))\n\n  // By default, manage table state here using the table's initial state\n  const [state, setState] = React.useState(() => tableRef.current.initialState)\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  tableRef.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 tableRef.current\n}\n"],"names":["flexRender","Comp","props","isReactComponent","React","component","isClassComponent","isExoticComponent","proto","Object","getPrototypeOf","prototype","$$typeof","includes","description","useReactTable","options","resolvedOptions","state","onStateChange","renderFallbackValue","tableRef","useState","current","createTable","setState","initialState","setOptions","prev","updater"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA;AAEO,SAASA,UAAT,CACLC,IADK,EAELC,KAFK,EAG0B;AAC/B,EAAA,OAAO,CAACD,IAAD,GAAQ,IAAR,GAAeE,gBAAgB,CAASF,IAAT,CAAhB,gBACpBG,+BAAC,IAAD,EAAUF,KAAV,CADoB,GAGpBD,IAHF,CAAA;AAKD,CAAA;;AAED,SAASE,gBAAT,CACEE,SADF,EAE4C;AAC1C,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;IACA,OAAOG,KAAK,CAACG,SAAN,IAAmBH,KAAK,CAACG,SAAN,CAAgBR,gBAA1C,CAAA;AACD,GAHD,GAFF,CAAA;AAOD,CAAA;;AAED,SAASI,iBAAT,CAA2BF,SAA3B,EAA2C;EACzC,OACE,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;;AAEM,SAASC,aAAT,CACLC,OADK,EAEL;AACA;AACA,EAAA,MAAMC,eAA4C,GAAG;AACnDC,IAAAA,KAAK,EAAE,EAD4C;AACxC;IACXC,aAAa,EAAE,MAAM,EAF8B;AAE1B;AACzBC,IAAAA,mBAAmB,EAAE,IAH8B;IAInD,GAAGJ,OAAAA;AAJgD,GAArD,CAFA;;AAUA,EAAA,MAAM,CAACK,QAAD,CAAA,GAAajB,gBAAK,CAACkB,QAAN,CAAe,OAAO;IACvCC,OAAO,EAAEC,iBAAW,CAAQP,eAAR,CAAA;GADY,CAAf,CAAnB,CAVA;;AAeA,EAAA,MAAM,CAACC,KAAD,EAAQO,QAAR,CAAA,GAAoBrB,gBAAK,CAACkB,QAAN,CAAe,MAAMD,QAAQ,CAACE,OAAT,CAAiBG,YAAtC,CAA1B,CAfA;AAkBA;;EACAL,QAAQ,CAACE,OAAT,CAAiBI,UAAjB,CAA4BC,IAAI,KAAK,EACnC,GAAGA,IADgC;AAEnC,IAAA,GAAGZ,OAFgC;IAGnCE,KAAK,EAAE,EACL,GAAGA,KADE;AAEL,MAAA,GAAGF,OAAO,CAACE,KAAAA;KALsB;AAOnC;AACA;IACAC,aAAa,EAAEU,OAAO,IAAI;MACxBJ,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;AAZkC,GAAL,CAAhC,CAAA,CAAA;EAeA,OAAOR,QAAQ,CAACE,OAAhB,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  TableOptions,\n  TableOptionsResolved,\n  RowData,\n  createTable,\n} from '@tanstack/table-core'\n\nexport type Renderable<TProps> = React.ReactNode | React.ComponentType<TProps>\n\n//\n\nexport function flexRender<TProps extends object>(\n  Comp: Renderable<TProps>,\n  props: TProps\n): React.ReactNode | JSX.Element {\n  return !Comp ? null : isReactComponent<TProps>(Comp) ? (\n    <Comp {...props} />\n  ) : (\n    Comp\n  )\n}\n\nfunction isReactComponent<TProps>(\n  component: unknown\n): component is React.ComponentType<TProps> {\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 function useReactTable<TData extends RowData>(\n  options: TableOptions<TData>\n) {\n  // Compose in the generic options to the user options\n  const resolvedOptions: TableOptionsResolved<TData> = {\n    state: {}, // Dummy state\n    onStateChange: () => {}, // noop\n    renderFallbackValue: null,\n    ...options,\n  }\n\n  // Create a new table and store it in state\n  const [tableRef] = React.useState(() => ({\n    current: createTable<TData>(resolvedOptions),\n  }))\n\n  // By default, manage table state here using the table's initial state\n  const [state, setState] = React.useState(() => tableRef.current.initialState)\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  tableRef.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 tableRef.current\n}\n"],"names":["flexRender","Comp","props","isReactComponent","React","component","isClassComponent","isExoticComponent","proto","Object","getPrototypeOf","prototype","$$typeof","includes","description","useReactTable","options","resolvedOptions","state","onStateChange","renderFallbackValue","tableRef","useState","current","createTable","setState","initialState","setOptions","prev","updater"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA;AAEO,SAASA,UAAT,CACLC,IADK,EAELC,KAFK,EAG0B;AAC/B,EAAA,OAAO,CAACD,IAAD,GAAQ,IAAR,GAAeE,gBAAgB,CAASF,IAAT,CAAhB,gBACpBG,+BAAC,IAAD,EAAUF,KAAV,CADoB,GAGpBD,IAHF,CAAA;AAKD,CAAA;;AAED,SAASE,gBAAT,CACEE,SADF,EAE4C;AAC1C,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;IACA,OAAOG,KAAK,CAACG,SAAN,IAAmBH,KAAK,CAACG,SAAN,CAAgBR,gBAA1C,CAAA;AACD,GAHD,GAFF,CAAA;AAOD,CAAA;;AAED,SAASI,iBAAT,CAA2BF,SAA3B,EAA2C;EACzC,OACE,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;;AAEM,SAASC,aAAT,CACLC,OADK,EAEL;AACA;AACA,EAAA,MAAMC,eAA4C,GAAG;AACnDC,IAAAA,KAAK,EAAE,EAD4C;AACxC;IACXC,aAAa,EAAE,MAAM,EAF8B;AAE1B;AACzBC,IAAAA,mBAAmB,EAAE,IAH8B;IAInD,GAAGJ,OAAAA;AAJgD,GAArD,CAFA;;AAUA,EAAA,MAAM,CAACK,QAAD,CAAA,GAAajB,gBAAK,CAACkB,QAAN,CAAe,OAAO;IACvCC,OAAO,EAAEC,iBAAW,CAAQP,eAAR,CAAA;GADY,CAAf,CAAnB,CAVA;;AAeA,EAAA,MAAM,CAACC,KAAD,EAAQO,QAAR,CAAA,GAAoBrB,gBAAK,CAACkB,QAAN,CAAe,MAAMD,QAAQ,CAACE,OAAT,CAAiBG,YAAtC,CAA1B,CAfA;AAkBA;;EACAL,QAAQ,CAACE,OAAT,CAAiBI,UAAjB,CAA4BC,IAAI,KAAK,EACnC,GAAGA,IADgC;AAEnC,IAAA,GAAGZ,OAFgC;IAGnCE,KAAK,EAAE,EACL,GAAGA,KADE;AAEL,MAAA,GAAGF,OAAO,CAACE,KAAAA;KALsB;AAOnC;AACA;IACAC,aAAa,EAAEU,OAAO,IAAI;MACxBJ,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;AAZkC,GAAL,CAAhC,CAAA,CAAA;EAeA,OAAOR,QAAQ,CAACE,OAAhB,CAAA;AACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -22,6 +22,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
  *
  * @license MIT
  */
+// Is this type a tuple?
+// If this type is a tuple, what indices are allowed?
+///
 function functionalUpdate(updater, input) {
   return typeof updater === 'function' ? updater(input) : updater;
 }
@@ -107,13 +110,27 @@ function createColumn(table, columnDef, depth, parent) {
   const resolvedColumnDef = { ...defaultColumn,
     ...columnDef
   };
-  let id = (_ref = (_resolvedColumnDef$id = resolvedColumnDef.id) != null ? _resolvedColumnDef$id : resolvedColumnDef.accessorKey) != null ? _ref : typeof resolvedColumnDef.header === 'string' ? resolvedColumnDef.header : undefined;
+  const accessorKey = resolvedColumnDef.accessorKey;
+  let id = (_ref = (_resolvedColumnDef$id = resolvedColumnDef.id) != null ? _resolvedColumnDef$id : accessorKey ? accessorKey.replace('.', '_') : undefined) != null ? _ref : typeof resolvedColumnDef.header === 'string' ? resolvedColumnDef.header : undefined;
   let accessorFn;
 
   if (resolvedColumnDef.accessorFn) {
     accessorFn = resolvedColumnDef.accessorFn;
-  } else if (resolvedColumnDef.accessorKey) {
-    accessorFn = originalRow => originalRow[resolvedColumnDef.accessorKey];
+  } else if (accessorKey) {
+    // Support deep accessor keys
+    if (accessorKey.includes('.')) {
+      accessorFn = originalRow => {
+        let result = originalRow;
+
+        for (const key of accessorKey.split('.')) {
+          result = result[key];
+        }
+
+        return result;
+      };
+    } else {
+      accessorFn = originalRow => originalRow[resolvedColumnDef.accessorKey];
+    }
   }
 
   if (!id) {
@@ -3103,6 +3120,52 @@ const createRow = (table, id, original, rowIndex, depth, subRows) => {
   return row;
 };
 
+// type Person = {
+//   firstName: string
+//   lastName: string
+//   age: number
+//   visits: number
+//   status: string
+//   progress: number
+//   nested: {
+//     foo: [
+//       {
+//         bar: 'bar'
+//       }
+//     ]
+//     bar: { subBar: boolean }[]
+//     baz: {
+//       foo: 'foo'
+//       bar: {
+//         baz: 'baz'
+//       }
+//     }
+//   }
+// }
+// const test: DeepKeys<Person> = 'nested.foo.0.bar'
+// const test2: DeepKeys<Person> = 'nested.bar'
+// const helper = createColumnHelper<Person>()
+// helper.accessor('nested.foo', {
+//   cell: info => info.getValue(),
+// })
+// helper.accessor('nested.foo.0.bar', {
+//   cell: info => info.getValue(),
+// })
+// helper.accessor('nested.bar', {
+//   cell: info => info.getValue(),
+// })
+function createColumnHelper() {
+  return {
+    accessor: (accessor, column) => {
+      return typeof accessor === 'function' ? { ...column,
+        accessorFn: accessor
+      } : { ...column,
+        accessorKey: accessor
+      };
+    }
+  };
+}
+
 function getCoreRowModel() {
   return table => memo(() => [table.options.data], data => {
     const rowModel = {
@@ -3812,6 +3875,7 @@ exports.Visibility = Visibility;
 exports.aggregationFns = aggregationFns;
 exports.buildHeaderGroups = buildHeaderGroups;
 exports.createColumn = createColumn;
+exports.createColumnHelper = createColumnHelper;
 exports.createRow = createRow;
 exports.createTable = createTable;
 exports.defaultColumnSizing = defaultColumnSizing;