@tanstack/svelte-table 8.0.0-alpha.83 → 8.0.0-alpha.84

package/build/umd/index.development.js

@@ -101,329 +101,457 @@
     };
   }
 
+  function createColumn(instance, columnDef, depth, parent) {
+    var _ref, _columnDef$id;
+
+    const defaultColumn = instance._getDefaultColumnDef();
+
+    columnDef = { ...defaultColumn,
+      ...columnDef
+    };
+    let id = (_ref = (_columnDef$id = columnDef.id) != null ? _columnDef$id : columnDef.accessorKey) != null ? _ref : typeof columnDef.header === 'string' ? columnDef.header : undefined;
+    let accessorFn;
+
+    if (columnDef.accessorFn) {
+      accessorFn = columnDef.accessorFn;
+    } else if (columnDef.accessorKey) {
+      accessorFn = originalRow => originalRow[columnDef.accessorKey];
+    }
+
+    if (!id) {
+      {
+        throw new Error(columnDef.accessorFn ? "Columns require an id when using an accessorFn" : "Columns require an id when using a non-string header");
+      }
+    }
+
+    let column = { ...columnDef,
+      id: "" + id,
+      accessorFn,
+      parent: parent,
+      depth,
+      columnDef,
+      columnDefType: columnDef.columnDefType,
+      columns: [],
+      getFlatColumns: memo(() => [true], () => {
+        var _column$columns;
+
+        return [column, ...((_column$columns = column.columns) == null ? void 0 : _column$columns.flatMap(d => d.getFlatColumns()))];
+      }, {
+        key: "development" === 'production' ,
+        debug: () => {
+          var _instance$options$deb;
+
+          return (_instance$options$deb = instance.options.debugAll) != null ? _instance$options$deb : instance.options.debugColumns;
+        }
+      }),
+      getLeafColumns: memo(() => [instance._getOrderColumnsFn()], orderColumns => {
+        var _column$columns2;
+
+        if ((_column$columns2 = column.columns) != null && _column$columns2.length) {
+          let leafColumns = column.columns.flatMap(column => column.getLeafColumns());
+          return orderColumns(leafColumns);
+        }
+
+        return [column];
+      }, {
+        key: "development" === 'production' ,
+        debug: () => {
+          var _instance$options$deb2;
+
+          return (_instance$options$deb2 = instance.options.debugAll) != null ? _instance$options$deb2 : instance.options.debugColumns;
+        }
+      })
+    };
+    column = instance._features.reduce((obj, feature) => {
+      return Object.assign(obj, feature.createColumn == null ? void 0 : feature.createColumn(column, instance));
+    }, column); // Yes, we have to convert instance to uknown, because we know more than the compiler here.
+
+    return column;
+  }
+
   //
