@tanstack/table-core 8.0.0-alpha.54 → 8.0.0-alpha.58

package/build/umd/index.development.js

@@ -367,11 +367,385 @@
     };
   } // 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) {
+            {
+              throw new Error(columnDef.accessorFn ? "Columns require an id when using an accessorFn" : "Columns require an id when using a non-string header");
+            }
+          }
+
+          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) {
+            {
+              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) {
+            {
+              throw new Error("getRow expected an ID, but got " + id);
+            }
+          }
+
+          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: '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) {
+            {
+              throw new Error("[Table] could not find row with id " + rowId);
+            }
+          }
+
+          var cell = row.getAllCellsByColumnId()[columnId];
+
+          if (!cell) {
+            {
+              throw new Error("[Table] could not find cell " + columnId + " in row " + rowId);
+            }
+          }
+
+          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() {
@@ -397,10 +771,45 @@
         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 {
-        getColumnWidth: function getColumnWidth(columnId) {
-          var _column$minWidth, _ref, _column$maxWidth;
+        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 {
+        getColumnSize: function getColumnSize(columnId) {
+          var _column$minSize, _ref, _column$maxSize;
 
           var column = instance.getColumn(columnId);
 
@@ -409,7 +818,26 @@
           }
 
           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);
@@ -491,10 +919,10 @@
             }
 
             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) {
@@ -510,8 +938,8 @@
                 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,
@@ -614,35 +1042,34 @@
             }
           } : {};
           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;
         }
       };
     }
@@ -692,7 +1119,7 @@
         paginateExpandedRows: true
       };
     },
-    getInstance: function getInstance(instance) {
+    createInstance: function createInstance(instance) {
       var registered = false;
       return {
         queueResetExpanded: function queueResetExpanded() {
@@ -862,7 +1289,7 @@
             instance._getExpandedRowModel = instance.options.getExpandedRowModel(instance);
           }
 
-          if (!instance._getExpandedRowModel) {
+          if (instance.options.manualExpanding || !instance._getExpandedRowModel) {
             return instance.getPreExpandedRowModel();
           }
 
@@ -1151,7 +1578,7 @@
         }
       };
     },
-    getInstance: function getInstance(instance) {
+    createInstance: function createInstance(instance) {
       var registered = false;
       return {
         queueResetFilters: function queueResetFilters() {
@@ -1353,7 +1780,7 @@
             instance._getColumnFilteredRowModel = instance.options.getColumnFilteredRowModel(instance);
           }
 
-          if (!instance._getColumnFilteredRowModel) {
+          if (instance.options.manualColumnFiltering || !instance._getColumnFilteredRowModel) {
             return instance.getPreColumnFilteredRowModel();
           }
 
@@ -1367,7 +1794,7 @@
             instance._getGlobalFilteredRowModel = instance.options.getGlobalFilteredRowModel(instance);
           }
 
-          if (!instance._getGlobalFilteredRowModel) {
+          if (instance.options.manualGlobalFiltering || !instance._getGlobalFilteredRowModel) {
             return instance.getPreGlobalFilteredRowModel();
           }
 
@@ -1533,7 +1960,7 @@
         }
       };
     },
-    getInstance: function getInstance(instance) {
+    createInstance: function createInstance(instance) {
       var registered = false;
       return {
         queueResetGrouping: function queueResetGrouping() {
@@ -1643,7 +2070,7 @@
             instance._getGroupedRowModel = instance.options.getGroupedRowModel(instance);
           }
 
-          if (!instance._getGroupedRowModel) {
+          if (instance.options.manualGrouping || !instance._getGroupedRowModel) {
             return instance.getPreGroupedRowModel();
           }
 
@@ -1719,7 +2146,7 @@
         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);
@@ -1791,7 +2218,7 @@
         autoResetPageIndex: true
       };
     },
-    getInstance: function getInstance(instance) {
+    createInstance: function createInstance(instance) {
       var registered = false;
       return {
         queueResetPageIndex: function queueResetPageIndex() {
@@ -1898,81 +2325,203 @@
             return true;
           }
 
-          if (pageCount === 0) {
-            return false;
+          if (pageCount === 0) {
+            return false;
+          }
+
+          return pageIndex < pageCount - 1;
+        },
+        previousPage: function previousPage() {
+          return instance.setPageIndex(function (old) {
+            return old - 1;
+          });
+        },
+        nextPage: function nextPage() {
+          return instance.setPageIndex(function (old) {
+            return old + 1;
+          });
+        },
+        getPrePaginationRowModel: function getPrePaginationRowModel() {
+          return instance.getExpandedRowModel();
+        },
+        getPaginationRowModel: function getPaginationRowModel() {
+          if (!instance._getPaginationRowModel && instance.options.getPaginationRowModel) {
+            instance._getPaginationRowModel = instance.options.getPaginationRowModel(instance);
+          }
+
+          if (instance.options.manualPagination || !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;
           }
-
-          return pageIndex < pageCount - 1;
-        },
-        previousPage: function previousPage() {
-          return instance.setPageIndex(function (old) {
-            return old - 1;
-          });
-        },
-        nextPage: function nextPage() {
-          return instance.setPageIndex(function (old) {
-            return old + 1;
+        }),
+        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'
+            });
           });
-        },
-        getPrePaginationRowModel: function getPrePaginationRowModel() {
-          return instance.getExpandedRowModel();
-        },
-        getPaginationRowModel: function getPaginationRowModel() {
-          if (!instance._getPaginationRowModel && instance.options.getPaginationRowModel) {
-            instance._getPaginationRowModel = instance.options.getPaginationRowModel(instance);
-          }
+          return cells;
+        }, {
+          key: 'row.getLeftVisibleCells',
+          debug: function debug() {
+            var _instance$options$deb5;
 
-          if (!instance._getPaginationRowModel) {
-            return instance.getPrePaginationRowModel();
+            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);
@@ -2072,7 +2621,54 @@
               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;
+          }
+        })
       };
     }
   };
