@tanstack/react-table 0.0.1-alpha.8 → 8.0.0-alpha.2

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@tanstack/react-table",
-  "version": "0.0.1-alpha.8",
+  "author": "Tanner Linsley",
+  "version": "8.0.0-alpha.2",
   "description": "Hooks for building lightweight, fast and extendable datagrids for React",
   "license": "MIT",
-  "homepage": "https://github.com/tannerlinsley/react-table#readme",
+  "homepage": "https://github.com/tanstack/react-table#readme",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/tannerlinsley/react-table.git"
+    "url": "git+https://github.com/tanstack/react-table.git"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -21,105 +22,19 @@
     "type": "github",
     "url": "https://github.com/sponsors/tannerlinsley"
   },
-  "main": "lib/index.js",
-  "module": "es/index.js",
-  "typings": "types/index.d.ts",
-  "scripts": {
-    "test": "(is-ci && yarn test:ci) || yarn test:dev",
-    "test:dev": "jest --watch",
-    "test:ci": "jest",
-    "test:coverage": "yarn test:ci; open coverage/lcov-report/index.html",
-    "build": "yarn format && yarn build:commonjs && yarn build:es && yarn build:umd && yarn build:types",
-    "build:commonjs": "rimraf ./lib && cross-env BABEL_ENV=commonjs babel --extensions .ts,.tsx --ignore ./src/**/tests/**/* ./src --out-dir lib",
-    "build:es": "rimraf ./es && babel --extensions .ts,.tsx --ignore ./src/**/tests/**/* ./src --out-dir es",
-    "build:umd": "rimraf ./dist && cross-env NODE_ENV=production rollup -c && rollup-plugin-visualizer stats-react.json",
-    "build:types": "rimraf ./types && tsc --project ./tsconfig.types.json && replace 'import type' 'import' ./types -r --silent && replace 'export type' 'export' ./types -r --silent",
-    "watch": "yarn watch:commonjs & yarn watch:es & yarn watch:umd & yarn watch:types",
-    "watch:commonjs": "rimraf ./lib && cross-env BABEL_ENV=commonjs babel --watch --extensions .ts,.tsx --ignore ./src/**/tests/**/* ./src --out-dir lib",
-    "watch:es": "rimraf ./es && babel --watch --extensions .ts,.tsx --ignore ./src/**/tests/**/* ./src --out-dir es",
-    "watch:umd": "rimraf ./dist && cross-env NODE_ENV=production rollup -w -c && rollup-plugin-visualizer stats-react.json",
-    "watch:types": "rimraf ./types && tsc --watch --project ./tsconfig.types.json && replace 'import type' 'import' ./types -r --silent && replace 'export type' 'export' ./types -r --silent",
-    "now-build": "yarn && cd www && yarn && yarn build",
-    "prettier": "prettier \"{.,src,src/**,example/src,example/src/**}/*.{md,js,jsx,ts,tsx,json}\"",
-    "start": "yarn watch",
-    "format": "yarn prettier --write",
-    "stats": "open ./stats.html",
-    "doctoc": "doctoc README.md"
-  },
+  "module": "build/esm/index.js",
+  "main": "build/cjs/index.js",
+  "browser": "build/umd/index.production.min.js",
+  "types": "build/types/index.d.ts",
   "engines": {
     "node": ">=12"
   },
-  "release": {
-    "branches": [
-      "master",
-      {
-        "name": "beta",
-        "prerelease": true
-      }
-    ]
-  },
   "files": [
-    "dist",
+    "build",
     "src"
   ],
-  "browserslist": [
-    "last 2 versions",
-    "> 0.2%"
-  ],
   "peerDependencies": {
     "react": ">=16",
     "react-dom": ">=16"
-  },
-  "dependencies": {
-    "ts-toolbelt": "^9.6.0"
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.15.7",
-    "@babel/core": "^7.15.8",
-    "@babel/plugin-transform-runtime": "^7.15.8",
-    "@babel/preset-env": "^7.15.8",
-    "@babel/preset-react": "^7.14.5",
-    "@babel/preset-typescript": "^7.15.0",
-    "@rollup/plugin-replace": "^3.0.0",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.1.2",
-    "@testing-library/react-hooks": "^7.0.2",
-    "@types/react": "^17.0.27",
-    "@types/react-dom": "^17.0.9",
-    "@types/semver": "^7.3.9",
-    "babel-plugin-const-enum": "^1.1.0",
-    "babel-plugin-dev-expression": "^0.2.2",
-    "babel-plugin-transform-async-to-promises": "^0.8.15",
-    "conventional-changelog-angular": "^5.0.13",
-    "cross-env": "^7.0.3",
-    "current-git-branch": "^1.1.0",
-    "doctoc": "^2.1.0",
-    "fast-async": "^6.3.8",
-    "git-log-parser": "^1.2.0",
-    "is-ci": "^3.0.0",
-    "jest": "^27.4.5",
-    "jsonfile": "^6.1.0",
-    "lerna": "^4.0.0",
-    "prettier": "^2.4.1",
-    "prompt-confirm": "^2.0.4",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-test-renderer": "^17.0.2",
-    "replace": "^1.2.1",
-    "rimraf": "^3.0.2",
-    "rollup": "^2.16.1",
-    "rollup-plugin-babel": "^4.4.0",
-    "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-jscc": "^1.0.0",
-    "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-peer-deps-external": "^2.2.2",
-    "rollup-plugin-prettier": "^2.1.0",
-    "rollup-plugin-size": "^0.2.2",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-visualizer": "^5.5.2",
-    "stream-to-array": "^2.3.0",
-    "ts-node": "^10.3.0",
-    "tslib": "^2.3.1",
-    "typescript": "^4.4.3"
   }
 }