-  const Columns = {
+  function createHeader(instance, column, options) {
+    var _options$id;
+
+    const id = (_options$id = options.id) != null ? _options$id : column.id;
+    let header = {
+      id,
+      column,
+      index: options.index,
+      isPlaceholder: !!options.isPlaceholder,
+      placeholderId: options.placeholderId,
+      depth: options.depth,
+      subHeaders: [],
+      colSpan: 0,
+      rowSpan: 0,
+      headerGroup: null,
+      getLeafHeaders: () => {
+        const leafHeaders = [];
+
+        const recurseHeader = h => {
+          if (h.subHeaders && h.subHeaders.length) {
+            h.subHeaders.map(recurseHeader);
+          }
+
+          leafHeaders.push(h);
+        };
+
+        recurseHeader(header);
+        return leafHeaders;
+      },
+      renderHeader: () => column.columnDef.header ? instance._render(column.columnDef.header, {
+        instance,
+        header: header,
+        column
+      }) : null,
+      renderFooter: () => column.columnDef.footer ? instance._render(column.columnDef.footer, {
+        instance,
+        header: header,
+        column
+      }) : null
+    };
+
+    instance._features.forEach(feature => {
+      Object.assign(header, feature.createHeader == null ? void 0 : feature.createHeader(header, instance));
+    });
+
+    return header;
+  }
+
+  const Headers = {
     createInstance: instance => {
       return {
-        getDefaultColumnDef: memo(() => [instance.options.defaultColumnDef], defaultColumn => {
-          var _defaultColumn;
-
-          defaultColumn = (_defaultColumn = defaultColumn) != null ? _defaultColumn : {};
-          return {
-            header: props => props.header.column.id,
-            footer: props => props.header.column.id,
-            cell: props => {
-              var _props$getValue$toStr, _props$getValue$toStr2, _props$getValue;
+        // Header Groups
+        getHeaderGroups: memo(() => [instance.getAllColumns(), instance.getVisibleLeafColumns(), instance.getState().columnPinning.left, instance.getState().columnPinning.right], (allColumns, leafColumns, left, right) => {
+          var _left$map$filter, _right$map$filter;
 
-              return (_props$getValue$toStr = (_props$getValue$toStr2 = (_props$getValue = props.getValue()).toString) == null ? void 0 : _props$getValue$toStr2.call(_props$getValue)) != null ? _props$getValue$toStr : null;
-            },
-            ...instance._features.reduce((obj, feature) => {
-              return Object.assign(obj, feature.getDefaultColumnDef == null ? void 0 : feature.getDefaultColumnDef());
-            }, {}),
-            ...defaultColumn
-          };
+          const leftColumns = (_left$map$filter = left == null ? void 0 : left.map(columnId => leafColumns.find(d => d.id === columnId)).filter(Boolean)) != null ? _left$map$filter : [];
+          const rightColumns = (_right$map$filter = right == null ? void 0 : right.map(columnId => leafColumns.find(d => d.id === columnId)).filter(Boolean)) != null ? _right$map$filter : [];
+          const centerColumns = leafColumns.filter(column => !(left != null && left.includes(column.id)) && !(right != null && right.includes(column.id)));
+          const headerGroups = buildHeaderGroups(allColumns, [...leftColumns, ...centerColumns, ...rightColumns], instance);
+          return headerGroups;
         }, {
+          key: 'getHeaderGroups',
           debug: () => {
             var _instance$options$deb;
 
-            return (_instance$options$deb = instance.options.debugAll) != null ? _instance$options$deb : instance.options.debugColumns;
-          },
-          key: 'getDefaultColumnDef'
-        }),
-        getColumnDefs: () => instance.options.columns,
-        createColumn: (columnDef, depth, parent) => {
-          var _ref, _columnDef$id;
-
-          const defaultColumnDef = instance.getDefaultColumnDef();
-          columnDef = { ...defaultColumnDef,
-            ...columnDef
-          };
-          let id = (_ref = (_columnDef$id = columnDef.id) != null ? _columnDef$id : columnDef.accessorKey) != null ? _ref : typeof columnDef.header === 'string' ? columnDef.header : undefined;
-          let accessorFn;
-
-          if (columnDef.accessorFn) {
-            accessorFn = columnDef.accessorFn;
-          } else if (columnDef.accessorKey) {
-            accessorFn = originalRow => originalRow[columnDef.accessorKey];
+            return (_instance$options$deb = instance.options.debugAll) != null ? _instance$options$deb : instance.options.debugHeaders;
           }
+        }),
+        getCenterHeaderGroups: memo(() => [instance.getAllColumns(), instance.getVisibleLeafColumns(), instance.getState().columnPinning.left, instance.getState().columnPinning.right], (allColumns, leafColumns, left, right) => {
+          leafColumns = leafColumns.filter(column => !(left != null && left.includes(column.id)) && !(right != null && right.includes(column.id)));
+          return buildHeaderGroups(allColumns, leafColumns, instance, 'center');
+        }, {
+          key: 'getCenterHeaderGroups',
+          debug: () => {
+            var _instance$options$deb2;
 
-          if (!id) {
-            {
-              throw new Error(columnDef.accessorFn ? "Columns require an id when using an accessorFn" : "Columns require an id when using a non-string header");
-            }
+            return (_instance$options$deb2 = instance.options.debugAll) != null ? _instance$options$deb2 : instance.options.debugHeaders;
           }
+        }),
+        getLeftHeaderGroups: memo(() => [instance.getAllColumns(), instance.getVisibleLeafColumns(), instance.getState().columnPinning.left], (allColumns, leafColumns, left) => {
+          var _left$map$filter2;
 
-          let column = { ...columnDef,
-            id: "" + id,
-            accessorFn,
-            parent: parent,
-            depth,
-            columnDef,
-            columnDefType: columnDef.columnDefType,
-            columns: [],
-            getFlatColumns: memo(() => [true], () => {
-              var _column$columns;
-
-              return [column, ...((_column$columns = column.columns) == null ? void 0 : _column$columns.flatMap(d => d.getFlatColumns()))];
-            }, {
-              key: "development" === 'production' ,
-              debug: () => {
-                var _instance$options$deb2;
-
-                return (_instance$options$deb2 = instance.options.debugAll) != null ? _instance$options$deb2 : instance.options.debugColumns;
-              }
-            }),
-            getLeafColumns: memo(() => [instance._getOrderColumnsFn()], orderColumns => {
-              var _column$columns2;
-
-              if ((_column$columns2 = column.columns) != null && _column$columns2.length) {
-                let leafColumns = column.columns.flatMap(column => column.getLeafColumns());
-                return orderColumns(leafColumns);
-              }
-
-              return [column];
-            }, {
-              key: "development" === 'production' ,
-              debug: () => {
-                var _instance$options$deb3;
-
-                return (_instance$options$deb3 = instance.options.debugAll) != null ? _instance$options$deb3 : instance.options.debugColumns;
-              }
-            })
-          };
-          column = instance._features.reduce((obj, feature) => {
-            return Object.assign(obj, feature.createColumn == null ? void 0 : feature.createColumn(column, instance));
-          }, column); // Yes, we have to convert instance to uknown, because we know more than the compiler here.
-
-          return column;
-        },
-        getAllColumns: memo(() => [instance.getColumnDefs()], columnDefs => {
-          const recurseColumns = function (columnDefs, parent, depth) {
-            if (depth === void 0) {
-              depth = 0;
-            }
+          const orderedLeafColumns = (_left$map$filter2 = left == null ? void 0 : left.map(columnId => leafColumns.find(d => d.id === columnId)).filter(Boolean)) != null ? _left$map$filter2 : [];
+          return buildHeaderGroups(allColumns, orderedLeafColumns, instance, 'left');
+        }, {
+          key: 'getLeftHeaderGroups',
+          debug: () => {
+            var _instance$options$deb3;
 
-            return columnDefs.map(columnDef => {
-              const column = instance.createColumn(columnDef, depth, parent);
-              column.columns = columnDef.columns ? recurseColumns(columnDef.columns, column, depth + 1) : [];
-              return column;
-            });
-          };
+            return (_instance$options$deb3 = instance.options.debugAll) != null ? _instance$options$deb3 : instance.options.debugHeaders;
+          }
+        }),
+        getRightHeaderGroups: memo(() => [instance.getAllColumns(), instance.getVisibleLeafColumns(), instance.getState().columnPinning.right], (allColumns, leafColumns, right) => {
+          var _right$map$filter2;
 
-          return recurseColumns(columnDefs);
+          const orderedLeafColumns = (_right$map$filter2 = right == null ? void 0 : right.map(columnId => leafColumns.find(d => d.id === columnId)).filter(Boolean)) != null ? _right$map$filter2 : [];
+          return buildHeaderGroups(allColumns, orderedLeafColumns, instance, 'right');
         }, {
-          key: 'getAllColumns',
+          key: 'getRightHeaderGroups',
           debug: () => {
             var _instance$options$deb4;
 
-            return (_instance$options$deb4 = instance.options.debugAll) != null ? _instance$options$deb4 : instance.options.debugColumns;
+            return (_instance$options$deb4 = instance.options.debugAll) != null ? _instance$options$deb4 : instance.options.debugHeaders;
           }
         }),
-        getAllFlatColumns: memo(() => [instance.getAllColumns()], allColumns => {
-          return allColumns.flatMap(column => {
-            return column.getFlatColumns();
-          });
+        // Footer Groups
+        getFooterGroups: memo(() => [instance.getHeaderGroups()], headerGroups => {
+          return [...headerGroups].reverse();
         }, {
-          key: 'getAllFlatColumns',
+          key: 'getFooterGroups',
           debug: () => {
             var _instance$options$deb5;
 
-            return (_instance$options$deb5 = instance.options.debugAll) != null ? _instance$options$deb5 : instance.options.debugColumns;
+            return (_instance$options$deb5 = instance.options.debugAll) != null ? _instance$options$deb5 : instance.options.debugHeaders;
           }
         }),
-        getAllFlatColumnsById: memo(() => [instance.getAllFlatColumns()], flatColumns => {
-          return flatColumns.reduce((acc, column) => {
-            acc[column.id] = column;
-            return acc;
-          }, {});
+        getLeftFooterGroups: memo(() => [instance.getLeftHeaderGroups()], headerGroups => {
+          return [...headerGroups].reverse();
         }, {
-          key: 'getAllFlatColumnsById',
+          key: 'getLeftFooterGroups',
           debug: () => {
             var _instance$options$deb6;
 
-            return (_instance$options$deb6 = instance.options.debugAll) != null ? _instance$options$deb6 : instance.options.debugColumns;
+            return (_instance$options$deb6 = instance.options.debugAll) != null ? _instance$options$deb6 : instance.options.debugHeaders;
           }
         }),
-        getAllLeafColumns: memo(() => [instance.getAllColumns(), instance._getOrderColumnsFn()], (allColumns, orderColumns) => {
-          let leafColumns = allColumns.flatMap(column => column.getLeafColumns());
-          return orderColumns(leafColumns);
+        getCenterFooterGroups: memo(() => [instance.getCenterHeaderGroups()], headerGroups => {
+          return [...headerGroups].reverse();
         }, {
-          key: 'getAllLeafColumns',
+          key: 'getCenterFooterGroups',
           debug: () => {
             var _instance$options$deb7;
 
-            return (_instance$options$deb7 = instance.options.debugAll) != null ? _instance$options$deb7 : instance.options.debugColumns;
+            return (_instance$options$deb7 = instance.options.debugAll) != null ? _instance$options$deb7 : instance.options.debugHeaders;
           }
         }),
-        getColumn: columnId => {
-          const column = instance.getAllFlatColumnsById()[columnId];
-
-          if (!column) {
-            {
-              console.warn("[Table] Column with id " + columnId + " does not exist.");
-            }
+        getRightFooterGroups: memo(() => [instance.getRightHeaderGroups()], headerGroups => {
+          return [...headerGroups].reverse();
+        }, {
+          key: 'getRightFooterGroups',
+          debug: () => {
+            var _instance$options$deb8;
 
-            throw new Error();
+            return (_instance$options$deb8 = instance.options.debugAll) != null ? _instance$options$deb8 : instance.options.debugHeaders;
           }
+        }),
+        // Flat Headers
+        getFlatHeaders: memo(() => [instance.getHeaderGroups()], headerGroups => {
+          return headerGroups.map(headerGroup => {
+            return headerGroup.headers;
+          }).flat();
+        }, {
+          key: 'getFlatHeaders',
+          debug: () => {
+            var _instance$options$deb9;
 
-          return column;
-        }
-      };
-    }
-  };
-
-  //
-  const Rows = {
-    // createRow: <TGenerics extends TableGenerics>(
-    //   row: Row<TGenerics>,
-    //   instance: TableInstance<TGenerics>
-    // ): CellsRow<TGenerics> => {
-    //   return {}
-    // },
-    createInstance: instance => {
-      return {
-        getRowId: (row, index, parent) => {
-          var _instance$options$get;
-
-          return (_instance$options$get = instance.options.getRowId == null ? void 0 : instance.options.getRowId(row, index, parent)) != null ? _instance$options$get : "" + (parent ? [parent.id, index].join('.') : index);
-        },
-        createRow: (id, original, rowIndex, depth, subRows) => {
-          let row = {
-            id,
-            index: rowIndex,
-            original,
-            depth,
-            valuesCache: {},
-            getValue: columnId => {
-              if (row.valuesCache.hasOwnProperty(columnId)) {
-                return row.valuesCache[columnId];
-              }
-
-              const column = instance.getColumn(columnId);
-
-              if (!column.accessorFn) {
-                return undefined;
-              }
+            return (_instance$options$deb9 = instance.options.debugAll) != null ? _instance$options$deb9 : instance.options.debugHeaders;
+          }
+        }),
+        getLeftFlatHeaders: memo(() => [instance.getLeftHeaderGroups()], left => {
+          return left.map(headerGroup => {
+            return headerGroup.headers;
+          }).flat();
+        }, {
+          key: 'getLeftFlatHeaders',
+          debug: () => {
+            var _instance$options$deb10;
 
-              row.valuesCache[columnId] = column.accessorFn(row.original, rowIndex);
-              return row.valuesCache[columnId];
-            },
-            subRows: subRows != null ? subRows : [],
-            getLeafRows: () => flattenBy(row.subRows, d => d.subRows)
-          };
+            return (_instance$options$deb10 = instance.options.debugAll) != null ? _instance$options$deb10 : instance.options.debugHeaders;
+          }
+        }),
+        getCenterFlatHeaders: memo(() => [instance.getCenterHeaderGroups()], left => {
+          return left.map(headerGroup => {
+            return headerGroup.headers;
+          }).flat();
+        }, {
+          key: 'getCenterFlatHeaders',
+          debug: () => {
+            var _instance$options$deb11;
 
-          for (let i = 0; i < instance._features.length; i++) {
-            const feature = instance._features[i];
-            Object.assign(row, feature == null ? void 0 : feature.createRow == null ? void 0 : feature.createRow(row, instance));
+            return (_instance$options$deb11 = instance.options.debugAll) != null ? _instance$options$deb11 : instance.options.debugHeaders;
           }
+        }),
+        getRightFlatHeaders: memo(() => [instance.getRightHeaderGroups()], left => {
+          return left.map(headerGroup => {
+            return headerGroup.headers;
+          }).flat();
+        }, {
+          key: 'getRightFlatHeaders',
+          debug: () => {
+            var _instance$options$deb12;
 
-          return row;
-        },
-        getCoreRowModel: () => {
-          if (!instance._getCoreRowModel) {
-            instance._getCoreRowModel = instance.options.getCoreRowModel(instance);
+            return (_instance$options$deb12 = instance.options.debugAll) != null ? _instance$options$deb12 : instance.options.debugHeaders;
           }
+        }),
+        // Leaf Headers
+        getCenterLeafHeaders: memo(() => [instance.getCenterFlatHeaders()], flatHeaders => {
+          return flatHeaders.filter(header => {
+            var _header$subHeaders;
 
-          return instance._getCoreRowModel();
-        },
-        // The final calls start at the bottom of the model,
-        // expanded rows, which then work their way up
-        getRowModel: () => {
-          return instance.getPaginationRowModel();
-        },
-        getRow: id => {
-          const row = instance.getRowModel().rowsById[id];
+            return !((_header$subHeaders = header.subHeaders) != null && _header$subHeaders.length);
+          });
+        }, {
+          key: 'getCenterLeafHeaders',
+          debug: () => {
+            var _instance$options$deb13;
 
-          if (!row) {
-            {
-              throw new Error("getRow expected an ID, but got " + id);
-            }
+            return (_instance$options$deb13 = instance.options.debugAll) != null ? _instance$options$deb13 : instance.options.debugHeaders;
           }
+        }),
+        getLeftLeafHeaders: memo(() => [instance.getLeftFlatHeaders()], flatHeaders => {
+          return flatHeaders.filter(header => {
+            var _header$subHeaders2;
 
-          return row;
-        }
-      };
-    }
-  };
+            return !((_header$subHeaders2 = header.subHeaders) != null && _header$subHeaders2.length);
+          });
+        }, {
+          key: 'getLeftLeafHeaders',
+          debug: () => {
+            var _instance$options$deb14;
 
-  //
-  const Cells = {
-    createRow: (row, instance) => {
-      return {
-        getAllCells: memo(() => [instance.getAllLeafColumns()], leafColumns => {
-          return leafColumns.map(column => {
-            return instance.createCell(row, column, column.id);
+            return (_instance$options$deb14 = instance.options.debugAll) != null ? _instance$options$deb14 : instance.options.debugHeaders;
+          }
+        }),
+        getRightLeafHeaders: memo(() => [instance.getRightFlatHeaders()], flatHeaders => {
+          return flatHeaders.filter(header => {
+            var _header$subHeaders3;
+
+            return !((_header$subHeaders3 = header.subHeaders) != null && _header$subHeaders3.length);
           });
         }, {
-          key: 'row.getAllCells',
+          key: 'getRightLeafHeaders',
           debug: () => {
-            var _instance$options$deb;
+            var _instance$options$deb15;
 
-            return (_instance$options$deb = instance.options.debugAll) != null ? _instance$options$deb : instance.options.debugRows;
+            return (_instance$options$deb15 = instance.options.debugAll) != null ? _instance$options$deb15 : instance.options.debugHeaders;
           }
         }),
-        getAllCellsByColumnId: memo(() => [row.getAllCells()], allCells => {
-          return allCells.reduce((acc, cell) => {
-            acc[cell.columnId] = cell;
-            return acc;
-          }, {});
+        getLeafHeaders: memo(() => [instance.getLeftHeaderGroups(), instance.getCenterHeaderGroups(), instance.getRightHeaderGroups()], (left, center, right) => {
+          var _left$0$headers, _left$, _center$0$headers, _center$, _right$0$headers, _right$;
+
+          return [...((_left$0$headers = (_left$ = left[0]) == null ? void 0 : _left$.headers) != null ? _left$0$headers : []), ...((_center$0$headers = (_center$ = center[0]) == null ? void 0 : _center$.headers) != null ? _center$0$headers : []), ...((_right$0$headers = (_right$ = right[0]) == null ? void 0 : _right$.headers) != null ? _right$0$headers : [])].map(header => {
+            return header.getLeafHeaders();
+          }).flat();
         }, {
-          key: "development" === 'production' ,
+          key: 'getLeafHeaders',
           debug: () => {
-            var _instance$options$deb2;
+            var _instance$options$deb16;
 
-            return (_instance$options$deb2 = instance.options.debugAll) != null ? _instance$options$deb2 : instance.options.debugRows;
+            return (_instance$options$deb16 = instance.options.debugAll) != null ? _instance$options$deb16 : instance.options.debugHeaders;
           }
         })
       };
-    },
-    createInstance: instance => {
-      return {
-        createCell: (row, column, columnId) => {
-          const cell = {
-            id: row.id + "_" + column.id,
-            rowId: row.id,
-            columnId,
-            row,
-            column,
-            getValue: () => row.getValue(columnId),
-            renderCell: () => column.columnDef.cell ? instance._render(column.columnDef.cell, {
-              instance,
-              column,
-              row,
-              cell: cell,
-              getValue: cell.getValue
-            }) : null
-          };
+    }
+  };
+  function buildHeaderGroups(allColumns, columnsToGroup, instance, headerFamily) {
+    var _headerGroups$0$heade, _headerGroups$;
 
-          instance._features.forEach(feature => {
-            Object.assign(cell, feature.createCell == null ? void 0 : feature.createCell(cell, column, row, instance));
-          }, {});
+    // Find the max depth of the columns:
+    // build the leaf column row
+    // build each buffer row going up
+    //    placeholder for non-existent level
+    //    real column for existing level
+    let maxDepth = 0;
 
-          return cell;
-        },
-        getCell: (rowId, columnId) => {
-          const row = instance.getRow(rowId);
+    const findMaxDepth = function (columns, depth) {
+      if (depth === void 0) {
+        depth = 1;
+      }
 
-          if (!row) {
-            {
-              throw new Error("[Table] could not find row with id " + rowId);
-            }
-          }
+      maxDepth = Math.max(maxDepth, depth);
+      columns.filter(column => column.getIsVisible()).forEach(column => {
+        var _column$columns;
 
-          const cell = row.getAllCellsByColumnId()[columnId];
+        if ((_column$columns = column.columns) != null && _column$columns.length) {
+          findMaxDepth(column.columns, depth + 1);
+        }
+      }, 0);
+    };
 
-          if (!cell) {
-            {
-              throw new Error("[Table] could not find cell " + columnId + " in row " + rowId);
-            }
-          }
+    findMaxDepth(allColumns);
+    let headerGroups = [];
 
-          return cell;
+    const createHeaderGroup = (headersToGroup, depth) => {
+      // The header group we are creating
+      const headerGroup = {
+        depth,
+        id: [headerFamily, "" + depth].filter(Boolean).join('_'),
+        headers: []
+      }; // The parent columns we're going to scan next
+
+      const pendingParentHeaders = []; // Scan each column for parents
+
+      headersToGroup.forEach(headerToGroup => {
+        // What is the latest (last) parent column?
+        const latestPendingParentHeader = [...pendingParentHeaders].reverse()[0];
+        const isLeafHeader = headerToGroup.column.depth === headerGroup.depth;
+        let column;
+        let isPlaceholder = false;
+
+        if (isLeafHeader && headerToGroup.column.parent) {
+          // The parent header is new
+          column = headerToGroup.column.parent;
+        } else {
+          // The parent header is repeated
+          column = headerToGroup.column;
+          isPlaceholder = true;
         }
-      };
-    }
-  };
+
+        if ((latestPendingParentHeader == null ? void 0 : latestPendingParentHeader.column) === column) {
+          // This column is repeated. Add it as a sub header to the next batch
+          latestPendingParentHeader.subHeaders.push(headerToGroup);
+        } else {
+          // This is a new header. Let's create it
+          const header = createHeader(instance, column, {
+            id: [headerFamily, depth, column.id, headerToGroup == null ? void 0 : headerToGroup.id].filter(Boolean).join('_'),
+            isPlaceholder,
+            placeholderId: isPlaceholder ? "" + pendingParentHeaders.filter(d => d.column === column).length : undefined,
+            depth,
+            index: pendingParentHeaders.length
+          }); // Add the headerToGroup as a subHeader of the new header
+
+          header.subHeaders.push(headerToGroup); // Add the new header to the pendingParentHeaders to get grouped
+          // in the next batch
+
+          pendingParentHeaders.push(header);
+        }
+
+        headerGroup.headers.push(headerToGroup);
+        headerToGroup.headerGroup = headerGroup;
+      });
+      headerGroups.push(headerGroup);
+
+      if (depth > 0) {
+        createHeaderGroup(pendingParentHeaders, depth - 1);
+      }
+    };
+
+    const bottomHeaders = columnsToGroup.map((column, index) => createHeader(instance, column, {
+      depth: maxDepth,
+      index
+    }));
+    createHeaderGroup(bottomHeaders, maxDepth - 1);
+    headerGroups.reverse(); // headerGroups = headerGroups.filter(headerGroup => {
+    //   return !headerGroup.headers.every(header => header.isPlaceholder)
+    // })
+
+    const recurseHeadersForSpans = headers => {
+      const filteredHeaders = headers.filter(header => header.column.getIsVisible());
+      return filteredHeaders.map(header => {
+        let colSpan = 0;
+        let rowSpan = 0;
+        let childRowSpans = [0];
+
+        if (header.subHeaders && header.subHeaders.length) {
+          childRowSpans = [];
+          recurseHeadersForSpans(header.subHeaders).forEach(_ref => {
+            let {
+              colSpan: childColSpan,
+              rowSpan: childRowSpan
+            } = _ref;
+            colSpan += childColSpan;
+            childRowSpans.push(childRowSpan);
+          });
+        } else {
+          colSpan = 1;
+        }
+
+        const minChildRowSpan = Math.min(...childRowSpans);
+        rowSpan = rowSpan + minChildRowSpan;
+        header.colSpan = colSpan;
+        header.rowSpan = rowSpan;
+        return {
+          colSpan,
+          rowSpan
+        };
+      });
+    };
+
+    recurseHeadersForSpans((_headerGroups$0$heade = (_headerGroups$ = headerGroups[0]) == null ? void 0 : _headerGroups$.headers) != null ? _headerGroups$0$heade : []);
+    return headerGroups;
+  }
 
   //
   const defaultColumnSizing = {
@@ -970,7 +1098,7 @@
         getColumnCanGlobalFilter: column => {
           var _instance$getCoreRowM, _instance$getCoreRowM2;
 
-          const value = (_instance$getCoreRowM = instance.getCoreRowModel().flatRows[0]) == null ? void 0 : (_instance$getCoreRowM2 = _instance$getCoreRowM.getAllCellsByColumnId()[column.id]) == null ? void 0 : _instance$getCoreRowM2.getValue();
+          const value = (_instance$getCoreRowM = instance.getCoreRowModel().flatRows[0]) == null ? void 0 : (_instance$getCoreRowM2 = _instance$getCoreRowM._getAllCellsByColumnId()[column.id]) == null ? void 0 : _instance$getCoreRowM2.getValue();
           return typeof value === 'string';
         }
       };
@@ -1748,7 +1876,7 @@
       return {
         getCenterVisibleCells: memo(() => [row._getAllVisibleCells(), instance.getState().columnPinning.left, instance.getState().columnPinning.right], (allCells, left, right) => {
           const leftAndRight = [...(left != null ? left : []), ...(right != null ? right : [])];
-          return allCells.filter(d => !leftAndRight.includes(d.columnId));
+          return allCells.filter(d => !leftAndRight.includes(d.column.id));
         }, {
           key: "development" === 'production' ,
           debug: () => {
@@ -1758,7 +1886,7 @@
           }
         }),
         getLeftVisibleCells: memo(() => [row._getAllVisibleCells(), instance.getState().columnPinning.left,,], (allCells, left) => {
-          const cells = (left != null ? left : []).map(columnId => allCells.find(cell => cell.columnId === columnId)).filter(Boolean).map(d => ({ ...d,
+          const cells = (left != null ? left : []).map(columnId => allCells.find(cell => cell.column.id === columnId)).filter(Boolean).map(d => ({ ...d,
             position: 'left'
           }));
           return cells;
@@ -1771,7 +1899,7 @@
           }
         }),
         getRightVisibleCells: memo(() => [row._getAllVisibleCells(), instance.getState().columnPinning.right], (allCells, right) => {
-          const cells = (right != null ? right : []).map(columnId => allCells.find(cell => cell.columnId === columnId)).filter(Boolean).map(d => ({ ...d,
+          const cells = (right != null ? right : []).map(columnId => allCells.find(cell => cell.column.id === columnId)).filter(Boolean).map(d => ({ ...d,
             position: 'left'
           }));
           return cells;
@@ -2576,481 +2704,76 @@
       };
     },
     createRow: (row, instance) => {
-      return {
-        _getAllVisibleCells: memo(() => [row.getAllCells().filter(cell => cell.column.getIsVisible()).map(d => d.id).join('_')], _ => {
-          return row.getAllCells().filter(cell => cell.column.getIsVisible());
-        }, {
-          key: "development" === 'production' ,
-          debug: () => {
-            var _instance$options$deb;
-
-            return (_instance$options$deb = instance.options.debugAll) != null ? _instance$options$deb : instance.options.debugRows;
-          }
-        }),
-        getVisibleCells: memo(() => [row.getLeftVisibleCells(), row.getCenterVisibleCells(), row.getRightVisibleCells()], (left, center, right) => [...left, ...center, ...right], {
-          key: 'row.getVisibleCells',
-          debug: () => {
-            var _instance$options$deb2;
-
-            return (_instance$options$deb2 = instance.options.debugAll) != null ? _instance$options$deb2 : instance.options.debugRows;
-          }
-        })
-      };
-    },
-    createInstance: instance => {
-      const makeVisibleColumnsMethod = (key, getColumns) => {
-        return memo(() => [getColumns(), getColumns().filter(d => d.getIsVisible()).map(d => d.id).join('_')], columns => {
-          return columns.filter(d => d.getIsVisible == null ? void 0 : d.getIsVisible());
-        }, {
-          key,
-          debug: () => {
-            var _instance$options$deb3;
-
-            return (_instance$options$deb3 = instance.options.debugAll) != null ? _instance$options$deb3 : instance.options.debugColumns;
-          }
-        });
-      };
-
-      return {
-        getVisibleFlatColumns: makeVisibleColumnsMethod('getVisibleFlatColumns', () => instance.getAllFlatColumns()),
-        getVisibleLeafColumns: makeVisibleColumnsMethod('getVisibleLeafColumns', () => instance.getAllLeafColumns()),
-        getLeftVisibleLeafColumns: makeVisibleColumnsMethod('getLeftVisibleLeafColumns', () => instance.getLeftLeafColumns()),
-        getRightVisibleLeafColumns: makeVisibleColumnsMethod('getRightVisibleLeafColumns', () => instance.getRightLeafColumns()),
-        getCenterVisibleLeafColumns: makeVisibleColumnsMethod('getCenterVisibleLeafColumns', () => instance.getCenterLeafColumns()),
-        setColumnVisibility: updater => instance.options.onColumnVisibilityChange == null ? void 0 : instance.options.onColumnVisibilityChange(updater),
-        resetColumnVisibility: defaultState => {
-          var _instance$initialStat;
-
-          instance.setColumnVisibility(defaultState ? {} : (_instance$initialStat = instance.initialState.columnVisibility) != null ? _instance$initialStat : {});
-        },
-        toggleAllColumnsVisible: value => {
-          var _value;
-
-          value = (_value = value) != null ? _value : !instance.getIsAllColumnsVisible();
-          instance.setColumnVisibility(instance.getAllLeafColumns().reduce((obj, column) => ({ ...obj,
-            [column.id]: !value ? !(column.getCanHide != null && column.getCanHide()) : value
-          }), {}));
-        },
-        getIsAllColumnsVisible: () => !instance.getAllLeafColumns().some(column => !(column.getIsVisible != null && column.getIsVisible())),
-        getIsSomeColumnsVisible: () => instance.getAllLeafColumns().some(column => column.getIsVisible == null ? void 0 : column.getIsVisible()),
-        getToggleAllColumnsVisibilityHandler: () => {
-          return e => {
-            var _target;
-
-            instance.toggleAllColumnsVisible((_target = e.target) == null ? void 0 : _target.checked);
-          };
-        }
-      };
-    }
-  };
-
-  //
-  const Headers = {
-    createInstance: instance => {
-      return {
-        createHeader: (column, options) => {
-          var _options$id;
-
-          const id = (_options$id = options.id) != null ? _options$id : column.id;
-          let header = {
-            id,
-            column,
-            index: options.index,
-            isPlaceholder: options.isPlaceholder,
-            placeholderId: options.placeholderId,
-            depth: options.depth,
-            subHeaders: [],
-            colSpan: 0,
-            rowSpan: 0,
-            headerGroup: null,
-            getLeafHeaders: () => {
-              const leafHeaders = [];
-
-              const recurseHeader = h => {
-                if (h.subHeaders && h.subHeaders.length) {
-                  h.subHeaders.map(recurseHeader);
-                }
-
-                leafHeaders.push(h);
-              };
-
-              recurseHeader(header);
-              return leafHeaders;
-            },
-            renderHeader: () => column.columnDef.header ? instance._render(column.columnDef.header, {
-              instance,
-              header: header,
-              column
-            }) : null,
-            renderFooter: () => column.columnDef.footer ? instance._render(column.columnDef.footer, {
-              instance,
-              header: header,
-              column
-            }) : null
-          };
-
-          instance._features.forEach(feature => {
-            Object.assign(header, feature.createHeader == null ? void 0 : feature.createHeader(header, instance));
-          });
-
-          return header;
-        },
-        // Header Groups
-        getHeaderGroups: memo(() => [instance.getAllColumns(), instance.getVisibleLeafColumns(), instance.getState().columnPinning.left, instance.getState().columnPinning.right], (allColumns, leafColumns, left, right) => {
-          var _left$map$filter, _right$map$filter;
-
-          const leftColumns = (_left$map$filter = left == null ? void 0 : left.map(columnId => leafColumns.find(d => d.id === columnId)).filter(Boolean)) != null ? _left$map$filter : [];
-          const rightColumns = (_right$map$filter = right == null ? void 0 : right.map(columnId => leafColumns.find(d => d.id === columnId)).filter(Boolean)) != null ? _right$map$filter : [];
-          const centerColumns = leafColumns.filter(column => !(left != null && left.includes(column.id)) && !(right != null && right.includes(column.id)));
-          const headerGroups = buildHeaderGroups(allColumns, [...leftColumns, ...centerColumns, ...rightColumns], instance);
-          return headerGroups;
-        }, {
-          key: 'getHeaderGroups',
-          debug: () => {
-            var _instance$options$deb;
-
-            return (_instance$options$deb = instance.options.debugAll) != null ? _instance$options$deb : instance.options.debugHeaders;
-          }
-        }),
-        getCenterHeaderGroups: memo(() => [instance.getAllColumns(), instance.getVisibleLeafColumns(), instance.getState().columnPinning.left, instance.getState().columnPinning.right], (allColumns, leafColumns, left, right) => {
-          leafColumns = leafColumns.filter(column => !(left != null && left.includes(column.id)) && !(right != null && right.includes(column.id)));
-          return buildHeaderGroups(allColumns, leafColumns, instance, 'center');
-        }, {
-          key: 'getCenterHeaderGroups',
-          debug: () => {
-            var _instance$options$deb2;
-
-            return (_instance$options$deb2 = instance.options.debugAll) != null ? _instance$options$deb2 : instance.options.debugHeaders;
-          }
-        }),
-        getLeftHeaderGroups: memo(() => [instance.getAllColumns(), instance.getVisibleLeafColumns(), instance.getState().columnPinning.left], (allColumns, leafColumns, left) => {
-          var _left$map$filter2;
-
-          const orderedLeafColumns = (_left$map$filter2 = left == null ? void 0 : left.map(columnId => leafColumns.find(d => d.id === columnId)).filter(Boolean)) != null ? _left$map$filter2 : [];
-          return buildHeaderGroups(allColumns, orderedLeafColumns, instance, 'left');
-        }, {
-          key: 'getLeftHeaderGroups',
-          debug: () => {
-            var _instance$options$deb3;
-
-            return (_instance$options$deb3 = instance.options.debugAll) != null ? _instance$options$deb3 : instance.options.debugHeaders;
-          }
-        }),
-        getRightHeaderGroups: memo(() => [instance.getAllColumns(), instance.getVisibleLeafColumns(), instance.getState().columnPinning.right], (allColumns, leafColumns, right) => {
-          var _right$map$filter2;
-
-          const orderedLeafColumns = (_right$map$filter2 = right == null ? void 0 : right.map(columnId => leafColumns.find(d => d.id === columnId)).filter(Boolean)) != null ? _right$map$filter2 : [];
-          return buildHeaderGroups(allColumns, orderedLeafColumns, instance, 'right');
-        }, {
-          key: 'getRightHeaderGroups',
-          debug: () => {
-            var _instance$options$deb4;
-
-            return (_instance$options$deb4 = instance.options.debugAll) != null ? _instance$options$deb4 : instance.options.debugHeaders;
-          }
-        }),
-        // Footer Groups
-        getFooterGroups: memo(() => [instance.getHeaderGroups()], headerGroups => {
-          return [...headerGroups].reverse();
-        }, {
-          key: 'getFooterGroups',
-          debug: () => {
-            var _instance$options$deb5;
-
-            return (_instance$options$deb5 = instance.options.debugAll) != null ? _instance$options$deb5 : instance.options.debugHeaders;
-          }
-        }),
-        getLeftFooterGroups: memo(() => [instance.getLeftHeaderGroups()], headerGroups => {
-          return [...headerGroups].reverse();
-        }, {
-          key: 'getLeftFooterGroups',
-          debug: () => {
-            var _instance$options$deb6;
-
-            return (_instance$options$deb6 = instance.options.debugAll) != null ? _instance$options$deb6 : instance.options.debugHeaders;
-          }
-        }),
-        getCenterFooterGroups: memo(() => [instance.getCenterHeaderGroups()], headerGroups => {
-          return [...headerGroups].reverse();
-        }, {
-          key: 'getCenterFooterGroups',
-          debug: () => {
-            var _instance$options$deb7;
-
-            return (_instance$options$deb7 = instance.options.debugAll) != null ? _instance$options$deb7 : instance.options.debugHeaders;
-          }
-        }),
-        getRightFooterGroups: memo(() => [instance.getRightHeaderGroups()], headerGroups => {
-          return [...headerGroups].reverse();
-        }, {
-          key: 'getRightFooterGroups',
-          debug: () => {
-            var _instance$options$deb8;
-
-            return (_instance$options$deb8 = instance.options.debugAll) != null ? _instance$options$deb8 : instance.options.debugHeaders;
-          }
-        }),
-        // Flat Headers
-        getFlatHeaders: memo(() => [instance.getHeaderGroups()], headerGroups => {
-          return headerGroups.map(headerGroup => {
-            return headerGroup.headers;
-          }).flat();
-        }, {
-          key: 'getFlatHeaders',
-          debug: () => {
-            var _instance$options$deb9;
-
-            return (_instance$options$deb9 = instance.options.debugAll) != null ? _instance$options$deb9 : instance.options.debugHeaders;
-          }
-        }),
-        getLeftFlatHeaders: memo(() => [instance.getLeftHeaderGroups()], left => {
-          return left.map(headerGroup => {
-            return headerGroup.headers;
-          }).flat();
-        }, {
-          key: 'getLeftFlatHeaders',
-          debug: () => {
-            var _instance$options$deb10;
-
-            return (_instance$options$deb10 = instance.options.debugAll) != null ? _instance$options$deb10 : instance.options.debugHeaders;
-          }
-        }),
-        getCenterFlatHeaders: memo(() => [instance.getCenterHeaderGroups()], left => {
-          return left.map(headerGroup => {
-            return headerGroup.headers;
-          }).flat();
-        }, {
-          key: 'getCenterFlatHeaders',
-          debug: () => {
-            var _instance$options$deb11;
-
-            return (_instance$options$deb11 = instance.options.debugAll) != null ? _instance$options$deb11 : instance.options.debugHeaders;
-          }
-        }),
-        getRightFlatHeaders: memo(() => [instance.getRightHeaderGroups()], left => {
-          return left.map(headerGroup => {
-            return headerGroup.headers;
-          }).flat();
-        }, {
-          key: 'getRightFlatHeaders',
-          debug: () => {
-            var _instance$options$deb12;
-
-            return (_instance$options$deb12 = instance.options.debugAll) != null ? _instance$options$deb12 : instance.options.debugHeaders;
-          }
-        }),
-        // Leaf Headers
-        getCenterLeafHeaders: memo(() => [instance.getCenterFlatHeaders()], flatHeaders => {
-          return flatHeaders.filter(header => {
-            var _header$subHeaders;
-
-            return !((_header$subHeaders = header.subHeaders) != null && _header$subHeaders.length);
-          });
-        }, {
-          key: 'getCenterLeafHeaders',
-          debug: () => {
-            var _instance$options$deb13;
-
-            return (_instance$options$deb13 = instance.options.debugAll) != null ? _instance$options$deb13 : instance.options.debugHeaders;
-          }
-        }),
-        getLeftLeafHeaders: memo(() => [instance.getLeftFlatHeaders()], flatHeaders => {
-          return flatHeaders.filter(header => {
-            var _header$subHeaders2;
-
-            return !((_header$subHeaders2 = header.subHeaders) != null && _header$subHeaders2.length);
-          });
-        }, {
-          key: 'getLeftLeafHeaders',
-          debug: () => {
-            var _instance$options$deb14;
-
-            return (_instance$options$deb14 = instance.options.debugAll) != null ? _instance$options$deb14 : instance.options.debugHeaders;
-          }
-        }),
-        getRightLeafHeaders: memo(() => [instance.getRightFlatHeaders()], flatHeaders => {
-          return flatHeaders.filter(header => {
-            var _header$subHeaders3;
-
-            return !((_header$subHeaders3 = header.subHeaders) != null && _header$subHeaders3.length);
-          });
+      return {
+        _getAllVisibleCells: memo(() => [row.getAllCells().filter(cell => cell.column.getIsVisible()).map(d => d.id).join('_')], _ => {
+          return row.getAllCells().filter(cell => cell.column.getIsVisible());
         }, {
-          key: 'getRightLeafHeaders',
+          key: "development" === 'production' ,
           debug: () => {
-            var _instance$options$deb15;
+            var _instance$options$deb;
 
-            return (_instance$options$deb15 = instance.options.debugAll) != null ? _instance$options$deb15 : instance.options.debugHeaders;
+            return (_instance$options$deb = instance.options.debugAll) != null ? _instance$options$deb : instance.options.debugRows;
           }
         }),
-        getLeafHeaders: memo(() => [instance.getLeftHeaderGroups(), instance.getCenterHeaderGroups(), instance.getRightHeaderGroups()], (left, center, right) => {
-          var _left$0$headers, _left$, _center$0$headers, _center$, _right$0$headers, _right$;
+        getVisibleCells: memo(() => [row.getLeftVisibleCells(), row.getCenterVisibleCells(), row.getRightVisibleCells()], (left, center, right) => [...left, ...center, ...right], {
+          key: 'row.getVisibleCells',
+          debug: () => {
+            var _instance$options$deb2;
 
-          return [...((_left$0$headers = (_left$ = left[0]) == null ? void 0 : _left$.headers) != null ? _left$0$headers : []), ...((_center$0$headers = (_center$ = center[0]) == null ? void 0 : _center$.headers) != null ? _center$0$headers : []), ...((_right$0$headers = (_right$ = right[0]) == null ? void 0 : _right$.headers) != null ? _right$0$headers : [])].map(header => {
-            return header.getLeafHeaders();
-          }).flat();
+            return (_instance$options$deb2 = instance.options.debugAll) != null ? _instance$options$deb2 : instance.options.debugRows;
+          }
+        })
+      };
+    },
+    createInstance: instance => {
+      const makeVisibleColumnsMethod = (key, getColumns) => {
+        return memo(() => [getColumns(), getColumns().filter(d => d.getIsVisible()).map(d => d.id).join('_')], columns => {
+          return columns.filter(d => d.getIsVisible == null ? void 0 : d.getIsVisible());
         }, {
-          key: 'getLeafHeaders',
+          key,
           debug: () => {
-            var _instance$options$deb16;
+            var _instance$options$deb3;
 
-            return (_instance$options$deb16 = instance.options.debugAll) != null ? _instance$options$deb16 : instance.options.debugHeaders;
+            return (_instance$options$deb3 = instance.options.debugAll) != null ? _instance$options$deb3 : instance.options.debugColumns;
           }
-        }),
-        getHeader: id => {
-          const header = [...instance.getFlatHeaders(), ...instance.getCenterFlatHeaders(), ...instance.getLeftFlatHeaders(), ...instance.getRightFlatHeaders()].find(d => d.id === id);
+        });
+      };
 
-          if (!header) {
-            {
-              console.warn("Could not find header with id: " + id);
-            }
+      return {
+        getVisibleFlatColumns: makeVisibleColumnsMethod('getVisibleFlatColumns', () => instance.getAllFlatColumns()),
+        getVisibleLeafColumns: makeVisibleColumnsMethod('getVisibleLeafColumns', () => instance.getAllLeafColumns()),
+        getLeftVisibleLeafColumns: makeVisibleColumnsMethod('getLeftVisibleLeafColumns', () => instance.getLeftLeafColumns()),
+        getRightVisibleLeafColumns: makeVisibleColumnsMethod('getRightVisibleLeafColumns', () => instance.getRightLeafColumns()),
+        getCenterVisibleLeafColumns: makeVisibleColumnsMethod('getCenterVisibleLeafColumns', () => instance.getCenterLeafColumns()),
+        setColumnVisibility: updater => instance.options.onColumnVisibilityChange == null ? void 0 : instance.options.onColumnVisibilityChange(updater),
+        resetColumnVisibility: defaultState => {
+          var _instance$initialStat;
 
-            throw new Error();
-          }
+          instance.setColumnVisibility(defaultState ? {} : (_instance$initialStat = instance.initialState.columnVisibility) != null ? _instance$initialStat : {});
+        },
+        toggleAllColumnsVisible: value => {
+          var _value;
+
+          value = (_value = value) != null ? _value : !instance.getIsAllColumnsVisible();
+          instance.setColumnVisibility(instance.getAllLeafColumns().reduce((obj, column) => ({ ...obj,
+            [column.id]: !value ? !(column.getCanHide != null && column.getCanHide()) : value
+          }), {}));
+        },
+        getIsAllColumnsVisible: () => !instance.getAllLeafColumns().some(column => !(column.getIsVisible != null && column.getIsVisible())),
+        getIsSomeColumnsVisible: () => instance.getAllLeafColumns().some(column => column.getIsVisible == null ? void 0 : column.getIsVisible()),
+        getToggleAllColumnsVisibilityHandler: () => {
+          return e => {
+            var _target;
 
-          return header;
+            instance.toggleAllColumnsVisible((_target = e.target) == null ? void 0 : _target.checked);
+          };
         }
       };
     }
   };
-  function buildHeaderGroups(allColumns, columnsToGroup, instance, headerFamily) {
-    var _headerGroups$0$heade, _headerGroups$;
-
-    // Find the max depth of the columns:
-    // build the leaf column row
-    // build each buffer row going up
-    //    placeholder for non-existent level
-    //    real column for existing level
-    let maxDepth = 0;
-
-    const findMaxDepth = function (columns, depth) {
-      if (depth === void 0) {
-        depth = 1;
-      }
-
-      maxDepth = Math.max(maxDepth, depth);
-      columns.filter(column => column.getIsVisible()).forEach(column => {
-        var _column$columns;
-
-        if ((_column$columns = column.columns) != null && _column$columns.length) {
-          findMaxDepth(column.columns, depth + 1);
-        }
-      }, 0);
-    };
-
-    findMaxDepth(allColumns);
-    let headerGroups = [];
-
-    const createHeaderGroup = (headersToGroup, depth) => {
-      // The header group we are creating
-      const headerGroup = {
-        depth,
-        id: [headerFamily, "" + depth].filter(Boolean).join('_'),
-        headers: []
-      }; // The parent columns we're going to scan next
-
-      const pendingParentHeaders = []; // Scan each column for parents
-
-      headersToGroup.forEach(headerToGroup => {
-        // What is the latest (last) parent column?
-        const latestPendingParentHeader = [...pendingParentHeaders].reverse()[0];
-        const isLeafHeader = headerToGroup.column.depth === headerGroup.depth;
-        let column;
-        let isPlaceholder = false;
-
-        if (isLeafHeader && headerToGroup.column.parent) {
-          // The parent header is new
-          column = headerToGroup.column.parent;
-        } else {
-          // The parent header is repeated
-          column = headerToGroup.column;
-          isPlaceholder = true;
-        }
-
-        if ((latestPendingParentHeader == null ? void 0 : latestPendingParentHeader.column) === column) {
-          // This column is repeated. Add it as a sub header to the next batch
-          latestPendingParentHeader.subHeaders.push(headerToGroup);
-        } else {
-          // This is a new header. Let's create it
-          const header = instance.createHeader(column, {
-            id: [headerFamily, depth, column.id, headerToGroup == null ? void 0 : headerToGroup.id].filter(Boolean).join('_'),
-            isPlaceholder,
-            placeholderId: isPlaceholder ? "" + pendingParentHeaders.filter(d => d.column === column).length : undefined,
-            depth,
-            index: pendingParentHeaders.length
-          }); // Add the headerToGroup as a subHeader of the new header
-
-          header.subHeaders.push(headerToGroup); // Add the new header to the pendingParentHeaders to get grouped
-          // in the next batch
-
-          pendingParentHeaders.push(header);
-        }
-
-        headerGroup.headers.push(headerToGroup);
-        headerToGroup.headerGroup = headerGroup;
-      });
-      headerGroups.push(headerGroup);
-
-      if (depth > 0) {
-        createHeaderGroup(pendingParentHeaders, depth - 1);
-      }
-    };
-
-    const bottomHeaders = columnsToGroup.map((column, index) => instance.createHeader(column, {
-      depth: maxDepth,
-      index
-    }));
-    createHeaderGroup(bottomHeaders, maxDepth - 1);
-    headerGroups.reverse(); // headerGroups = headerGroups.filter(headerGroup => {
-    //   return !headerGroup.headers.every(header => header.isPlaceholder)
-    // })
-
-    const recurseHeadersForSpans = headers => {
-      const filteredHeaders = headers.filter(header => header.column.getIsVisible());
-      return filteredHeaders.map(header => {
-        let colSpan = 0;
-        let rowSpan = 0;
-        let childRowSpans = [0];
-
-        if (header.subHeaders && header.subHeaders.length) {
-          childRowSpans = [];
-          recurseHeadersForSpans(header.subHeaders).forEach(_ref => {
-            let {
-              colSpan: childColSpan,
-              rowSpan: childRowSpan
-            } = _ref;
-            colSpan += childColSpan;
-            childRowSpans.push(childRowSpan);
-          });
-        } else {
-          colSpan = 1;
-        }
-
-        const minChildRowSpan = Math.min(...childRowSpans);
-        rowSpan = rowSpan + minChildRowSpan;
-        header.colSpan = colSpan > 0 ? colSpan : undefined;
-        header.rowSpan = rowSpan > 0 ? rowSpan : undefined;
-        return {
-          colSpan,
-          rowSpan
-        };
-      });
-    };
 
-    recurseHeadersForSpans((_headerGroups$0$heade = (_headerGroups$ = headerGroups[0]) == null ? void 0 : _headerGroups$.headers) != null ? _headerGroups$0$heade : []);
-    return headerGroups;
-  }
+  const features = [Headers, Visibility, Ordering, Pinning, Filters, Sorting, Grouping, Expanding, Pagination, RowSelection, ColumnSizing]; //
 
-  // export type Batch = {
-  //   id: number
-  //   priority: keyof CoreBatches
-  //   tasks: (() => void)[]
-  //   schedule: (cb: () => void) => void
-  //   cancel: () => void
-  // }
-  // type CoreBatches = {
-  //   data: Batch[]
-  //   facets: Batch[]
-  // }
   function createTableInstance$1(options) {
     var _options$initialState;
 
@@ -3059,7 +2782,7 @@
     }
 
     let instance = {
-      _features: [Columns, Rows, Cells, Headers, Visibility, Ordering, Pinning, Filters, Sorting, Grouping, Expanding, Pagination, RowSelection, ColumnSizing]
+      _features: features
     };
 
     const defaultOptions = instance._features.reduce((obj, feature) => {
@@ -3076,8 +2799,7 @@
       };
     };
 
-    const coreInitialState = {// coreProgress: 1,
-    };
+    const coreInitialState = {};
     let initialState = { ...coreInitialState,
       ...((_options$initialState = options.initialState) != null ? _options$initialState : {})
     };
@@ -3090,16 +2812,8 @@
 
     const queued = [];
     let queuedTimeout = false;
-    const midInstance = { ...instance,
-      // init: () => {
-      //   startWork()
-      // },
-      // willUpdate: () => {
-      //   startWork()
-      // },
-      // destroy: () => {
-      //   stopWork()
-      // },
+    const coreInstance = {
+      _features: features,
       options: { ...defaultOptions,
         ...options
       },
@@ -3145,29 +2859,134 @@
       },
       setState: updater => {
         instance.options.onStateChange == null ? void 0 : instance.options.onStateChange(updater);
-      } // getOverallProgress: () => {
-      //   const { coreProgress, filtersProgress, facetProgress } =
-      //     instance.getState()
-      //   return mean(() =>
-      //     [coreProgress, filtersProgress].filter(d => d < 1)
-      //   ) as number
-      // },
-      // getProgressStage: () => {
-      //   const { coreProgress, filtersProgress, facetProgress } =
-      //     instance.getState()
-      //   if (coreProgress < 1) {
-      //     return 'coreRowModel'
-      //   }
-      //   if (filtersProgress < 1) {
-      //     return 'filteredRowModel'
-      //   }
-      //   if (Object.values(facetProgress).some(d => d < 1)) {
-      //     return 'facetedRowModel'
-      //   }
-      // },
+      },
+      _getRowId: (row, index, parent) => {
+        var _instance$options$get;
+
+        return (_instance$options$get = instance.options.getRowId == null ? void 0 : instance.options.getRowId(row, index, parent)) != null ? _instance$options$get : "" + (parent ? [parent.id, index].join('.') : index);
+      },
+      getCoreRowModel: () => {
+        if (!instance._getCoreRowModel) {
+          instance._getCoreRowModel = instance.options.getCoreRowModel(instance);
+        }
 
+        return instance._getCoreRowModel();
+      },
+      // The final calls start at the bottom of the model,
+      // expanded rows, which then work their way up
+      getRowModel: () => {
+        return instance.getPaginationRowModel();
+      },
+      getRow: id => {
+        const row = instance.getRowModel().rowsById[id];
+
+        if (!row) {
+          {
+            throw new Error("getRow expected an ID, but got " + id);
+          }
+        }
+
+        return row;
+      },
+      _getDefaultColumnDef: memo(() => [instance.options.defaultColumn], defaultColumn => {
+        var _defaultColumn;
+
+        defaultColumn = (_defaultColumn = defaultColumn) != null ? _defaultColumn : {};
+        return {
+          header: props => props.header.column.id,
+          footer: props => props.header.column.id,
+          cell: props => {
+            var _props$getValue$toStr, _props$getValue$toStr2, _props$getValue;
+
+            return (_props$getValue$toStr = (_props$getValue$toStr2 = (_props$getValue = props.getValue()).toString) == null ? void 0 : _props$getValue$toStr2.call(_props$getValue)) != null ? _props$getValue$toStr : null;
+          },
+          ...instance._features.reduce((obj, feature) => {
+            return Object.assign(obj, feature.getDefaultColumnDef == null ? void 0 : feature.getDefaultColumnDef());
+          }, {}),
+          ...defaultColumn
+        };
+      }, {
+        debug: () => {
+          var _instance$options$deb;
+
+          return (_instance$options$deb = instance.options.debugAll) != null ? _instance$options$deb : instance.options.debugColumns;
+        },
+        key: 'getDefaultColumnDef'
+      }),
+      _getColumnDefs: () => instance.options.columns,
+      getAllColumns: memo(() => [instance._getColumnDefs()], columnDefs => {
+        const recurseColumns = function (columnDefs, parent, depth) {
+          if (depth === void 0) {
+            depth = 0;
+          }
+
+          return columnDefs.map(columnDef => {
+            const column = createColumn(instance, columnDef, depth, parent);
+            column.columns = columnDef.columns ? recurseColumns(columnDef.columns, column, depth + 1) : [];
+            return column;
+          });
+        };
+
+        return recurseColumns(columnDefs);
+      }, {
+        key: 'getAllColumns',
+        debug: () => {
+          var _instance$options$deb2;
+
+          return (_instance$options$deb2 = instance.options.debugAll) != null ? _instance$options$deb2 : instance.options.debugColumns;
+        }
+      }),
+      getAllFlatColumns: memo(() => [instance.getAllColumns()], allColumns => {
+        return allColumns.flatMap(column => {
+          return column.getFlatColumns();
+        });
+      }, {
+        key: 'getAllFlatColumns',
+        debug: () => {
+          var _instance$options$deb3;
+
+          return (_instance$options$deb3 = instance.options.debugAll) != null ? _instance$options$deb3 : instance.options.debugColumns;
+        }
+      }),
+      _getAllFlatColumnsById: memo(() => [instance.getAllFlatColumns()], flatColumns => {
+        return flatColumns.reduce((acc, column) => {
+          acc[column.id] = column;
+          return acc;
+        }, {});
+      }, {
+        key: 'getAllFlatColumnsById',
+        debug: () => {
+          var _instance$options$deb4;
+
+          return (_instance$options$deb4 = instance.options.debugAll) != null ? _instance$options$deb4 : instance.options.debugColumns;
+        }
+      }),
+      getAllLeafColumns: memo(() => [instance.getAllColumns(), instance._getOrderColumnsFn()], (allColumns, orderColumns) => {
+        let leafColumns = allColumns.flatMap(column => column.getLeafColumns());
+        return orderColumns(leafColumns);
+      }, {
+        key: 'getAllLeafColumns',
+        debug: () => {
+          var _instance$options$deb5;
+
+          return (_instance$options$deb5 = instance.options.debugAll) != null ? _instance$options$deb5 : instance.options.debugColumns;
+        }
+      }),
+      getColumn: columnId => {
+        const column = instance._getAllFlatColumnsById()[columnId];
+
+        if (!column) {
+          {
+            console.warn("[Table] Column with id " + columnId + " does not exist.");
+          }
+
+          throw new Error();
+        }
+
+        return column;
+      }
     };
-    instance = Object.assign(instance, midInstance);
+    Object.assign(instance, coreInstance);
 
     instance._features.forEach(feature => {
       return Object.assign(instance, feature.createInstance == null ? void 0 : feature.createInstance(instance));
@@ -3232,6 +3051,86 @@
     return table;
   }
 
+  function createCell(instance, row, column, columnId) {
+    const cell = {
+      id: row.id + "_" + column.id,
+      row,
+      column,
+      getValue: () => row.getValue(columnId),
+      renderCell: () => column.columnDef.cell ? instance._render(column.columnDef.cell, {
+        instance,
+        column,
+        row,
+        cell: cell,
+        getValue: cell.getValue
+      }) : null
+    };
+
+    instance._features.forEach(feature => {
+      Object.assign(cell, feature.createCell == null ? void 0 : feature.createCell(cell, column, row, instance));
+    }, {});
+
+    return cell;
+  }
+
+  const createRow = (instance, id, original, rowIndex, depth, subRows) => {
+    let row = {
+      id,
+      index: rowIndex,
+      original,
+      depth,
+      _valuesCache: {},
+      getValue: columnId => {
+        if (row._valuesCache.hasOwnProperty(columnId)) {
+          return row._valuesCache[columnId];
+        }
+
+        const column = instance.getColumn(columnId);
+
+        if (!column.accessorFn) {
+          return undefined;
+        }
+
+        row._valuesCache[columnId] = column.accessorFn(row.original, rowIndex);
+        return row._valuesCache[columnId];
+      },
+      subRows: subRows != null ? subRows : [],
+      getLeafRows: () => flattenBy(row.subRows, d => d.subRows),
+      getAllCells: memo(() => [instance.getAllLeafColumns()], leafColumns => {
+        return leafColumns.map(column => {
+          return createCell(instance, row, column, column.id);
+        });
+      }, {
+        key: 'row.getAllCells',
+        debug: () => {
+          var _instance$options$deb;
+
+          return (_instance$options$deb = instance.options.debugAll) != null ? _instance$options$deb : instance.options.debugRows;
+        }
+      }),
+      _getAllCellsByColumnId: memo(() => [row.getAllCells()], allCells => {
+        return allCells.reduce((acc, cell) => {
+          acc[cell.column.id] = cell;
+          return acc;
+        }, {});
+      }, {
+        key: "development" === 'production' ,
+        debug: () => {
+          var _instance$options$deb2;
+
+          return (_instance$options$deb2 = instance.options.debugAll) != null ? _instance$options$deb2 : instance.options.debugRows;
+        }
+      })
+    };
+
+    for (let i = 0; i < instance._features.length; i++) {
+      const feature = instance._features[i];
+      Object.assign(row, feature == null ? void 0 : feature.createRow == null ? void 0 : feature.createRow(row, instance));
+    }
+
+    return row;
+  };
+
   function getCoreRowModel() {
     return instance => memo(() => [instance.options.data], data => {
       const rowModel = {
@@ -3259,7 +3158,7 @@
           // }
           // Make the row
 
-          row = instance.createRow(instance.getRowId(originalRow, i, parent), originalRow, i, depth); // Keep track of every row in a flat array
+          row = createRow(instance, instance._getRowId(originalRow, i, parent), originalRow, i, depth); // Keep track of every row in a flat array
 
           rowModel.flatRows.push(row); // Also keep track of every row by its ID
 
@@ -3322,7 +3221,7 @@
         row = rowsToFilter[i];
 
         if ((_row$subRows = row.subRows) != null && _row$subRows.length) {
-          newRow = instance.createRow(row.id, row.original, row.index, row.depth);
+          newRow = createRow(instance, row.id, row.original, row.index, row.depth);
           newRow.columnFilters = row.columnFilters;
           newRow.subRows = recurseFilterRows(row.subRows, depth + 1);
 
@@ -3372,7 +3271,7 @@
           var _row$subRows2;
 
           if ((_row$subRows2 = row.subRows) != null && _row$subRows2.length) {
-            newRow = instance.createRow(row.id, row.original, row.index, row.depth);
+            newRow = createRow(instance, row.id, row.original, row.index, row.depth);
             newRow.subRows = recurseFilterRows(row.subRows, depth + 1);
             row = newRow;
           }
@@ -3739,7 +3638,7 @@
           const subRows = groupUpRecursively(groupedRows, depth + 1, id); // Flatten the leaf rows of the rows in this group
 
           const leafRows = depth ? flattenBy(groupedRows, row => row.subRows) : groupedRows;
-          const row = instance.createRow(id, undefined, index, depth);
+          const row = createRow(instance, id, undefined, index, depth);
           Object.assign(row, {
             groupingColumnId: columnId,
             groupingValue,
@@ -3748,17 +3647,17 @@
             getValue: columnId => {
               // Don't aggregate columns that are in the grouping
               if (existingGrouping.includes(columnId)) {
-                if (row.valuesCache.hasOwnProperty(columnId)) {
-                  return row.valuesCache[columnId];
+                if (row._valuesCache.hasOwnProperty(columnId)) {
+                  return row._valuesCache[columnId];
                 }
 
                 if (groupedRows[0]) {
                   var _groupedRows$0$getVal;
 
-                  row.valuesCache[columnId] = (_groupedRows$0$getVal = groupedRows[0].getValue(columnId)) != null ? _groupedRows$0$getVal : undefined;
+                  row._valuesCache[columnId] = (_groupedRows$0$getVal = groupedRows[0].getValue(columnId)) != null ? _groupedRows$0$getVal : undefined;
                 }
 
-                return row.valuesCache[columnId];
+                return row._valuesCache[columnId];
               }
 
               if (row.groupingValuesCache.hasOwnProperty(columnId)) {
@@ -4141,6 +4040,8 @@
   exports.Visibility = Visibility;
   exports.aggregationFns = aggregationFns;
   exports.buildHeaderGroups = buildHeaderGroups;
+  exports.createColumn = createColumn;
+  exports.createRow = createRow;
   exports.createTable = createTable;
   exports.createTableFactory = createTableFactory;
   exports.createTableInstance = createTableInstance;