@tanstack/table-core 8.0.0-alpha.55 → 8.0.0-alpha.57

package/build/esm/index.js

@@ -361,11 +361,393 @@ function incrementalMemo(getDeps, getInitialValue, schedule, opts) {
   };
 } // opts?.onChange?.(result, oldResult)
 
+//
+var Columns = {
+  createInstance: function createInstance(instance) {
+    return {
+      getDefaultColumn: memo(function () {
+        return [instance.options.defaultColumn];
+      }, function (defaultColumn) {
+        var _defaultColumn;
+
+        defaultColumn = (_defaultColumn = defaultColumn) != null ? _defaultColumn : {};
+        return _extends({
+          header: function header(props) {
+            return props.header.column.id;
+          },
+          footer: function footer(props) {
+            return props.header.column.id;
+          },
+          cell: function cell(_ref) {
+            var _ref$value = _ref.value,
+                value = _ref$value === void 0 ? '' : _ref$value;
+            return typeof value === 'boolean' ? value.toString() : value;
+          }
+        }, instance._features.reduce(function (obj, feature) {
+          return Object.assign(obj, feature.getDefaultColumn == null ? void 0 : feature.getDefaultColumn());
+        }, {}), defaultColumn);
+      }, {
+        debug: function debug() {
+          var _instance$options$deb;
+
+          return (_instance$options$deb = instance.options.debugAll) != null ? _instance$options$deb : instance.options.debugColumns;
+        },
+        key: 'getDefaultColumn'
+      }),
+      getColumnDefs: function getColumnDefs() {
+        return instance.options.columns;
+      },
+      createColumn: function createColumn(columnDef, depth, parent) {
+        var _ref2, _columnDef$id;
+
+        var defaultColumn = instance.getDefaultColumn();
+        var id = (_ref2 = (_columnDef$id = columnDef.id) != null ? _columnDef$id : columnDef.accessorKey) != null ? _ref2 : typeof columnDef.header === 'string' ? columnDef.header : undefined;
+        var accessorFn;
+
+        if (columnDef.accessorFn) {
+          accessorFn = columnDef.accessorFn;
+        } else if (columnDef.accessorKey) {
+          accessorFn = function accessorFn(originalRow) {
+            return originalRow[columnDef.accessorKey];
+          };
+        }
+
+        if (!id) {
+          if (process.env.NODE_ENV !== 'production') {
+            throw new Error(columnDef.accessorFn ? "Columns require an id when using an accessorFn" : "Columns require an id when using a non-string header");
+          }
+
+          throw new Error();
+        }
+
+        var column = _extends({}, defaultColumn, columnDef, {
+          id: "" + id,
+          accessorFn: accessorFn,
+          parent: parent,
+          depth: depth,
+          columnDef: columnDef,
+          columnDefType: columnDef.columnDefType,
+          columns: [],
+          getFlatColumns: memo(function () {
+            return [true];
+          }, function () {
+            var _column$columns;
+
+            return [column].concat((_column$columns = column.columns) == null ? void 0 : _column$columns.flatMap(function (d) {
+              return d.getFlatColumns();
+            }));
+          }, {
+            key: 'column.getFlatColumns',
+            debug: function debug() {
+              var _instance$options$deb2;
+
+              return (_instance$options$deb2 = instance.options.debugAll) != null ? _instance$options$deb2 : instance.options.debugColumns;
+            }
+          }),
+          getLeafColumns: memo(function () {
+            return [instance._getOrderColumnsFn()];
+          }, function (orderColumns) {
+            var _column$columns2;
+
+            if ((_column$columns2 = column.columns) != null && _column$columns2.length) {
+              var leafColumns = column.columns.flatMap(function (column) {
+                return column.getLeafColumns();
+              });
+              return orderColumns(leafColumns);
+            }
+
+            return [column];
+          }, {
+            key: 'column.getLeafColumns',
+            debug: function debug() {
+              var _instance$options$deb3;
+
+              return (_instance$options$deb3 = instance.options.debugAll) != null ? _instance$options$deb3 : instance.options.debugColumns;
+            }
+          })
+        });
+
+        column = instance._features.reduce(function (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(function () {
+        return [instance.getColumnDefs()];
+      }, function (columnDefs) {
+        var recurseColumns = function recurseColumns(columnDefs, parent, depth) {
+          if (depth === void 0) {
+            depth = 0;
+          }
+
+          return columnDefs.map(function (columnDef) {
+            var column = instance.createColumn(columnDef, depth, parent);
+            column.columns = columnDef.columns ? recurseColumns(columnDef.columns, column, depth + 1) : [];
+            return column;
+          });
+        };
+
+        return recurseColumns(columnDefs);
+      }, {
+        key: 'getAllColumns',
+        debug: function debug() {
+          var _instance$options$deb4;
+
+          return (_instance$options$deb4 = instance.options.debugAll) != null ? _instance$options$deb4 : instance.options.debugColumns;
+        }
+      }),
+      getAllFlatColumns: memo(function () {
+        return [instance.getAllColumns()];
+      }, function (allColumns) {
+        return allColumns.flatMap(function (column) {
+          return column.getFlatColumns();
+        });
+      }, {
+        key: 'getAllFlatColumns',
+        debug: function debug() {
+          var _instance$options$deb5;
+
+          return (_instance$options$deb5 = instance.options.debugAll) != null ? _instance$options$deb5 : instance.options.debugColumns;
+        }
+      }),
+      getAllFlatColumnsById: memo(function () {
+        return [instance.getAllFlatColumns()];
+      }, function (flatColumns) {
+        return flatColumns.reduce(function (acc, column) {
+          acc[column.id] = column;
+          return acc;
+        }, {});
+      }, {
+        key: 'getAllFlatColumnsById',
+        debug: function debug() {
+          var _instance$options$deb6;
+
+          return (_instance$options$deb6 = instance.options.debugAll) != null ? _instance$options$deb6 : instance.options.debugColumns;
+        }
+      }),
+      getAllLeafColumns: memo(function () {
+        return [instance.getAllColumns(), instance._getOrderColumnsFn()];
+      }, function (allColumns, orderColumns) {
+        var leafColumns = allColumns.flatMap(function (column) {
+          return column.getLeafColumns();
+        });
+        return orderColumns(leafColumns);
+      }, {
+        key: 'getAllLeafColumns',
+        debug: function debug() {
+          var _instance$options$deb7;
+
+          return (_instance$options$deb7 = instance.options.debugAll) != null ? _instance$options$deb7 : instance.options.debugColumns;
+        }
+      }),
+      getColumn: function getColumn(columnId) {
+        var column = instance.getAllFlatColumnsById()[columnId];
+
+        if (!column) {
+          if (process.env.NODE_ENV !== 'production') {
+            console.warn("[Table] Column with id " + columnId + " does not exist.");
+          }
+
+          throw new Error();
+        }
+
+        return column;
+      }
+    };
+  }
+};
+
+//
+var Rows = {
+  // createRow: <TGenerics extends TableGenerics>(
+  //   row: Row<TGenerics>,
+  //   instance: TableInstance<TGenerics>
+  // ): CellsRow<TGenerics> => {
+  //   return {}
+  // },
+  createInstance: function createInstance(instance) {
+    return {
+      getRowId: function 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: function createRow(id, original, rowIndex, depth, values) {
+        var row = {
+          id: id,
+          index: rowIndex,
+          original: original,
+          depth: depth,
+          values: values,
+          subRows: [],
+          getLeafRows: function getLeafRows() {
+            return flattenBy(row.subRows, function (d) {
+              return d.subRows;
+            });
+          },
+          getRowProps: function getRowProps(userProps) {
+            return instance.getRowProps(row.id, userProps);
+          }
+        };
+
+        for (var i = 0; i < instance._features.length; i++) {
+          var feature = instance._features[i];
+          Object.assign(row, feature.createRow == null ? void 0 : feature.createRow(row, instance));
+        }
+
+        return row;
+      },
+      getCoreRowModel: function 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: function getRowModel() {
+        return instance.getPaginationRowModel();
+      },
+      getRow: function getRow(id) {
+        var row = instance.getRowModel().rowsById[id];
+
+        if (!row) {
+          if (process.env.NODE_ENV !== 'production') {
+            throw new Error("getRow expected an ID, but got " + id);
+          }
+
+          throw new Error();
+        }
+
+        return row;
+      },
+      getRowProps: function getRowProps(rowId, userProps) {
+        var row = instance.getRow(rowId);
+
+        if (!row) {
+          return;
+        }
+
+        return propGetter({
+          key: row.id,
+          role: 'row'
+        }, userProps);
+      }
+    };
+  }
+};
+
+//
+var Cells = {
+  createRow: function createRow(row, instance) {
+    return {
+      getAllCells: memo(function () {
+        return [instance.getAllLeafColumns()];
+      }, function (leafColumns) {
+        return leafColumns.map(function (column) {
+          return instance.createCell(row, column, row.values[column.id]);
+        });
+      }, {
+        key: process.env.NODE_ENV !== 'production' ? 'row.getAllCells' : '',
+        debug: function debug() {
+          var _instance$options$deb;
+
+          return (_instance$options$deb = instance.options.debugAll) != null ? _instance$options$deb : instance.options.debugRows;
+        }
+      }),
+      getAllCellsByColumnId: memo(function () {
+        return [row.getAllCells()];
+      }, function (allCells) {
+        return allCells.reduce(function (acc, cell) {
+          acc[cell.columnId] = cell;
+          return acc;
+        }, {});
+      }, {
+        key: 'row.getAllCellsByColumnId',
+        debug: function debug() {
+          var _instance$options$deb2;
+
+          return (_instance$options$deb2 = instance.options.debugAll) != null ? _instance$options$deb2 : instance.options.debugRows;
+        }
+      })
+    };
+  },
+  createInstance: function createInstance(instance) {
+    return {
+      createCell: function createCell(row, column, value) {
+        var cell = {
+          id: row.id + "_" + column.id,
+          rowId: row.id,
+          columnId: column.id,
+          row: row,
+          column: column,
+          value: value,
+          getCellProps: function getCellProps(userProps) {
+            return instance.getCellProps(row.id, column.id, userProps);
+          },
+          renderCell: function renderCell() {
+            return column.cell ? instance.render(column.cell, {
+              instance: instance,
+              column: column,
+              row: row,
+              cell: cell,
+              value: value
+            }) : null;
+          }
+        };
+
+        instance._features.forEach(function (feature) {
+          Object.assign(cell, feature.createCell == null ? void 0 : feature.createCell(cell, column, row, instance));
+        }, {});
+
+        return cell;
+      },
+      getCell: function getCell(rowId, columnId) {
+        var row = instance.getRow(rowId);
+
+        if (!row) {
+          if (process.env.NODE_ENV !== 'production') {
+            throw new Error("[Table] could not find row with id " + rowId);
+          }
+
+          throw new Error();
+        }
+
+        var cell = row.getAllCellsByColumnId()[columnId];
+
+        if (!cell) {
+          if (process.env.NODE_ENV !== 'production') {
+            throw new Error("[Table] could not find cell " + columnId + " in row " + rowId);
+          }
+
+          throw new Error();
+        }
+
+        return cell;
+      },
+      getCellProps: function getCellProps(rowId, columnId, userProps) {
+        var cell = instance.getCell(rowId, columnId);
+
+        if (!cell) {
+          return;
+        }
+
+        return propGetter({
+          key: cell.id,
+          role: 'gridcell'
+        }, userProps);
+      }
+    };
+  }
+};
+
 //
 var defaultColumnSizing = {
-  width: 150,
-  minWidth: 20,
-  maxWidth: Number.MAX_SAFE_INTEGER
+  size: 150,
+  minSize: 20,
+  maxSize: Number.MAX_SAFE_INTEGER
 };
 var ColumnSizing = {
   getDefaultColumn: function getDefaultColumn() {
@@ -391,10 +773,45 @@ var ColumnSizing = {
       onColumnSizingInfoChange: makeStateUpdater('columnSizingInfo', instance)
     };
   },
-  getInstance: function getInstance(instance) {
+  createColumn: function createColumn(column, instance) {
+    return {
+      getSize: function getSize() {
+        return instance.getColumnSize(column.id);
+      },
+      getStart: function getStart(position) {
+        return instance.getColumnStart(column.id, position);
+      },
+      getIsResizing: function getIsResizing() {
+        return instance.getColumnIsResizing(column.id);
+      },
+      getCanResize: function getCanResize() {
+        return instance.getColumnCanResize(column.id);
+      },
+      resetSize: function resetSize() {
+        return instance.resetColumnSize(column.id);
+      }
+    };
+  },
+  createHeader: function createHeader(header, instance) {
+    return {
+      getIsResizing: function getIsResizing() {
+        return instance.getColumnIsResizing(header.column.id);
+      },
+      getCanResize: function getCanResize() {
+        return instance.getColumnCanResize(header.column.id);
+      },
+      resetSize: function resetSize() {
+        return instance.resetColumnSize(header.column.id);
+      },
+      getResizerProps: function getResizerProps(userProps) {
+        return instance.getHeaderResizerProps(header.id, userProps);
+      }
+    };
+  },
+  createInstance: function createInstance(instance) {
     return {
-      getColumnWidth: function getColumnWidth(columnId) {
-        var _column$minWidth, _ref, _column$maxWidth;
+      getColumnSize: function getColumnSize(columnId) {
+        var _column$minSize, _ref, _column$maxSize;
 
         var column = instance.getColumn(columnId);
 
@@ -403,7 +820,26 @@ var ColumnSizing = {
         }
 
         var columnSize = instance.getState().columnSizing[column.id];
-        return Math.min(Math.max((_column$minWidth = column.minWidth) != null ? _column$minWidth : defaultColumnSizing.minWidth, (_ref = columnSize != null ? columnSize : column.width) != null ? _ref : defaultColumnSizing.width), (_column$maxWidth = column.maxWidth) != null ? _column$maxWidth : defaultColumnSizing.maxWidth);
+        return Math.min(Math.max((_column$minSize = column.minSize) != null ? _column$minSize : defaultColumnSizing.minSize, (_ref = columnSize != null ? columnSize : column.size) != null ? _ref : defaultColumnSizing.size), (_column$maxSize = column.maxSize) != null ? _column$maxSize : defaultColumnSizing.maxSize);
+      },
+      getColumnStart: function getColumnStart(columnId, position) {
+        var column = instance.getColumn(columnId);
+
+        if (!column) {
+          throw new Error();
+        }
+
+        var columns = !position ? instance.getVisibleLeafColumns() : position === 'left' ? instance.getLeftVisibleLeafColumns() : instance.getRightVisibleLeafColumns();
+        var index = columns.findIndex(function (d) {
+          return d.id === columnId;
+        });
+
+        if (index > 0) {
+          var prevSiblingColumn = columns[index - 1];
+          return instance.getColumnStart(prevSiblingColumn.id, position) + prevSiblingColumn.getSize();
+        }
+
+        return 0;
       },
       setColumnSizing: function setColumnSizing(updater) {
         return instance.options.onColumnSizingChange == null ? void 0 : instance.options.onColumnSizingChange(updater);
@@ -485,10 +921,10 @@ var ColumnSizing = {
           }
 
           var header = headerId ? instance.getHeader(headerId) : undefined;
-          var startSize = header ? header.getWidth() : column.getWidth();
+          var startSize = header ? header.getSize() : column.getSize();
           var columnSizingStart = header ? header.getLeafHeaders().map(function (d) {
-            return [d.column.id, d.getWidth()];
-          }) : [[column.id, column.getWidth()]];
+            return [d.column.id, d.getSize()];
+          }) : [[column.id, column.getSize()]];
           var clientX = isTouchStartEvent(e) ? Math.round(e.touches[0].clientX) : e.clientX;
 
           var updateOffset = function updateOffset(eventType, clientXPos) {
@@ -504,8 +940,8 @@ var ColumnSizing = {
               var deltaPercentage = Math.max(deltaOffset / ((_old$startSize = old == null ? void 0 : old.startSize) != null ? _old$startSize : 0), -0.999999);
               old.columnSizingStart.forEach(function (_ref5) {
                 var columnId = _ref5[0],
-                    headerWidth = _ref5[1];
-                newColumnSizing[columnId] = Math.round(Math.max(headerWidth + headerWidth * deltaPercentage, 0) * 100) / 100;
+                    headerSize = _ref5[1];
+                newColumnSizing[columnId] = Math.round(Math.max(headerSize + headerSize * deltaPercentage, 0) * 100) / 100;
               });
               return _extends({}, old, {
                 deltaOffset: deltaOffset,
@@ -608,35 +1044,34 @@ var ColumnSizing = {
           }
         } : {};
         return propGetter(initialProps, userProps);
-      }
-    };
-  },
-  createColumn: function createColumn(column, instance) {
-    return {
-      getIsResizing: function getIsResizing() {
-        return instance.getColumnIsResizing(column.id);
       },
-      getCanResize: function getCanResize() {
-        return instance.getColumnCanResize(column.id);
-      },
-      resetSize: function resetSize() {
-        return instance.resetColumnSize(column.id);
-      }
-    };
-  },
-  createHeader: function createHeader(header, instance) {
-    return {
-      getIsResizing: function getIsResizing() {
-        return instance.getColumnIsResizing(header.column.id);
+      getTotalSize: function getTotalSize() {
+        var _instance$getHeaderGr, _instance$getHeaderGr2;
+
+        return (_instance$getHeaderGr = (_instance$getHeaderGr2 = instance.getHeaderGroups()[0]) == null ? void 0 : _instance$getHeaderGr2.headers.reduce(function (sum, header) {
+          return sum + header.getSize();
+        }, 0)) != null ? _instance$getHeaderGr : 0;
       },
-      getCanResize: function getCanResize() {
-        return instance.getColumnCanResize(header.column.id);
+      getLeftTotalSize: function getLeftTotalSize() {
+        var _instance$getLeftHead, _instance$getLeftHead2;
+
+        return (_instance$getLeftHead = (_instance$getLeftHead2 = instance.getLeftHeaderGroups()[0]) == null ? void 0 : _instance$getLeftHead2.headers.reduce(function (sum, header) {
+          return sum + header.getSize();
+        }, 0)) != null ? _instance$getLeftHead : 0;
       },
-      resetSize: function resetSize() {
-        return instance.resetColumnSize(header.column.id);
+      getCenterTotalSize: function getCenterTotalSize() {
+        var _instance$getCenterHe, _instance$getCenterHe2;
+
+        return (_instance$getCenterHe = (_instance$getCenterHe2 = instance.getCenterHeaderGroups()[0]) == null ? void 0 : _instance$getCenterHe2.headers.reduce(function (sum, header) {
+          return sum + header.getSize();
+        }, 0)) != null ? _instance$getCenterHe : 0;
       },
-      getResizerProps: function getResizerProps(userProps) {
-        return instance.getHeaderResizerProps(header.id, userProps);
+      getRightTotalSize: function getRightTotalSize() {
+        var _instance$getRightHea, _instance$getRightHea2;
+
+        return (_instance$getRightHea = (_instance$getRightHea2 = instance.getRightHeaderGroups()[0]) == null ? void 0 : _instance$getRightHea2.headers.reduce(function (sum, header) {
+          return sum + header.getSize();
+        }, 0)) != null ? _instance$getRightHea : 0;
       }
     };
   }
@@ -686,7 +1121,7 @@ var Expanding = {
       paginateExpandedRows: true
     };
   },
-  getInstance: function getInstance(instance) {
+  createInstance: function createInstance(instance) {
     var registered = false;
     return {
       queueResetExpanded: function queueResetExpanded() {
@@ -1145,7 +1580,7 @@ var Filters = {
       }
     };
   },
-  getInstance: function getInstance(instance) {
+  createInstance: function createInstance(instance) {
     var registered = false;
     return {
       queueResetFilters: function queueResetFilters() {
@@ -1527,7 +1962,7 @@ var Grouping = {
       }
     };
   },
-  getInstance: function getInstance(instance) {
+  createInstance: function createInstance(instance) {
     var registered = false;
     return {
       queueResetGrouping: function queueResetGrouping() {
@@ -1713,7 +2148,7 @@ var Ordering = {
       onColumnOrderChange: makeStateUpdater('columnOrder', instance)
     };
   },
-  getInstance: function getInstance(instance) {
+  createInstance: function createInstance(instance) {
     return {
       setColumnOrder: function setColumnOrder(updater) {
         return instance.options.onColumnOrderChange == null ? void 0 : instance.options.onColumnOrderChange(updater);
@@ -1785,7 +2220,7 @@ var Pagination = {
       autoResetPageIndex: true
     };
   },
-  getInstance: function getInstance(instance) {
+  createInstance: function createInstance(instance) {
     var registered = false;
     return {
       queueResetPageIndex: function queueResetPageIndex() {
@@ -1916,57 +2351,179 @@ var Pagination = {
           instance._getPaginationRowModel = instance.options.getPaginationRowModel(instance);
         }
 
-        if (!instance._getPaginationRowModel) {
-          return instance.getPrePaginationRowModel();
+        if (!instance._getPaginationRowModel) {
+          return instance.getPrePaginationRowModel();
+        }
+
+        return instance._getPaginationRowModel();
+      },
+      getPageCount: function getPageCount() {
+        var pageCount = instance.getState().pagination.pageCount;
+
+        if (pageCount > 0) {
+          return pageCount;
+        }
+
+        return Math.ceil(instance.getPrePaginationRowModel().rows.length / instance.getState().pagination.pageSize);
+      }
+    };
+  }
+};
+
+//
+var Pinning = {
+  getInitialState: function getInitialState() {
+    return {
+      columnPinning: {
+        left: [],
+        right: []
+      }
+    };
+  },
+  getDefaultOptions: function getDefaultOptions(instance) {
+    return {
+      onColumnPinningChange: makeStateUpdater('columnPinning', instance)
+    };
+  },
+  createColumn: function createColumn(column, instance) {
+    return {
+      getCanPin: function getCanPin() {
+        return instance.getColumnCanPin(column.id);
+      },
+      getPinnedIndex: function getPinnedIndex() {
+        return instance.getColumnPinnedIndex(column.id);
+      },
+      getIsPinned: function getIsPinned() {
+        return instance.getColumnIsPinned(column.id);
+      },
+      pin: function pin(position) {
+        return instance.pinColumn(column.id, position);
+      }
+    };
+  },
+  createRow: function createRow(row, instance) {
+    return {
+      getCenterVisibleCells: memo(function () {
+        return [row._getAllVisibleCells(), instance.getState().columnPinning.left, instance.getState().columnPinning.right];
+      }, function (allCells, left, right) {
+        var leftAndRight = [].concat(left != null ? left : [], right != null ? right : []);
+        return allCells.filter(function (d) {
+          return !leftAndRight.includes(d.columnId);
+        });
+      }, {
+        key: 'row.getCenterVisibleCells',
+        debug: function debug() {
+          var _instance$options$deb;
+
+          return (_instance$options$deb = instance.options.debugAll) != null ? _instance$options$deb : instance.options.debugRows;
+        }
+      }),
+      getLeftVisibleCells: memo(function () {
+        return [row._getAllVisibleCells(), instance.getState().columnPinning.left,,];
+      }, function (allCells, left) {
+        var cells = (left != null ? left : []).map(function (columnId) {
+          return allCells.find(function (cell) {
+            return cell.columnId === columnId;
+          });
+        }).filter(Boolean).map(function (d) {
+          return _extends({}, d, {
+            position: 'left'
+          });
+        });
+        return cells;
+      }, {
+        key: 'row.getLeftVisibleCells',
+        debug: function debug() {
+          var _instance$options$deb2;
+
+          return (_instance$options$deb2 = instance.options.debugAll) != null ? _instance$options$deb2 : instance.options.debugRows;
+        }
+      }),
+      getRightVisibleCells: memo(function () {
+        return [row._getAllVisibleCells(), instance.getState().columnPinning.right];
+      }, function (allCells, right) {
+        var cells = (right != null ? right : []).map(function (columnId) {
+          return allCells.find(function (cell) {
+            return cell.columnId === columnId;
+          });
+        }).filter(Boolean).map(function (d) {
+          return _extends({}, d, {
+            position: 'left'
+          });
+        });
+        return cells;
+      }, {
+        key: 'row.getRightVisibleCells',
+        debug: function debug() {
+          var _instance$options$deb3;
+
+          return (_instance$options$deb3 = instance.options.debugAll) != null ? _instance$options$deb3 : instance.options.debugRows;
+        }
+      })
+    };
+  },
+  createCell: function createCell(cell, instance) {
+    return {
+      getCenterVisibleCells: memo(function () {
+        return [cell.row._getAllVisibleCells(), instance.getState().columnPinning.left, instance.getState().columnPinning.right];
+      }, function (allCells, left, right) {
+        var leftAndRight = [].concat(left != null ? left : [], right != null ? right : []);
+        return allCells.filter(function (d) {
+          return !leftAndRight.includes(d.columnId);
+        });
+      }, {
+        key: 'row.getCenterVisibleCells',
+        debug: function debug() {
+          var _instance$options$deb4;
+
+          return (_instance$options$deb4 = instance.options.debugAll) != null ? _instance$options$deb4 : instance.options.debugRows;
+        }
+      }),
+      getLeftVisibleCells: memo(function () {
+        return [cell.row._getAllVisibleCells(), instance.getState().columnPinning.left,,];
+      }, function (allCells, left) {
+        var cells = (left != null ? left : []).map(function (columnId) {
+          return allCells.find(function (cell) {
+            return cell.columnId === columnId;
+          });
+        }).filter(Boolean).map(function (d) {
+          return _extends({}, d, {
+            position: 'left'
+          });
+        });
+        return cells;
+      }, {
+        key: 'row.getLeftVisibleCells',
+        debug: function debug() {
+          var _instance$options$deb5;
+
+          return (_instance$options$deb5 = instance.options.debugAll) != null ? _instance$options$deb5 : instance.options.debugRows;
         }
+      }),
+      getRightVisibleCells: memo(function () {
+        return [cell.row._getAllVisibleCells(), instance.getState().columnPinning.right];
+      }, function (allCells, right) {
+        var cells = (right != null ? right : []).map(function (columnId) {
+          return allCells.find(function (cell) {
+            return cell.columnId === columnId;
+          });
+        }).filter(Boolean).map(function (d) {
+          return _extends({}, d, {
+            position: 'left'
+          });
+        });
+        return cells;
+      }, {
+        key: 'row.getRightVisibleCells',
+        debug: function debug() {
+          var _instance$options$deb6;
 
-        return instance._getPaginationRowModel();
-      },
-      getPageCount: function getPageCount() {
-        var pageCount = instance.getState().pagination.pageCount;
-
-        if (pageCount > 0) {
-          return pageCount;
+          return (_instance$options$deb6 = instance.options.debugAll) != null ? _instance$options$deb6 : instance.options.debugRows;
         }
-
-        return Math.ceil(instance.getPrePaginationRowModel().rows.length / instance.getState().pagination.pageSize);
-      }
-    };
-  }
-};
-
-//
-var Pinning = {
-  getInitialState: function getInitialState() {
-    return {
-      columnPinning: {
-        left: [],
-        right: []
-      }
-    };
-  },
-  getDefaultOptions: function getDefaultOptions(instance) {
-    return {
-      onColumnPinningChange: makeStateUpdater('columnPinning', instance)
-    };
-  },
-  createColumn: function createColumn(column, instance) {
-    return {
-      getCanPin: function getCanPin() {
-        return instance.getColumnCanPin(column.id);
-      },
-      getPinnedIndex: function getPinnedIndex() {
-        return instance.getColumnPinnedIndex(column.id);
-      },
-      getIsPinned: function getIsPinned() {
-        return instance.getColumnIsPinned(column.id);
-      },
-      pin: function pin(position) {
-        return instance.pinColumn(column.id, position);
-      }
+      })
     };
   },
-  getInstance: function getInstance(instance) {
+  createInstance: function createInstance(instance) {
     return {
       setColumnPinning: function setColumnPinning(updater) {
         return instance.options.onColumnPinningChange == null ? void 0 : instance.options.onColumnPinningChange(updater);
@@ -2066,7 +2623,54 @@ var Pinning = {
             left = _instance$getState$co5.left,
             right = _instance$getState$co5.right;
         return Boolean((left == null ? void 0 : left.length) || (right == null ? void 0 : right.length));
-      }
+      },
+      getLeftLeafColumns: memo(function () {
+        return [instance.getAllLeafColumns(), instance.getState().columnPinning.left];
+      }, function (allColumns, left) {
+        return (left != null ? left : []).map(function (columnId) {
+          return allColumns.find(function (column) {
+            return column.id === columnId;
+          });
+        }).filter(Boolean);
+      }, {
+        key: 'getLeftLeafColumns',
+        debug: function debug() {
+          var _instance$options$deb7;
+
+          return (_instance$options$deb7 = instance.options.debugAll) != null ? _instance$options$deb7 : instance.options.debugColumns;
+        }
+      }),
+      getRightLeafColumns: memo(function () {
+        return [instance.getAllLeafColumns(), instance.getState().columnPinning.right];
+      }, function (allColumns, right) {
+        return (right != null ? right : []).map(function (columnId) {
+          return allColumns.find(function (column) {
+            return column.id === columnId;
+          });
+        }).filter(Boolean);
+      }, {
+        key: 'getRightLeafColumns',
+        debug: function debug() {
+          var _instance$options$deb8;
+
+          return (_instance$options$deb8 = instance.options.debugAll) != null ? _instance$options$deb8 : instance.options.debugColumns;
+        }
+      }),
+      getCenterLeafColumns: memo(function () {
+        return [instance.getAllLeafColumns(), instance.getState().columnPinning.left, instance.getState().columnPinning.right];
+      }, function (allColumns, left, right) {
+        var leftAndRight = [].concat(left != null ? left : [], right != null ? right : []);
+        return allColumns.filter(function (d) {
+          return !leftAndRight.includes(d.id);
+        });
+      }, {
+        key: 'getCenterLeafColumns',
+        debug: function debug() {
+          var _instance$options$deb9;
+
+          return (_instance$options$deb9 = instance.options.debugAll) != null ? _instance$options$deb9 : instance.options.debugColumns;
+        }
+      })
     };
   }
 };
@@ -2090,7 +2694,7 @@ var RowSelection = {
 
     };
   },
-  getInstance: function getInstance(instance) {
+  createInstance: function createInstance(instance) {
     var registered = false; // const pageRows = instance.getPageRows()
 
     return {
@@ -2733,7 +3337,7 @@ var Sorting = {
       }
     };
   },
-  getInstance: function getInstance(instance) {
+  createInstance: function createInstance(instance) {
     var registered = false;
     return {
       queueResetSorting: function queueResetSorting() {
@@ -3025,43 +3629,77 @@ var Visibility = {
       }
     };
   },
-  getInstance: function getInstance(instance) {
+  createRow: function createRow(row, instance) {
     return {
-      getVisibleFlatColumns: memo(function () {
-        return [instance.getAllFlatColumns(), instance.getAllFlatColumns().filter(function (d) {
-          return d.getIsVisible == null ? void 0 : d.getIsVisible();
+      _getAllVisibleCells: memo(function () {
+        return [row.getAllCells().filter(function (cell) {
+          return cell.column.getIsVisible();
         }).map(function (d) {
           return d.id;
         }).join('_')];
-      }, function (allFlatColumns) {
-        return allFlatColumns.filter(function (d) {
-          return d.getIsVisible == null ? void 0 : d.getIsVisible();
+      }, function (_) {
+        return row.getAllCells().filter(function (cell) {
+          return cell.column.getIsVisible();
         });
       }, {
-        key: 'getVisibleFlatColumns',
+        key: 'row._getAllVisibleCells',
         debug: function debug() {
           var _instance$options$deb;
 
-          return (_instance$options$deb = instance.options.debugAll) != null ? _instance$options$deb : instance.options.debugColumns;
+          return (_instance$options$deb = instance.options.debugAll) != null ? _instance$options$deb : instance.options.debugRows;
         }
       }),
-      getVisibleLeafColumns: memo(function () {
-        return [instance.getAllLeafColumns(), instance.getAllLeafColumns().filter(function (d) {
-          return d.getIsVisible == null ? void 0 : d.getIsVisible();
+      getVisibleCells: memo(function () {
+        return [row.getLeftVisibleCells(), row.getCenterVisibleCells(), row.getRightVisibleCells()];
+      }, function (left, center, right) {
+        return [].concat(left, center, right);
+      }, {
+        key: 'row.getVisibleCells',
+        debug: function debug() {
+          var _instance$options$deb2;
+
+          return (_instance$options$deb2 = instance.options.debugAll) != null ? _instance$options$deb2 : instance.options.debugRows;
+        }
+      })
+    };
+  },
+  createInstance: function createInstance(instance) {
+    var makeVisibleColumnsMethod = function makeVisibleColumnsMethod(key, getColumns) {
+      return memo(function () {
+        return [getColumns(), getColumns().filter(function (d) {
+          return d.getIsVisible();
         }).map(function (d) {
           return d.id;
         }).join('_')];
-      }, function (allFlatColumns) {
-        return allFlatColumns.filter(function (d) {
+      }, function (columns) {
+        return columns.filter(function (d) {
           return d.getIsVisible == null ? void 0 : d.getIsVisible();
         });
       }, {
-        key: 'getVisibleLeafColumns',
+        key: key,
         debug: function debug() {
-          var _instance$options$deb2;
+          var _instance$options$deb3;
 
-          return (_instance$options$deb2 = instance.options.debugAll) != null ? _instance$options$deb2 : instance.options.debugColumns;
+          return (_instance$options$deb3 = instance.options.debugAll) != null ? _instance$options$deb3 : instance.options.debugColumns;
         }
+      });
+    };
+
+    return {
+      getVisibleFlatColumns: makeVisibleColumnsMethod('getVisibleFlatColumns', function () {
+        return instance.getAllFlatColumns();
+      }),
+      getVisibleLeafColumns: makeVisibleColumnsMethod('getVisibleLeafColumns', function () {
+        return instance.getAllLeafColumns();
+      }),
+      getLeftVisibleLeafColumns: makeVisibleColumnsMethod('getLeftVisibleLeafColumns', function () {
+        return instance.getLeftLeafColumns();
+      }),
+      getRightVisibleLeafColumns: makeVisibleColumnsMethod('getRightVisibleLeafColumns', function () {
+        return instance.getRightLeafColumns();
+      }),
+      getCenterVisibleLeafColumns: makeVisibleColumnsMethod('getCenterVisibleLeafColumns', function () {
+        return instance.getCenterLeafColumns();
       }),
       setColumnVisibility: function setColumnVisibility(updater) {
         return instance.options.onColumnVisibilityChange == null ? void 0 : instance.options.onColumnVisibilityChange(updater);
@@ -3090,139 +3728,56 @@ var Visibility = {
       getColumnIsVisible: function getColumnIsVisible(columnId) {
         var _ref, _instance$getState$co, _instance$getState$co2;
 
-        var column = instance.getColumn(columnId);
-
-        if (!column) {
-          throw new Error();
-        }
-
-        return (_ref = (_instance$getState$co = (_instance$getState$co2 = instance.getState().columnVisibility) == null ? void 0 : _instance$getState$co2[columnId]) != null ? _instance$getState$co : column.defaultIsVisible) != null ? _ref : true;
-      },
-      getColumnCanHide: function getColumnCanHide(columnId) {
-        var _ref2, _ref3, _instance$options$ena;
-
-        var column = instance.getColumn(columnId);
-
-        if (!column) {
-          throw new Error();
-        }
-
-        return (_ref2 = (_ref3 = (_instance$options$ena = instance.options.enableHiding) != null ? _instance$options$ena : column.enableHiding) != null ? _ref3 : column.defaultCanHide) != null ? _ref2 : true;
-      },
-      getIsAllColumnsVisible: function getIsAllColumnsVisible() {
-        return !instance.getAllLeafColumns().some(function (column) {
-          return !(column.getIsVisible != null && column.getIsVisible());
-        });
-      },
-      getIsSomeColumnsVisible: function getIsSomeColumnsVisible() {
-        return instance.getAllLeafColumns().some(function (column) {
-          return column.getIsVisible == null ? void 0 : column.getIsVisible();
-        });
-      },
-      getToggleAllColumnsVisibilityProps: function getToggleAllColumnsVisibilityProps(userProps) {
-        var props = {
-          onChange: function onChange(e) {
-            var _e$target;
-
-            instance.toggleAllColumnsVisible((_e$target = e.target) == null ? void 0 : _e$target.checked);
-          },
-          type: 'checkbox',
-          title: 'Toggle visibility for all columns',
-          checked: instance.getIsAllColumnsVisible(),
-          indeterminate: !instance.getIsAllColumnsVisible() && instance.getIsSomeColumnsVisible() ? 'indeterminate' : undefined
-        };
-        return propGetter(props, userProps);
-      }
-    };
-  }
-};
-
-//
-var Headers = {
-  createRow: function createRow(row, instance) {
-    return {
-      _getAllVisibleCells: memo(function () {
-        return [row.getAllCells().filter(function (cell) {
-          return cell.column.getIsVisible();
-        }).map(function (d) {
-          return d.id;
-        }).join('_')];
-      }, function (_) {
-        return row.getAllCells().filter(function (cell) {
-          return cell.column.getIsVisible();
-        });
-      }, {
-        key: 'row._getAllVisibleCells',
-        debug: function debug() {
-          var _instance$options$deb;
-
-          return (_instance$options$deb = instance.options.debugAll) != null ? _instance$options$deb : instance.options.debugRows;
-        }
-      }),
-      getVisibleCells: memo(function () {
-        return [row.getLeftVisibleCells(), row.getCenterVisibleCells(), row.getRightVisibleCells()];
-      }, function (left, center, right) {
-        return [].concat(left, center, right);
-      }, {
-        key: 'row.getVisibleCells',
-        debug: function debug() {
-          var _instance$options$deb2;
-
-          return (_instance$options$deb2 = instance.options.debugAll) != null ? _instance$options$deb2 : instance.options.debugRows;
-        }
-      }),
-      getCenterVisibleCells: memo(function () {
-        return [row._getAllVisibleCells(), instance.getState().columnPinning.left, instance.getState().columnPinning.right];
-      }, function (allCells, left, right) {
-        var leftAndRight = [].concat(left != null ? left : [], right != null ? right : []);
-        return allCells.filter(function (d) {
-          return !leftAndRight.includes(d.columnId);
-        });
-      }, {
-        key: 'row.getCenterVisibleCells',
-        debug: function debug() {
-          var _instance$options$deb3;
-
-          return (_instance$options$deb3 = instance.options.debugAll) != null ? _instance$options$deb3 : instance.options.debugRows;
-        }
-      }),
-      getLeftVisibleCells: memo(function () {
-        return [row._getAllVisibleCells(), instance.getState().columnPinning.left,,];
-      }, function (allCells, left) {
-        var cells = (left != null ? left : []).map(function (columnId) {
-          return allCells.find(function (cell) {
-            return cell.columnId === columnId;
-          });
-        }).filter(Boolean);
-        return cells;
-      }, {
-        key: 'row.getLeftVisibleCells',
-        debug: function debug() {
-          var _instance$options$deb4;
-
-          return (_instance$options$deb4 = instance.options.debugAll) != null ? _instance$options$deb4 : instance.options.debugRows;
-        }
-      }),
-      getRightVisibleCells: memo(function () {
-        return [row._getAllVisibleCells(), instance.getState().columnPinning.right];
-      }, function (allCells, right) {
-        var cells = (right != null ? right : []).map(function (columnId) {
-          return allCells.find(function (cell) {
-            return cell.columnId === columnId;
-          });
-        }).filter(Boolean);
-        return cells;
-      }, {
-        key: 'row.getRightVisibleCells',
-        debug: function debug() {
-          var _instance$options$deb5;
+        var column = instance.getColumn(columnId);
 
-          return (_instance$options$deb5 = instance.options.debugAll) != null ? _instance$options$deb5 : instance.options.debugRows;
+        if (!column) {
+          throw new Error();
         }
-      })
+
+        return (_ref = (_instance$getState$co = (_instance$getState$co2 = instance.getState().columnVisibility) == null ? void 0 : _instance$getState$co2[columnId]) != null ? _instance$getState$co : column.defaultIsVisible) != null ? _ref : true;
+      },
+      getColumnCanHide: function getColumnCanHide(columnId) {
+        var _ref2, _ref3, _instance$options$ena;
+
+        var column = instance.getColumn(columnId);
+
+        if (!column) {
+          throw new Error();
+        }
+
+        return (_ref2 = (_ref3 = (_instance$options$ena = instance.options.enableHiding) != null ? _instance$options$ena : column.enableHiding) != null ? _ref3 : column.defaultCanHide) != null ? _ref2 : true;
+      },
+      getIsAllColumnsVisible: function getIsAllColumnsVisible() {
+        return !instance.getAllLeafColumns().some(function (column) {
+          return !(column.getIsVisible != null && column.getIsVisible());
+        });
+      },
+      getIsSomeColumnsVisible: function getIsSomeColumnsVisible() {
+        return instance.getAllLeafColumns().some(function (column) {
+          return column.getIsVisible == null ? void 0 : column.getIsVisible();
+        });
+      },
+      getToggleAllColumnsVisibilityProps: function getToggleAllColumnsVisibilityProps(userProps) {
+        var props = {
+          onChange: function onChange(e) {
+            var _e$target;
+
+            instance.toggleAllColumnsVisible((_e$target = e.target) == null ? void 0 : _e$target.checked);
+          },
+          type: 'checkbox',
+          title: 'Toggle visibility for all columns',
+          checked: instance.getIsAllColumnsVisible(),
+          indeterminate: !instance.getIsAllColumnsVisible() && instance.getIsSomeColumnsVisible() ? 'indeterminate' : undefined
+        };
+        return propGetter(props, userProps);
+      }
     };
-  },
-  getInstance: function getInstance(instance) {
+  }
+};
+
+//
+var Headers = {
+  createInstance: function createInstance(instance) {
     return {
       createHeader: function createHeader(column, options) {
         var _options$id;
@@ -3231,28 +3786,38 @@ var Headers = {
         var header = {
           id: id,
           column: column,
+          index: options.index,
           isPlaceholder: options.isPlaceholder,
           placeholderId: options.placeholderId,
           depth: options.depth,
           subHeaders: [],
           colSpan: 0,
           rowSpan: 0,
-          getWidth: function getWidth() {
+          headerGroup: null,
+          getSize: function getSize() {
             var sum = 0;
 
             var recurse = function recurse(header) {
               if (header.subHeaders.length) {
                 header.subHeaders.forEach(recurse);
               } else {
-                var _header$column$getWid;
+                var _header$column$getSiz;
 
-                sum += (_header$column$getWid = header.column.getWidth()) != null ? _header$column$getWid : 0;
+                sum += (_header$column$getSiz = header.column.getSize()) != null ? _header$column$getSiz : 0;
               }
             };
 
             recurse(header);
             return sum;
           },
+          getStart: function getStart() {
+            if (header.index > 0) {
+              var prevSiblingHeader = header.headerGroup.headers[header.index - 1];
+              return prevSiblingHeader.getStart() + prevSiblingHeader.getSize();
+            }
+
+            return 0;
+          },
           getLeafHeaders: function getLeafHeaders() {
             var leafHeaders = [];
 
@@ -3287,9 +3852,13 @@ var Headers = {
               column: column
             }) : null;
           }
-        }; // Yes, we have to convert instance to unknown, because we know more than the compiler here.
+        };
+
+        instance._features.forEach(function (feature) {
+          Object.assign(header, feature.createHeader == null ? void 0 : feature.createHeader(header, instance));
+        });
 
-        return Object.assign(header, ColumnSizing.createHeader(header, instance));
+        return header;
       },
       // Header Groups
       getHeaderGroups: memo(function () {
@@ -3309,9 +3878,9 @@ var Headers = {
       }, {
         key: 'getHeaderGroups',
         debug: function debug() {
-          var _instance$options$deb6;
+          var _instance$options$deb;
 
-          return (_instance$options$deb6 = instance.options.debugAll) != null ? _instance$options$deb6 : instance.options.debugHeaders;
+          return (_instance$options$deb = instance.options.debugAll) != null ? _instance$options$deb : instance.options.debugHeaders;
         }
       }),
       getCenterHeaderGroups: memo(function () {
@@ -3324,9 +3893,9 @@ var Headers = {
       }, {
         key: 'getCenterHeaderGroups',
         debug: function debug() {
-          var _instance$options$deb7;
+          var _instance$options$deb2;
 
-          return (_instance$options$deb7 = instance.options.debugAll) != null ? _instance$options$deb7 : instance.options.debugHeaders;
+          return (_instance$options$deb2 = instance.options.debugAll) != null ? _instance$options$deb2 : instance.options.debugHeaders;
         }
       }),
       getLeftHeaderGroups: memo(function () {
@@ -3339,9 +3908,9 @@ var Headers = {
       }, {
         key: 'getLeftHeaderGroups',
         debug: function debug() {
-          var _instance$options$deb8;
+          var _instance$options$deb3;
 
-          return (_instance$options$deb8 = instance.options.debugAll) != null ? _instance$options$deb8 : instance.options.debugHeaders;
+          return (_instance$options$deb3 = instance.options.debugAll) != null ? _instance$options$deb3 : instance.options.debugHeaders;
         }
       }),
       getRightHeaderGroups: memo(function () {
@@ -3354,9 +3923,9 @@ var Headers = {
       }, {
         key: 'getRightHeaderGroups',
         debug: function debug() {
-          var _instance$options$deb9;
+          var _instance$options$deb4;
 
-          return (_instance$options$deb9 = instance.options.debugAll) != null ? _instance$options$deb9 : instance.options.debugHeaders;
+          return (_instance$options$deb4 = instance.options.debugAll) != null ? _instance$options$deb4 : instance.options.debugHeaders;
         }
       }),
       // Footer Groups
@@ -3367,9 +3936,9 @@ var Headers = {
       }, {
         key: 'getFooterGroups',
         debug: function debug() {
-          var _instance$options$deb10;
+          var _instance$options$deb5;
 
-          return (_instance$options$deb10 = instance.options.debugAll) != null ? _instance$options$deb10 : instance.options.debugHeaders;
+          return (_instance$options$deb5 = instance.options.debugAll) != null ? _instance$options$deb5 : instance.options.debugHeaders;
         }
       }),
       getLeftFooterGroups: memo(function () {
@@ -3379,9 +3948,9 @@ var Headers = {
       }, {
         key: 'getLeftFooterGroups',
         debug: function debug() {
-          var _instance$options$deb11;
+          var _instance$options$deb6;
 
-          return (_instance$options$deb11 = instance.options.debugAll) != null ? _instance$options$deb11 : instance.options.debugHeaders;
+          return (_instance$options$deb6 = instance.options.debugAll) != null ? _instance$options$deb6 : instance.options.debugHeaders;
         }
       }),
       getCenterFooterGroups: memo(function () {
@@ -3391,9 +3960,9 @@ var Headers = {
       }, {
         key: 'getCenterFooterGroups',
         debug: function debug() {
-          var _instance$options$deb12;
+          var _instance$options$deb7;
 
-          return (_instance$options$deb12 = instance.options.debugAll) != null ? _instance$options$deb12 : instance.options.debugHeaders;
+          return (_instance$options$deb7 = instance.options.debugAll) != null ? _instance$options$deb7 : instance.options.debugHeaders;
         }
       }),
       getRightFooterGroups: memo(function () {
@@ -3403,9 +3972,9 @@ var Headers = {
       }, {
         key: 'getRightFooterGroups',
         debug: function debug() {
-          var _instance$options$deb13;
+          var _instance$options$deb8;
 
-          return (_instance$options$deb13 = instance.options.debugAll) != null ? _instance$options$deb13 : instance.options.debugHeaders;
+          return (_instance$options$deb8 = instance.options.debugAll) != null ? _instance$options$deb8 : instance.options.debugHeaders;
         }
       }),
       // Flat Headers
@@ -3418,9 +3987,9 @@ var Headers = {
       }, {
         key: 'getFlatHeaders',
         debug: function debug() {
-          var _instance$options$deb14;
+          var _instance$options$deb9;
 
-          return (_instance$options$deb14 = instance.options.debugAll) != null ? _instance$options$deb14 : instance.options.debugHeaders;
+          return (_instance$options$deb9 = instance.options.debugAll) != null ? _instance$options$deb9 : instance.options.debugHeaders;
         }
       }),
       getLeftFlatHeaders: memo(function () {
@@ -3432,9 +4001,9 @@ var Headers = {
       }, {
         key: 'getLeftFlatHeaders',
         debug: function debug() {
-          var _instance$options$deb15;
+          var _instance$options$deb10;
 
-          return (_instance$options$deb15 = instance.options.debugAll) != null ? _instance$options$deb15 : instance.options.debugHeaders;
+          return (_instance$options$deb10 = instance.options.debugAll) != null ? _instance$options$deb10 : instance.options.debugHeaders;
         }
       }),
       getCenterFlatHeaders: memo(function () {
@@ -3446,9 +4015,9 @@ var Headers = {
       }, {
         key: 'getCenterFlatHeaders',
         debug: function debug() {
-          var _instance$options$deb16;
+          var _instance$options$deb11;
 
-          return (_instance$options$deb16 = instance.options.debugAll) != null ? _instance$options$deb16 : instance.options.debugHeaders;
+          return (_instance$options$deb11 = instance.options.debugAll) != null ? _instance$options$deb11 : instance.options.debugHeaders;
         }
       }),
       getRightFlatHeaders: memo(function () {
@@ -3460,9 +4029,9 @@ var Headers = {
       }, {
         key: 'getRightFlatHeaders',
         debug: function debug() {
-          var _instance$options$deb17;
+          var _instance$options$deb12;
 
-          return (_instance$options$deb17 = instance.options.debugAll) != null ? _instance$options$deb17 : instance.options.debugHeaders;
+          return (_instance$options$deb12 = instance.options.debugAll) != null ? _instance$options$deb12 : instance.options.debugHeaders;
         }
       }),
       // Leaf Headers
@@ -3477,9 +4046,9 @@ var Headers = {
       }, {
         key: 'getCenterLeafHeaders',
         debug: function debug() {
-          var _instance$options$deb18;
+          var _instance$options$deb13;
 
-          return (_instance$options$deb18 = instance.options.debugAll) != null ? _instance$options$deb18 : instance.options.debugHeaders;
+          return (_instance$options$deb13 = instance.options.debugAll) != null ? _instance$options$deb13 : instance.options.debugHeaders;
         }
       }),
       getLeftLeafHeaders: memo(function () {
@@ -3493,9 +4062,9 @@ var Headers = {
       }, {
         key: 'getLeftLeafHeaders',
         debug: function debug() {
-          var _instance$options$deb19;
+          var _instance$options$deb14;
 
-          return (_instance$options$deb19 = instance.options.debugAll) != null ? _instance$options$deb19 : instance.options.debugHeaders;
+          return (_instance$options$deb14 = instance.options.debugAll) != null ? _instance$options$deb14 : instance.options.debugHeaders;
         }
       }),
       getRightLeafHeaders: memo(function () {
@@ -3509,9 +4078,9 @@ var Headers = {
       }, {
         key: 'getRightLeafHeaders',
         debug: function debug() {
-          var _instance$options$deb20;
+          var _instance$options$deb15;
 
-          return (_instance$options$deb20 = instance.options.debugAll) != null ? _instance$options$deb20 : instance.options.debugHeaders;
+          return (_instance$options$deb15 = instance.options.debugAll) != null ? _instance$options$deb15 : instance.options.debugHeaders;
         }
       }),
       getLeafHeaders: memo(function () {
@@ -3525,9 +4094,9 @@ var Headers = {
       }, {
         key: 'getLeafHeaders',
         debug: function debug() {
-          var _instance$options$deb21;
+          var _instance$options$deb16;
 
-          return (_instance$options$deb21 = instance.options.debugAll) != null ? _instance$options$deb21 : instance.options.debugHeaders;
+          return (_instance$options$deb16 = instance.options.debugAll) != null ? _instance$options$deb16 : instance.options.debugHeaders;
         }
       }),
       getHeader: function getHeader(id) {
@@ -3598,15 +4167,6 @@ var Headers = {
           rowSpan: header.rowSpan
         };
         return propGetter(initialProps, userProps);
-      },
-      getTotalWidth: function getTotalWidth() {
-        var width = 0;
-        instance.getVisibleLeafColumns().forEach(function (column) {
-          var _column$getWidth;
-
-          width += (_column$getWidth = column.getWidth()) != null ? _column$getWidth : 0;
-        });
-        return width;
       }
     };
   }
@@ -3655,11 +4215,11 @@ function buildHeaderGroups(allColumns, columnsToGroup, instance, headerFamily) {
       }
     }; // The parent columns we're going to scan next
 
-    var parentHeaders = []; // Scan each column for parents
+    var pendingParentHeaders = []; // Scan each column for parents
 
     headersToGroup.forEach(function (headerToGroup) {
       // What is the latest (last) parent column?
-      var latestParentHeader = [].concat(parentHeaders).reverse()[0];
+      var latestPendingParentHeader = [].concat(pendingParentHeaders).reverse()[0];
       var isLeafHeader = headerToGroup.column.depth === headerGroup.depth;
       var column;
       var isPlaceholder = false;
@@ -3673,37 +4233,41 @@ function buildHeaderGroups(allColumns, columnsToGroup, instance, headerFamily) {
         isPlaceholder = true;
       }
 
-      var header = instance.createHeader(column, {
-        id: [headerFamily, depth, column.id, headerToGroup == null ? void 0 : headerToGroup.id].filter(Boolean).join('_'),
-        isPlaceholder: isPlaceholder,
-        placeholderId: isPlaceholder ? "" + parentHeaders.filter(function (d) {
-          return d.column === column;
-        }).length : undefined,
-        depth: depth
-      });
-
-      if (!latestParentHeader || latestParentHeader.column !== header.column) {
-        header.subHeaders.push(headerToGroup);
-        parentHeaders.push(header);
+      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 {
-        latestParentHeader.subHeaders.push(headerToGroup);
-      } // if (!headerToGroup.isPlaceholder) {
-      //   headerToGroup.column.header = headerToGroup;
-      // }
-
+        // This is a new header. Let's create it
+        var header = instance.createHeader(column, {
+          id: [headerFamily, depth, column.id, headerToGroup == null ? void 0 : headerToGroup.id].filter(Boolean).join('_'),
+          isPlaceholder: isPlaceholder,
+          placeholderId: isPlaceholder ? "" + pendingParentHeaders.filter(function (d) {
+            return d.column === column;
+          }).length : undefined,
+          depth: 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(parentHeaders, depth - 1);
+      createHeaderGroup(pendingParentHeaders, depth - 1);
     }
   };
 
-  var bottomHeaders = columnsToGroup.map(function (column) {
+  var bottomHeaders = columnsToGroup.map(function (column, index) {
     return instance.createHeader(column, {
-      depth: maxDepth
+      depth: maxDepth,
+      index: index
     });
   });
   createHeaderGroup(bottomHeaders, maxDepth - 1);
@@ -3747,7 +4311,6 @@ function buildHeaderGroups(allColumns, columnsToGroup, instance, headerFamily) {
   return headerGroups;
 }
 
-var features = [Headers, Visibility, Ordering, Pinning, Filters, Sorting, Grouping, Expanding, Pagination, RowSelection, ColumnSizing];
 function createTableInstance(options) {
   var _options$initialState;
 
@@ -3756,7 +4319,9 @@ function createTableInstance(options) {
   }
 
   var instance = {};
-  var defaultOptions = features.reduce(function (obj, feature) {
+  instance._features = [Columns, Rows, Cells, Headers, Visibility, Ordering, Pinning, Filters, Sorting, Grouping, Expanding, Pagination, RowSelection, ColumnSizing];
+
+  var defaultOptions = instance._features.reduce(function (obj, feature) {
     return Object.assign(obj, feature.getDefaultOptions == null ? void 0 : feature.getDefaultOptions(instance));
   }, {});
 
@@ -3769,15 +4334,15 @@ function createTableInstance(options) {
     coreProgress: 1
   };
 
-  var initialState = _extends({}, coreInitialState, features.reduce(function (obj, feature) {
+  var initialState = _extends({}, coreInitialState, instance._features.reduce(function (obj, feature) {
     return Object.assign(obj, feature.getInitialState == null ? void 0 : feature.getInitialState());
   }, {}), (_options$initialState = options.initialState) != null ? _options$initialState : {});
 
   var queued = [];
   var queuedTimeout;
 
-  var finalInstance = _extends({}, instance, features.reduce(function (obj, feature) {
-    return Object.assign(obj, feature.getInstance == null ? void 0 : feature.getInstance(instance));
+  var finalInstance = _extends({}, instance, instance._features.reduce(function (obj, feature) {
+    return Object.assign(obj, feature.createInstance == null ? void 0 : feature.createInstance(instance));
   }, {}), {
     queue: function queue(cb) {
       queued.push(cb);
@@ -3821,339 +4386,12 @@ function createTableInstance(options) {
 
       return template;
     },
-    getRowId: function 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);
-    },
     getState: function getState() {
       return instance.options.state;
     },
     setState: function setState(updater) {
       instance.options.onStateChange == null ? void 0 : instance.options.onStateChange(updater);
     },
-    getDefaultColumn: memo(function () {
-      return [instance.options.defaultColumn];
-    }, function (defaultColumn) {
-      var _defaultColumn;
-
-      defaultColumn = (_defaultColumn = defaultColumn) != null ? _defaultColumn : {};
-      return _extends({
-        header: function header(props) {
-          return props.header.column.id;
-        },
-        footer: function footer(props) {
-          return props.header.column.id;
-        },
-        cell: function cell(_ref) {
-          var _ref$value = _ref.value,
-              value = _ref$value === void 0 ? '' : _ref$value;
-          return typeof value === 'boolean' ? value.toString() : value;
-        }
-      }, features.reduce(function (obj, feature) {
-        return Object.assign(obj, feature.getDefaultColumn == null ? void 0 : feature.getDefaultColumn());
-      }, {}), defaultColumn);
-    }, {
-      debug: function debug() {
-        var _instance$options$deb;
-
-        return (_instance$options$deb = instance.options.debugAll) != null ? _instance$options$deb : instance.options.debugColumns;
-      },
-      key: 'getDefaultColumn'
-    }),
-    getColumnDefs: function getColumnDefs() {
-      return instance.options.columns;
-    },
-    createColumn: function createColumn(columnDef, depth, parent) {
-      var _ref2, _columnDef$id;
-
-      var defaultColumn = instance.getDefaultColumn();
-      var id = (_ref2 = (_columnDef$id = columnDef.id) != null ? _columnDef$id : columnDef.accessorKey) != null ? _ref2 : typeof columnDef.header === 'string' ? columnDef.header : undefined;
-      var accessorFn;
-
-      if (columnDef.accessorFn) {
-        accessorFn = columnDef.accessorFn;
-      } else if (columnDef.accessorKey) {
-        accessorFn = function accessorFn(originalRow) {
-          return originalRow[columnDef.accessorKey];
-        };
-      }
-
-      if (!id) {
-        if (process.env.NODE_ENV !== 'production') {
-          throw new Error(columnDef.accessorFn ? "Columns require an id when using an accessorFn" : "Columns require an id when using a non-string header");
-        }
-
-        throw new Error();
-      }
-
-      var column = _extends({}, defaultColumn, columnDef, {
-        id: "" + id,
-        accessorFn: accessorFn,
-        parent: parent,
-        depth: depth,
-        columnDef: columnDef,
-        columnDefType: columnDef.columnDefType,
-        columns: [],
-        getWidth: function getWidth() {
-          return instance.getColumnWidth(column.id);
-        },
-        getFlatColumns: memo(function () {
-          return [true];
-        }, function () {
-          var _column$columns;
-
-          return [column].concat((_column$columns = column.columns) == null ? void 0 : _column$columns.flatMap(function (d) {
-            return d.getFlatColumns();
-          }));
-        }, {
-          key: 'column.getFlatColumns',
-          debug: function debug() {
-            var _instance$options$deb2;
-
-            return (_instance$options$deb2 = instance.options.debugAll) != null ? _instance$options$deb2 : instance.options.debugColumns;
-          }
-        }),
-        getLeafColumns: memo(function () {
-          return [instance._getOrderColumnsFn()];
-        }, function (orderColumns) {
-          var _column$columns2;
-
-          if ((_column$columns2 = column.columns) != null && _column$columns2.length) {
-            var leafColumns = column.columns.flatMap(function (column) {
-              return column.getLeafColumns();
-            });
-            return orderColumns(leafColumns);
-          }
-
-          return [column];
-        }, {
-          key: 'column.getLeafColumns',
-          debug: function debug() {
-            var _instance$options$deb3;
-
-            return (_instance$options$deb3 = instance.options.debugAll) != null ? _instance$options$deb3 : instance.options.debugColumns;
-          }
-        })
-      });
-
-      column = features.reduce(function (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(function () {
-      return [instance.getColumnDefs()];
-    }, function (columnDefs) {
-      var recurseColumns = function recurseColumns(columnDefs, parent, depth) {
-        if (depth === void 0) {
-          depth = 0;
-        }
-
-        return columnDefs.map(function (columnDef) {
-          var column = instance.createColumn(columnDef, depth, parent);
-          column.columns = columnDef.columns ? recurseColumns(columnDef.columns, column, depth + 1) : [];
-          return column;
-        });
-      };
-
-      return recurseColumns(columnDefs);
-    }, {
-      key: 'getAllColumns',
-      debug: function debug() {
-        var _instance$options$deb4;
-
-        return (_instance$options$deb4 = instance.options.debugAll) != null ? _instance$options$deb4 : instance.options.debugColumns;
-      }
-    }),
-    getAllFlatColumns: memo(function () {
-      return [instance.getAllColumns()];
-    }, function (allColumns) {
-      return allColumns.flatMap(function (column) {
-        return column.getFlatColumns();
-      });
-    }, {
-      key: 'getAllFlatColumns',
-      debug: function debug() {
-        var _instance$options$deb5;
-
-        return (_instance$options$deb5 = instance.options.debugAll) != null ? _instance$options$deb5 : instance.options.debugColumns;
-      }
-    }),
-    getAllFlatColumnsById: memo(function () {
-      return [instance.getAllFlatColumns()];
-    }, function (flatColumns) {
-      return flatColumns.reduce(function (acc, column) {
-        acc[column.id] = column;
-        return acc;
-      }, {});
-    }, {
-      key: 'getAllFlatColumnsById',
-      debug: function debug() {
-        var _instance$options$deb6;
-
-        return (_instance$options$deb6 = instance.options.debugAll) != null ? _instance$options$deb6 : instance.options.debugColumns;
-      }
-    }),
-    getAllLeafColumns: memo(function () {
-      return [instance.getAllColumns(), instance._getOrderColumnsFn()];
-    }, function (allColumns, orderColumns) {
-      var leafColumns = allColumns.flatMap(function (column) {
-        return column.getLeafColumns();
-      });
-      return orderColumns(leafColumns);
-    }, {
-      key: 'getAllLeafColumns',
-      debug: function debug() {
-        var _instance$options$deb7;
-
-        return (_instance$options$deb7 = instance.options.debugAll) != null ? _instance$options$deb7 : instance.options.debugColumns;
-      }
-    }),
-    getColumn: function getColumn(columnId) {
-      var column = instance.getAllFlatColumnsById()[columnId];
-
-      if (!column) {
-        if (process.env.NODE_ENV !== 'production') {
-          console.warn("[Table] Column with id " + columnId + " does not exist.");
-        }
-
-        throw new Error();
-      }
-
-      return column;
-    },
-    createCell: function createCell(row, column, value) {
-      var cell = {
-        id: row.id + "_" + column.id,
-        rowId: row.id,
-        columnId: column.id,
-        row: row,
-        column: column,
-        value: value,
-        getCellProps: function getCellProps(userProps) {
-          return instance.getCellProps(row.id, column.id, userProps);
-        },
-        renderCell: function renderCell() {
-          return column.cell ? instance.render(column.cell, {
-            instance: instance,
-            column: column,
-            row: row,
-            cell: cell,
-            value: value
-          }) : null;
-        }
-      };
-      features.forEach(function (feature) {
-        Object.assign(cell, feature.createCell == null ? void 0 : feature.createCell(cell, column, row, instance));
-      }, {});
-      return cell;
-    },
-    createRow: function createRow(id, original, rowIndex, depth, values) {
-      var row = {
-        id: id,
-        index: rowIndex,
-        original: original,
-        depth: depth,
-        values: values,
-        subRows: [],
-        getLeafRows: function getLeafRows() {
-          return flattenBy(row.subRows, function (d) {
-            return d.subRows;
-          });
-        },
-        getRowProps: function getRowProps(userProps) {
-          return instance.getRowProps(row.id, userProps);
-        },
-        getAllCells: undefined,
-        getAllCellsByColumnId: undefined
-      };
-      row.getAllCells = memo(function () {
-        return [instance.getAllLeafColumns()];
-      }, function (leafColumns) {
-        return leafColumns.map(function (column) {
-          return instance.createCell(row, column, row.values[column.id]);
-        });
-      }, {
-        key: process.env.NODE_ENV !== 'production' ? 'row.getAllCells' : '',
-        debug: function debug() {
-          var _instance$options$deb8;
-
-          return (_instance$options$deb8 = instance.options.debugAll) != null ? _instance$options$deb8 : instance.options.debugRows;
-        }
-      });
-      row.getAllCellsByColumnId = memo(function () {
-        return [row.getAllCells()];
-      }, function (allCells) {
-        return allCells.reduce(function (acc, cell) {
-          acc[cell.columnId] = cell;
-          return acc;
-        }, {});
-      }, {
-        key: 'row.getAllCellsByColumnId',
-        debug: function debug() {
-          var _instance$options$deb9;
-
-          return (_instance$options$deb9 = instance.options.debugAll) != null ? _instance$options$deb9 : instance.options.debugRows;
-        }
-      });
-
-      for (var i = 0; i < features.length; i++) {
-        var feature = features[i];
-        Object.assign(row, feature.createRow == null ? void 0 : feature.createRow(row, instance));
-      }
-
-      return row;
-    },
-    getCoreRowModel: function 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: function getRowModel() {
-      return instance.getPaginationRowModel();
-    },
-    getRow: function getRow(id) {
-      var row = instance.getRowModel().rowsById[id];
-
-      if (!row) {
-        if (process.env.NODE_ENV !== 'production') {
-          throw new Error("getRow expected an ID, but got " + id);
-        }
-
-        throw new Error();
-      }
-
-      return row;
-    },
-    getCell: function getCell(rowId, columnId) {
-      var row = instance.getRow(rowId);
-
-      if (!row) {
-        if (process.env.NODE_ENV !== 'production') {
-          throw new Error("[Table] could not find row with id " + rowId);
-        }
-
-        throw new Error();
-      }
-
-      var cell = row.getAllCellsByColumnId()[columnId];
-
-      if (!cell) {
-        if (process.env.NODE_ENV !== 'production') {
-          throw new Error("[Table] could not find cell " + columnId + " in row " + rowId);
-        }
-
-        throw new Error();
-      }
-
-      return cell;
-    },
     getTableProps: function getTableProps(userProps) {
       return propGetter({
         role: 'table'
@@ -4164,58 +4402,6 @@ function createTableInstance(options) {
         role: 'rowgroup'
       }, userProps);
     },
-    getRowProps: function getRowProps(rowId, userProps) {
-      var row = instance.getRow(rowId);
-
-      if (!row) {
-        return;
-      }
-
-      return propGetter({
-        key: row.id,
-        role: 'row'
-      }, userProps);
-    },
-    getCellProps: function getCellProps(rowId, columnId, userProps) {
-      var cell = instance.getCell(rowId, columnId);
-
-      if (!cell) {
-        return;
-      }
-
-      return propGetter({
-        key: cell.id,
-        role: 'gridcell'
-      }, userProps);
-    },
-    getTableWidth: function getTableWidth() {
-      var _instance$getHeaderGr, _instance$getHeaderGr2;
-
-      return (_instance$getHeaderGr = (_instance$getHeaderGr2 = instance.getHeaderGroups()[0]) == null ? void 0 : _instance$getHeaderGr2.headers.reduce(function (sum, header) {
-        return sum + header.getWidth();
-      }, 0)) != null ? _instance$getHeaderGr : 0;
-    },
-    getLeftTableWidth: function getLeftTableWidth() {
-      var _instance$getLeftHead, _instance$getLeftHead2;
-
-      return (_instance$getLeftHead = (_instance$getLeftHead2 = instance.getLeftHeaderGroups()[0]) == null ? void 0 : _instance$getLeftHead2.headers.reduce(function (sum, header) {
-        return sum + header.getWidth();
-      }, 0)) != null ? _instance$getLeftHead : 0;
-    },
-    getCenterTableWidth: function getCenterTableWidth() {
-      var _instance$getCenterHe, _instance$getCenterHe2;
-
-      return (_instance$getCenterHe = (_instance$getCenterHe2 = instance.getCenterHeaderGroups()[0]) == null ? void 0 : _instance$getCenterHe2.headers.reduce(function (sum, header) {
-        return sum + header.getWidth();
-      }, 0)) != null ? _instance$getCenterHe : 0;
-    },
-    getRightTableWidth: function getRightTableWidth() {
-      var _instance$getRightHea, _instance$getRightHea2;
-
-      return (_instance$getRightHea = (_instance$getRightHea2 = instance.getRightHeaderGroups()[0]) == null ? void 0 : _instance$getRightHea2.headers.reduce(function (sum, header) {
-        return sum + header.getWidth();
-      }, 0)) != null ? _instance$getRightHea : 0;
-    },
     getOverallProgress: function getOverallProgress() {
       var _instance$getState = instance.getState(),
           coreProgress = _instance$getState.coreProgress,