package/src/core.tsx

@@ -38,6 +38,7 @@ import * as Filters from './features/Filters'
 import * as Sorting from './features/Sorting'
 import * as Grouping from './features/Grouping'
 import * as Expanding from './features/Expanding'
+import * as ColumnSizing from './features/ColumnSizing'
 import { RowModel } from '.'
 
 // import './features/withColumnResizing';
@@ -225,6 +226,10 @@ export type TableCore<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> =
       columnId: string,
       userProps?: TGetter
     ) => undefined | PropGetterValue<CellProps, TGetter>
+    getTableWidth: () => number
+    getLeftTableWidth: () => number
+    getCenterTableWidth: () => number
+    getRightTableWidth: () => number
   }
 
 export type CoreRow<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> = {
@@ -410,6 +415,7 @@ export function createTableInstance<
     ...Sorting.getDefaultOptions(instance),
     ...Grouping.getDefaultOptions(instance),
     ...Expanding.getDefaultOptions(instance),
+    ...ColumnSizing.getDefaultOptions(instance),
   }
 
   const defaultState = {}
@@ -432,6 +438,7 @@ export function createTableInstance<
     ...Sorting.getInitialState(),
     ...Grouping.getInitialState(),
     ...Expanding.getInitialState(),
+    ...ColumnSizing.getInitialState(),
     ...(options.initialState ?? {}),
   }
 
@@ -451,6 +458,7 @@ export function createTableInstance<
     ...Sorting.getInstance(instance),
     ...Grouping.getInstance(instance),
     ...Expanding.getInstance(instance),
+    ...ColumnSizing.getInstance(instance),
     rerender,
     initialState,
     internalState: initialState,
@@ -563,9 +571,7 @@ export function createTableInstance<
         TSortingFns,
         TAggregationFns
       > = {
-        width: 150,
-        minWidth: 20,
-        maxWidth: Number.MAX_SAFE_INTEGER,
+        ...ColumnSizing.defaultColumnSizing,
         ...defaultColumn,
         ...columnDef,
         id: `${id}`,
@@ -669,6 +675,16 @@ export function createTableInstance<
             TAggregationFns
           >,
           instance
+        ),
+        ColumnSizing.createColumn(
+          column as Column<
+            TData,
+            TValue,
+            TFilterFns,
+            TSortingFns,
+            TAggregationFns
+          >,
+          instance
         )
       )
 
@@ -783,9 +799,14 @@ export function createTableInstance<
         throw new Error()
       }
 
+      const columnSize = instance.getState().columnSizing[column.id]
+
       return Math.min(
-        Math.max(column.minWidth ?? 0, column.width ?? 0),
-        column.maxWidth ?? 0
+        Math.max(
+          column.minWidth ?? ColumnSizing.defaultColumnSizing.minWidth,
+          columnSize ?? column.width ?? ColumnSizing.defaultColumnSizing.width
+        ),
+        column.maxWidth ?? ColumnSizing.defaultColumnSizing.maxWidth
       )
     },
 
@@ -1188,6 +1209,23 @@ export function createTableInstance<
         userProps
       )
     },
+
+    getTableWidth: () =>
+      instance.getHeaderGroups()[0]?.headers.reduce((sum, header) => {
+        return sum + header.getWidth()
+      }, 0) ?? 0,
+    getLeftTableWidth: () =>
+      instance.getLeftHeaderGroups()[0]?.headers.reduce((sum, header) => {
+        return sum + header.getWidth()
+      }, 0) ?? 0,
+    getCenterTableWidth: () =>
+      instance.getCenterHeaderGroups()[0]?.headers.reduce((sum, header) => {
+        return sum + header.getWidth()
+      }, 0) ?? 0,
+    getRightTableWidth: () =>
+      instance.getRightHeaderGroups()[0]?.headers.reduce((sum, header) => {
+        return sum + header.getWidth()
+      }, 0) ?? 0,
   }
 
   return Object.assign(instance, finalInstance)

package/src/createTable.tsx

@@ -5,7 +5,7 @@ import { ReactTable, ColumnDef, AccessorFn, Options } from './types'
 import { Overwrite } from './utils'
 
 type TableHelper<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> = {
-  RowType: <TTData>() => TableHelper<
+  RowType<TTData>(): TableHelper<
     TTData,
     TValue,
     TFilterFns,