@@ -2096,7 +2692,7 @@
 
       };
     },
-    getInstance: function getInstance(instance) {
+    createInstance: function createInstance(instance) {
       var registered = false; // const pageRows = instance.getPageRows()
 
       return {
@@ -2739,7 +3335,7 @@
         }
       };
     },
-    getInstance: function getInstance(instance) {
+    createInstance: function createInstance(instance) {
       var registered = false;
       return {
         queueResetSorting: function queueResetSorting() {
@@ -2980,7 +3576,7 @@
             instance._getSortedRowModel = instance.options.getSortedRowModel(instance);
           }
 
-          if (!instance._getSortedRowModel) {
+          if (instance.options.manualSorting || !instance._getSortedRowModel) {
             return instance.getPreSortedRowModel();
           }
 
@@ -3031,43 +3627,77 @@
         }
       };
     },
-    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);
@@ -3107,128 +3737,45 @@
         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;
+          var column = instance.getColumn(columnId);
 
-            return (_instance$options$deb4 = instance.options.debugAll) != null ? _instance$options$deb4 : instance.options.debugRows;
+          if (!column) {
+            throw new Error();
           }
-        }),
-        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;
 
-            return (_instance$options$deb5 = instance.options.debugAll) != null ? _instance$options$deb5 : instance.options.debugRows;
-          }
-        })
+          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;
@@ -3237,28 +3784,38 @@
           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 = [];
 
@@ -3293,9 +3850,13 @@
                 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 () {
@@ -3315,9 +3876,9 @@
         }, {
           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 () {
@@ -3330,9 +3891,9 @@
         }, {
           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 () {
@@ -3345,9 +3906,9 @@
         }, {
           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 () {
@@ -3360,9 +3921,9 @@
         }, {
           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
@@ -3373,9 +3934,9 @@
         }, {
           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 () {
@@ -3385,9 +3946,9 @@
         }, {
           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 () {
@@ -3397,9 +3958,9 @@
         }, {
           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 () {
@@ -3409,9 +3970,9 @@
         }, {
           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
@@ -3424,9 +3985,9 @@
         }, {
           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 () {
@@ -3438,9 +3999,9 @@
         }, {
           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 () {
@@ -3452,9 +4013,9 @@
         }, {
           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 () {
@@ -3466,9 +4027,9 @@
         }, {
           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
@@ -3483,9 +4044,9 @@
         }, {
           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 () {
@@ -3499,9 +4060,9 @@
         }, {
           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 () {
@@ -3515,9 +4076,9 @@
         }, {
           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 () {
@@ -3531,9 +4092,9 @@
         }, {
           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) {
@@ -3604,15 +4165,6 @@
             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;
         }
       };
     }
@@ -3661,11 +4213,11 @@
         }
       }; // 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;
@@ -3679,37 +4231,41 @@
           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);
@@ -3753,7 +4309,6 @@
     return headerGroups;
   }
 
-  var features = [Headers, Visibility, Ordering, Pinning, Filters, Sorting, Grouping, Expanding, Pagination, RowSelection, ColumnSizing];
   function createTableInstance(options) {
     var _options$initialState;
 
@@ -3762,7 +4317,9 @@
     }
 
     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));
     }, {});
 
@@ -3775,15 +4332,15 @@
       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);
@@ -3827,331 +4384,12 @@
 
         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) {
-          {
-            throw new Error(columnDef.accessorFn ? "Columns require an id when using an accessorFn" : "Columns require an id when using a non-string header");
-          }
-        }
-
-        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) {
-          {
-            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: '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) {
-          {
-            throw new Error("getRow expected an ID, but got " + id);
-          }
-        }
-
-        return row;
-      },
-      getCell: function getCell(rowId, columnId) {
-        var row = instance.getRow(rowId);
-
-        if (!row) {
-          {
-            throw new Error("[Table] could not find row with id " + rowId);
-          }
-        }
-
-        var cell = row.getAllCellsByColumnId()[columnId];
-
-        if (!cell) {
-          {
-            throw new Error("[Table] could not find cell " + columnId + " in row " + rowId);
-          }
-        }
-
-        return cell;
-      },
       getTableProps: function getTableProps(userProps) {
         return propGetter({
           role: 'table'
@@ -4162,58 +4400,6 @@
           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,