diff --git a/.babelrc b/.babelrc
index 84a6e357..6ba25a69 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,29 +1,24 @@
{
- "presets": [
- [
- "@babel/preset-env",
- {
- "modules": "commonjs",
- },
- ],
- "@babel/preset-react",
- ],
- "plugins": [
- "@babel/plugin-proposal-class-properties",
- "@babel/plugin-proposal-object-rest-spread",
- "@babel/plugin-transform-runtime"
- ],
- "env": {
- "es": {
- "presets": [
+ "presets": [
[
- "@babel/preset-env",
- {
- "modules": false,
- "loose": true,
- },
+ "@babel/preset-env",
+ {
+ "modules": "commonjs"
+ }
],
- ],
- },
- },
-}
+ "@babel/preset-typescript",
+ "@babel/preset-react",
+ [
+ "minify",
+ {
+ "builtIns": false
+ }
+ ]
+ ],
+ "comments": false,
+ "plugins": [
+ "@babel/plugin-proposal-class-properties",
+ "@babel/plugin-proposal-object-rest-spread",
+ "@babel/plugin-transform-runtime"
+ ]
+}
\ No newline at end of file
diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 00000000..664e3e2f
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,19 @@
+# editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 4
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.{json,yml}]
+indent_size = 2
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false
+
diff --git a/.eslintignore b/.eslintignore
index 2a6c1300..94fd376e 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -4,3 +4,4 @@ website/
node_modules/
package-lock.json
yarn.lock
+/**/*.d.ts
diff --git a/.eslintrc b/.eslintrc
index bf42dace..0373a585 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,7 +1,26 @@
{
- "extends": ["react-app", "plugin:prettier/recommended", "prettier"],
- "plugins": ["prettier"],
- "rules": {
- "react/prop-types": 2
- }
-}
+ "parser": "@typescript-eslint/parser",
+ "extends": [
+ "react-app",
+ "plugin:prettier/recommended",
+ "plugin:@typescript-eslint/eslint-recommended",
+ "plugin:@typescript-eslint/recommended",
+ "prettier"
+ ],
+ "plugins": [
+ "eslint-plugin-react",
+ "prettier",
+ "@typescript-eslint"
+ ],
+ "settings": {
+ "react": {
+ "pragma": "React",
+ "version": "detect"
+ }
+ },
+ "env": {
+ "browser": true,
+ "es6": true,
+ "jest": true
+ }
+}
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 5f6fd19b..3f21d157 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,3 +16,4 @@ styles.css
es/
lib/
coverage/
+types/
diff --git a/.nvmrc b/.nvmrc
index 5007551b..72e4a483 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-10.16.0
+18.14.2
diff --git a/.prettierrc b/.prettierrc
index adfa02ea..50d7ab19 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,6 +1,11 @@
{
+ "tabWidth": 4,
"semi": true,
"singleQuote": true,
- "trailingComma": "es5",
- "printWidth": 120
-}
+ "useTabs": false,
+ "trailingComma": "none",
+ "bracketSpacing": true,
+ "jsxBracketSameLine": false,
+ "printWidth": 120,
+ "endOfLine": "auto"
+}
\ No newline at end of file
diff --git a/.python-version b/.python-version
new file mode 100644
index 00000000..a6164926
--- /dev/null
+++ b/.python-version
@@ -0,0 +1 @@
+2.7.18
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 929fde8c..d4c26c93 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,81 @@
+# Changelog
+
+All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+
+## [1.2.0-alpha.0](https://github.com/royue/react-context-table/compare/v1.1.2-alpha.3...v1.2.0-alpha.0) (2023-03-09)
+
+
+### Features
+
+* **tsx:** update dependencies ([eadb26e](https://github.com/royue/react-context-table/commit/eadb26eb7892b2a0c16a2a424e9f22b3d3638137))
+
+### [1.1.2-alpha.3](https://github.com/royue/react-context-table/compare/v1.1.2-alpha.2...v1.1.2-alpha.3) (2023-03-07)
+
+### [1.1.2-alpha.2](https://github.com/royue/react-context-table/compare/v1.1.2-alpha.1...v1.1.2-alpha.2) (2023-03-07)
+
+### [1.1.2-alpha.1](https://github.com/royue/react-context-table/compare/v1.1.2-alpha.0...v1.1.2-alpha.1) (2023-03-07)
+
+### [1.1.2-alpha.0](https://github.com/royue/react-context-table/compare/v1.1.2...v1.1.2-alpha.0) (2023-03-07)
+
+### [1.1.2](https://github.com/royue/react-context-table/compare/v1.1.1...v1.1.2) (2023-03-07)
+
+### [1.1.1](https://github.com/royue/react-context-table/compare/v1.1.0...v1.1.1) (2023-03-07)
+
+## [1.1.0](https://github.com/royue/react-context-table/compare/v1.0.0...v1.1.0) (2023-03-07)
+
+
+### Features
+
+* add ignoreFunctionInColumnCompare to solve closure problem in renderers ([#213](https://github.com/royue/react-context-table/issues/213)) ([7da845d](https://github.com/royue/react-context-table/commit/7da845d297425a47e5ec3f3b549cf5e257b1aa61))
+* add support for dynamic row height ([#170](https://github.com/royue/react-context-table/issues/170)) ([784b475](https://github.com/royue/react-context-table/commit/784b4759a504349409256e4481d745b6c0a8b99e))
+* add the ability to pass function in estimatedRowHeight to determine the initial height of rows ([#241](https://github.com/royue/react-context-table/issues/241)) ([8e657a4](https://github.com/royue/react-context-table/commit/8e657a4dbf424cf3c3cdac2287f26c5723021372))
+* add type declarations ([#193](https://github.com/royue/react-context-table/issues/193)) ([4231399](https://github.com/royue/react-context-table/commit/42313999a522648588e6849f48026da96ccf7ac4))
+* Added onColumnResizeEnd prop to BaseTable ([#95](https://github.com/royue/react-context-table/issues/95)) ([f0f8d56](https://github.com/royue/react-context-table/commit/f0f8d5621154341a9422abddec671ca8e2279785))
+* cell render add render method ([1fcf85b](https://github.com/royue/react-context-table/commit/1fcf85bd66f764246db42328cb68db6d6a63a635))
+* **expand detail:** 支持expand detail 不随x轴滚动 ([f6c8d43](https://github.com/royue/react-context-table/commit/f6c8d4344dc9c957920b6164aa8caf78e8b693b4))
+* init ([f868225](https://github.com/royue/react-context-table/commit/f8682255a5ad8869222830f92361b2c36d87695a))
+* **typescript:** ts转化 ([f4cfa58](https://github.com/royue/react-context-table/commit/f4cfa581f7a3c047c5131f3488b8883c84304368))
+* width 为0的column隐藏显示列 ([a490cac](https://github.com/royue/react-context-table/commit/a490cacfb9bca2c34ee2942a89365cd97a3d0b90))
+* 依赖版本升级,加入ts ([c279996](https://github.com/royue/react-context-table/commit/c279996cc2a3a062636ec2a96da58e6b751bc342))
+* **列属性:** 新增gridHeadCellStyle、gridCellStyle ([70996a4](https://github.com/royue/react-context-table/commit/70996a4d13b8b1a74b2c1f4000812d55a5f27de8))
+* 新增底部固定栏 ([7f2442c](https://github.com/royue/react-context-table/commit/7f2442c9e989d24c245e95cfdd33348333abf1c8))
+
+
+### Bug Fixes
+
+* add missing types for propTypes of BaseTable ([#219](https://github.com/royue/react-context-table/issues/219)) ([9a89e35](https://github.com/royue/react-context-table/commit/9a89e350f6a693fda0c4386363a2fc75cdcbcfe8))
+* **baseIdx、isForceKey:** 字段支持 ([8014526](https://github.com/royue/react-context-table/commit/801452690900ad991f19fd28b65b32d2f4c5d894))
+* bring back column resize on touch support ([#83](https://github.com/royue/react-context-table/issues/83)) ([8095e78](https://github.com/royue/react-context-table/commit/8095e78ce639d60423220e5615df942776597a59))
+* change propTypes for BaseTable.components ([#274](https://github.com/royue/react-context-table/issues/274)) ([6c8b237](https://github.com/royue/react-context-table/commit/6c8b2372c8185c1c6d80a7c7bab7cc2f01e3e689))
+* content been selected when dragging on IE/FF ([2261925](https://github.com/royue/react-context-table/commit/2261925993e285eee3f1e54d23efcd5126100920))
+* **detail view:** 修复滚动问题 ([5e41a0a](https://github.com/royue/react-context-table/commit/5e41a0a03795fce4697b9a27ead88d28fe40690f))
+* dynamic rowHeight is not updated when data/columns changed ([#181](https://github.com/royue/react-context-table/issues/181)) ([ba904fe](https://github.com/royue/react-context-table/commit/ba904feb1d58a0a0ed300bf13b9e71d504dd8970))
+* dynamic rowHeight is not updated when resizing column ([#175](https://github.com/royue/react-context-table/issues/175)) ([0ff11a5](https://github.com/royue/react-context-table/commit/0ff11a523c524b430fe0d7de40f70e50b001b7f2))
+* flattenOnKeys not works with immutable data ([1723769](https://github.com/royue/react-context-table/commit/1723769b4c597809d90de8cf1e054e2b125ea790))
+* flicker on expanding in dynamic mode ([#188](https://github.com/royue/react-context-table/issues/188)) ([e6a98ff](https://github.com/royue/react-context-table/commit/e6a98ff58b41c1f558fd3d9a8a42e14669457b79))
+* frozen data not shown with empty data ([#147](https://github.com/royue/react-context-table/issues/147)) ([c2ea383](https://github.com/royue/react-context-table/commit/c2ea3838f57302be07f8bb29292e0e002778b453))
+* getTotalRowsHeight could be different before/after render in dynamic mode ([#201](https://github.com/royue/react-context-table/issues/201)) ([3576376](https://github.com/royue/react-context-table/commit/357637638d2bf0b2e9ca97d0bd593f179945c302))
+* getTotalRowsHeight could be different before/after render in dynamic mode again ([#204](https://github.com/royue/react-context-table/issues/204)) ([7cc37cc](https://github.com/royue/react-context-table/commit/7cc37cc4e6019762995448c14e27cd77cd028fac))
+* **headerProps:** header render headerProps 参数传递 ([b4d2d44](https://github.com/royue/react-context-table/commit/b4d2d446bb937ad1f5541fd3dae54f6ee2da867a))
+* horizontal scrollbar in flex mode with dynamic row height ([#183](https://github.com/royue/react-context-table/issues/183)) ([a56ee2a](https://github.com/royue/react-context-table/commit/a56ee2a9cc5f6770bfbe14d7208ad1e43f500a31))
+* infinite loading should work with maxHeight ([#57](https://github.com/royue/react-context-table/issues/57)) ([c63b052](https://github.com/royue/react-context-table/commit/c63b052e1f4b0413294a65070f821b20384a2efa))
+* input loses focus on unmount ([#212](https://github.com/royue/react-context-table/issues/212)) ([b513ce0](https://github.com/royue/react-context-table/commit/b513ce0632c11875c1d624f28c230db7a75da64d))
+* omit minWidth in ColumnResizer ([8be9d04](https://github.com/royue/react-context-table/commit/8be9d0460dc496a694cbd998b201f3e5d50b7df6))
+* optimization render task performance ([#348](https://github.com/royue/react-context-table/issues/348)) ([38e8d12](https://github.com/royue/react-context-table/commit/38e8d1246d7599faeda44afcc3e38f0f5923a530))
+* regression of expansion with frozen columns ([#180](https://github.com/royue/react-context-table/issues/180)) ([8960c71](https://github.com/royue/react-context-table/commit/8960c7161a2b82b5853ceb64074683ceea24bdae))
+* remove propTypes for Column.key ([#222](https://github.com/royue/react-context-table/issues/222)) ([86bfb5e](https://github.com/royue/react-context-table/commit/86bfb5e55620438a4eff37ecc08f148a45508306))
+* resizing line rendered incorrectly ([#51](https://github.com/royue/react-context-table/issues/51)) ([a4dc5f7](https://github.com/royue/react-context-table/commit/a4dc5f7280f2a28623c352fa6891ece4383b45e0))
+* rowHeight is not calculated correctly with frozen columns ([#174](https://github.com/royue/react-context-table/issues/174)) ([10b5f29](https://github.com/royue/react-context-table/commit/10b5f29d51e81a16a1cf6cfd208861a9f2093247))
+* scroll position would be reset to top if column becomes frozen ([#208](https://github.com/royue/react-context-table/issues/208)) ([e4d956b](https://github.com/royue/react-context-table/commit/e4d956b597d68f4ee628ee2ceff60da0797770f0))
+* style value unset is not supported on IE ([e360fd5](https://github.com/royue/react-context-table/commit/e360fd5f8fc9be7b31e19299284d04c940a3eae8))
+* support function component with hooks ([#80](https://github.com/royue/react-context-table/issues/80)) ([342bcf6](https://github.com/royue/react-context-table/commit/342bcf6581f6bc7851dac9184d99f178fd144c3b))
+* table crash on setting scroll ([#374](https://github.com/royue/react-context-table/issues/374)) ([f5dd5bb](https://github.com/royue/react-context-table/commit/f5dd5bbde7b0030fad5d387fdf347991839055a4))
+* undefined parentId should be considered as root item ([29f21d7](https://github.com/royue/react-context-table/commit/29f21d7dd66de8ff61415ae5ed4799de38708788))
+* unflatten should not override the existing children ([#97](https://github.com/royue/react-context-table/issues/97)) ([480863e](https://github.com/royue/react-context-table/commit/480863e2c1302e559364473bd2b4ae1f821b46f8))
+* wrong description for Column props ([#157](https://github.com/royue/react-context-table/issues/157)) ([34bff67](https://github.com/royue/react-context-table/commit/34bff6734837c967f0d3149fd93f26733e6bc79b))
+* 修复key错误问题 ([5e3ce21](https://github.com/royue/react-context-table/commit/5e3ce214028f3dfc8ba240128b29a3212deb09de))
+* **修复展开项:** 修改无法展开 ([54db15f](https://github.com/royue/react-context-table/commit/54db15f85cd62b39d22e0e4cea5c247acd2d3105))
+
# CHANGELOG
## NEXT VERSION
diff --git a/README.md b/README.md
index b55c3cd6..5540d9f9 100644
--- a/README.md
+++ b/README.md
@@ -1,31 +1,31 @@
-# react-base-table
+# react-context-table
BaseTable is a react table component to display large datasets with high performance and flexibility
-
-
-
-
+
+
+
+
## Install
```bash
# npm
-npm install react-base-table --save
+npm install react-context-table --save
# yarn
-yarn add react-base-table
+yarn add react-context-table
```
## Usage
```js
-import BaseTable, { Column } from 'react-base-table'
-import 'react-base-table/styles.css'
-// Important: if you fail to import react-base-table/styles.css then
+import BaseTable, { Column } from 'react-context-table'
+import 'react-context-table/styles.css'
+// Important: if you fail to import react-context-table/styles.css then
// BaseTable will not render as advertised in the included examples.
// For advanced styling see link below:
-// https://github.com/Autodesk/react-base-table#advance
+// https://github.com/Autodesk/react-context-table#advance
...
@@ -35,7 +35,7 @@ import 'react-base-table/styles.css'
...
```
-Learn more at the [website](https://autodesk.github.io/react-base-table/)
+Learn more at the [website](https://autodesk.github.io/react-context-table/)
### unique key
@@ -45,14 +45,14 @@ Make sure each item in `data` is unique by a key, the default key is `id`, you c
### size
-`width` is required for column definition, but in flex mode(`fixed={false}`), you can set `width={0}` and `flexGrow={1}` to achieve flexible column width, checkout the [Flex Column](https://autodesk.github.io/react-base-table/examples/flex-column) example
+`width` is required for column definition, but in flex mode(`fixed={false}`), you can set `width={0}` and `flexGrow={1}` to achieve flexible column width, checkout the [Flex Column](https://autodesk.github.io/react-context-table/examples/flex-column) example
`width` and `height`(or `maxHeight`) are required to display the table properly
-In the [examples](https://autodesk.github.io/react-base-table/examples)
+In the [examples](https://autodesk.github.io/react-context-table/examples)
we are using a wrapper `const Table = props => ` to do that
-If you want it responsive, you can use the [`AutoResizer`](https://autodesk.github.io/react-base-table/api/autoresizer) to make the table fill the container, checkout the [Auto Resize](https://autodesk.github.io/react-base-table/examples/auto-resize) example
+If you want it responsive, you can use the [`AutoResizer`](https://autodesk.github.io/react-context-table/api/autoresizer) to make the table fill the container, checkout the [Auto Resize](https://autodesk.github.io/react-context-table/examples/auto-resize) example
### closure problem in custom renderers
@@ -62,13 +62,13 @@ It's recommended to inject the external data in column definition to solve the p
Things getting worse with the introduction of React hooks, we use primitive state instead of `this.state`, so it's easy to encounter the closure problem, but with React hooks, we can easily memoize functions via `useCallback` or `useMemo`, so the implicit optimization could be replaced with user land optimization which is more intuitive, to turn off the implicit optimization, set `ignoreFunctionInColumnCompare` to `false` which is introduced since `v1.11.0`
-Here is an [example](https://autodesk.github.io/react-base-table/playground#MYewdgzgLgBKA2BXAtpGBeGBzApmHATgIZQ4DCISqEAFAIwAMAlAFCiSwAmJRG2ehEjgAiPGghSQANDABMDZixY4AHgAcQBLjgBmRRPFg0mGAHwwA3ixhxw0GAG1QiMKQIyIOKBRduAunwASjhEwFAAdIieAMpQQjSKNuz2DgCWWGCaOABiLmGp4B5eAJIZWblg+eABmMGhEVE4sfFQBIg4rEl2sGlgAFY4YRRUYEVQxf2D3pSSNTB1YZExcaQ0evCenTAEXogEYDA01jYwADymxydnnKkAbjDQAJ7wOOgWFjBqRJw3YFgAXDAACwyG4QNTwIiPQEAch0LxUMJkfSiUFSOkeFFceCgsPBoRwAFoAEZeADuODwMJgAF8aRcrldTsTEFAoOAYOAyPBUsAANZvYxmB5eHzYgjiEC+QgwADUMDoTHpstOAHoWWzwAzGTZTpDSfBtTrdakwGpWZdjTYoI81K8AETAAAWgz5xJAKntlqtztdOE4b3SmR2FSqYBp3uNXKdRD+rwsOGFnnGZRDeTR4BoOHCcQIuAivv5-qVkauqqNxtKwcTOnTBQOptsI1syC+O1LZ1V+pwho7eqIBorOtOpvNUA7VxtdvQjpd-PdnonJ0LfP9gcmQxmqAjVqu0djuDeifQ5mTEwGm5GWZzRDzXnCK+LO935aX56mMFUrV43DiMHZTaSDAnC6KaqQZmAfZdgOPZDp2Ny3HBpwACoDi8MA6KkKj+sBPBvL+RA0jAQblHW4ATMMkgUK2t7xiRaaVBB9J9pRqBLhY4ScRI1AOAwfjPlaBEAOJeG4gomCetjSgQAnGs44rrhe0zNgA-FJ4owICLggZh+CcLJZZwbqrEHBxXFbpADh0PxMCvlapwmZYnEPhZEAOLINl2caDkWU55kjG5ADMnlGWcjlmS5AUOECIWRmqqHEi8FZqtqrARkAA) to demonstrate
+Here is an [example](https://autodesk.github.io/react-context-table/playground#MYewdgzgLgBKA2BXAtpGBeGBzApmHATgIZQ4DCISqEAFAIwAMAlAFCiSwAmJRG2ehEjgAiPGghSQANDABMDZixY4AHgAcQBLjgBmRRPFg0mGAHwwA3ixhxw0GAG1QiMKQIyIOKBRduAunwASjhEwFAAdIieAMpQQjSKNuz2DgCWWGCaOABiLmGp4B5eAJIZWblg+eABmMGhEVE4sfFQBIg4rEl2sGlgAFY4YRRUYEVQxf2D3pSSNTB1YZExcaQ0evCenTAEXogEYDA01jYwADymxydnnKkAbjDQAJ7wOOgWFjBqRJw3YFgAXDAACwyG4QNTwIiPQEAch0LxUMJkfSiUFSOkeFFceCgsPBoRwAFoAEZeADuODwMJgAF8aRcrldTsTEFAoOAYOAyPBUsAANZvYxmB5eHzYgjiEC+QgwADUMDoTHpstOAHoWWzwAzGTZTpDSfBtTrdakwGpWZdjTYoI81K8AETAAAWgz5xJAKntlqtztdOE4b3SmR2FSqYBp3uNXKdRD+rwsOGFnnGZRDeTR4BoOHCcQIuAivv5-qVkauqqNxtKwcTOnTBQOptsI1syC+O1LZ1V+pwho7eqIBorOtOpvNUA7VxtdvQjpd-PdnonJ0LfP9gcmQxmqAjVqu0djuDeifQ5mTEwGm5GWZzRDzXnCK+LO935aX56mMFUrV43DiMHZTaSDAnC6KaqQZmAfZdgOPZDp2Ny3HBpwACoDi8MA6KkKj+sBPBvL+RA0jAQblHW4ATMMkgUK2t7xiRaaVBB9J9pRqBLhY4ScRI1AOAwfjPlaBEAOJeG4gomCetjSgQAnGs44rrhe0zNgA-FJ4owICLggZh+CcLJZZwbqrEHBxXFbpADh0PxMCvlapwmZYnEPhZEAOLINl2caDkWU55kjG5ADMnlGWcjlmS5AUOECIWRmqqHEi8FZqtqrARkAA) to demonstrate
## Browser Support
`BaseTable` is well tested on all modern browsers and IE11. _You have to polyfill `Array.prototype.findIndex` to make it works on IE_
-**The [examples](https://autodesk.github.io/react-base-table/examples) don't work on IE as they are powered by [react-runner](https://github.com/nihgwu/react-runner) which is a `react-live` like library but only for modern browsers.**
+**The [examples](https://autodesk.github.io/react-context-table/examples) don't work on IE as they are powered by [react-runner](https://github.com/nihgwu/react-runner) which is a `react-live` like library but only for modern browsers.**
## Advance
@@ -90,7 +90,7 @@ $column-padding: 7.5px;
$show-frozen-rows-shadow: false;
$show-frozen-columns-shadow: true;
-@import '~react-base-table/es/_BaseTable.scss';
+@import '~react-context-table/es/_BaseTable.scss';
.#{$table-prefix} {
&:not(.#{$table-prefix}--show-left-shadow) {
@@ -128,7 +128,7 @@ You can write your own styles from scratch or use CSS-in-JS solutions to achieve
### Custom renderers & props
-There are a lot of highly flexible props like `xxxRenderer` and `xxxProps` for you to build your own table component, please check the [api](https://autodesk.github.io/react-base-table/api) and [examples](https://autodesk.github.io/react-base-table/examples) for more details
+There are a lot of highly flexible props like `xxxRenderer` and `xxxProps` for you to build your own table component, please check the [api](https://autodesk.github.io/react-context-table/api) and [examples](https://autodesk.github.io/react-context-table/examples) for more details
### Example
diff --git a/docs/advance.md b/docs/advance.md
index f26eb307..8edb6251 100644
--- a/docs/advance.md
+++ b/docs/advance.md
@@ -18,7 +18,7 @@ $column-padding: 7.5px;
$show-frozen-rows-shadow: false;
$show-frozen-columns-shadow: true;
-@import '~react-base-table/es/_BaseTable.scss';
+@import '~react-context-table/es/_BaseTable.scss';
.#{$table-prefix} {
&:not(.#{$table-prefix}--show-left-shadow) {
@@ -56,4 +56,4 @@ You can write your own styles from scratch or use CSS-in-JS solutions to achieve
## Custom renderers & props
-There are a lot of highly flexible props like `xxxRenderer` and `xxxProps` for you to build your own table component, please check the [api](https://autodesk.github.io/react-base-table/api) and [examples](https://autodesk.github.io/react-base-table/examples) for more details
+There are a lot of highly flexible props like `xxxRenderer` and `xxxProps` for you to build your own table component, please check the [api](https://autodesk.github.io/react-context-table/api) and [examples](https://autodesk.github.io/react-context-table/examples) for more details
diff --git a/docs/get-started.md b/docs/get-started.md
index c619e3db..338ee8bf 100644
--- a/docs/get-started.md
+++ b/docs/get-started.md
@@ -6,17 +6,17 @@ BaseTable is a react table component to display large data set with high perform
```bash
# npm
-npm install react-base-table --save
+npm install react-context-table --save
# yarn
-yarn add react-base-table
+yarn add react-context-table
```
## Usage
```js
-import BaseTable, { Column } from 'react-base-table'
-import 'react-base-table/styles.css'
+import BaseTable, { Column } from 'react-context-table'
+import 'react-context-table/styles.css'
...
@@ -35,14 +35,14 @@ Make sure each item in `data` is unique by a key, the default key is `id`, you c
### size
-`width` is required for column definition, but in flex mode(`fixed={false}`), you can set `width={0}` and `flexGrow={1}` to achieve flexible column width, checkout the [Flex Column](https://autodesk.github.io/react-base-table/examples/flex-column) example
+`width` is required for column definition, but in flex mode(`fixed={false}`), you can set `width={0}` and `flexGrow={1}` to achieve flexible column width, checkout the [Flex Column](https://autodesk.github.io/react-context-table/examples/flex-column) example
`width` and `height`(or `maxHeight`) are required to display the table properly
-In the [examples](https://autodesk.github.io/react-base-table/examples)
+In the [examples](https://autodesk.github.io/react-context-table/examples)
we are using a wrapper `const Table = props => ` to do that
-If you want it responsive, you can use the [`AutoResizer`](https://autodesk.github.io/react-base-table/api/autoresizer) to make the table fill the container, checkout the [Auto Resize](https://autodesk.github.io/react-base-table/examples/auto-resize) example
+If you want it responsive, you can use the [`AutoResizer`](https://autodesk.github.io/react-context-table/api/autoresizer) to make the table fill the container, checkout the [Auto Resize](https://autodesk.github.io/react-context-table/examples/auto-resize) example
### closure problem in custom renderers
@@ -52,13 +52,13 @@ It's recommended to inject the external data in column definition to solve the p
Things getting worse with the introduction of React hooks, we use primitive state instead of `this.state`, so it's easy to encounter the closure problem, but with React hooks, we can easily memoize functions via `useCallback` or `useMemo`, so the implicit optimization could be replaced with user land optimization which is more intuitive, to turn off the implicit optimization, set `ignoreFunctionInColumnCompare` to `false` which is introduced since `v1.11.0`
-Here is an [example](https://autodesk.github.io/react-base-table/playground#MYewdgzgLgBKA2BXAtpGBeGBzApmHATgIZQ4DCISqEAFAIwAMAlAFCiSwAmJRG2ehEjgAiPGghSQANDABMDZixY4AHgAcQBLjgBmRRPFg0mGAHwwA3ixhxw0GAG1QiMKQIyIOKBRduAunwASjhEwFAAdIieAMpQQjSKNuz2DgCWWGCaOABiLmGp4B5eAJIZWblg+eABmMGhEVE4sfFQBIg4rEl2sGlgAFY4YRRUYEVQxf2D3pSSNTB1YZExcaQ0evCenTAEXogEYDA01jYwADymxydnnKkAbjDQAJ7wOOgWFjBqRJw3YFgAXDAACwyG4QNTwIiPQEAch0LxUMJkfSiUFSOkeFFceCgsPBoRwAFoAEZeADuODwMJgAF8aRcrldTsTEFAoOAYOAyPBUsAANZvYxmB5eHzYgjiEC+QgwADUMDoTHpstOAHoWWzwAzGTZTpDSfBtTrdakwGpWZdjTYoI81K8AETAAAWgz5xJAKntlqtztdOE4b3SmR2FSqYBp3uNXKdRD+rwsOGFnnGZRDeTR4BoOHCcQIuAivv5-qVkauqqNxtKwcTOnTBQOptsI1syC+O1LZ1V+pwho7eqIBorOtOpvNUA7VxtdvQjpd-PdnonJ0LfP9gcmQxmqAjVqu0djuDeifQ5mTEwGm5GWZzRDzXnCK+LO935aX56mMFUrV43DiMHZTaSDAnC6KaqQZmAfZdgOPZDp2Ny3HBpwACoDi8MA6KkKj+sBPBvL+RA0jAQblHW4ATMMkgUK2t7xiRaaVBB9J9pRqBLhY4ScRI1AOAwfjPlaBEAOJeG4gomCetjSgQAnGs44rrhe0zNgA-FJ4owICLggZh+CcLJZZwbqrEHBxXFbpADh0PxMCvlapwmZYnEPhZEAOLINl2caDkWU55kjG5ADMnlGWcjlmS5AUOECIWRmqqHEi8FZqtqrARkAA) to demonstrate
+Here is an [example](https://autodesk.github.io/react-context-table/playground#MYewdgzgLgBKA2BXAtpGBeGBzApmHATgIZQ4DCISqEAFAIwAMAlAFCiSwAmJRG2ehEjgAiPGghSQANDABMDZixY4AHgAcQBLjgBmRRPFg0mGAHwwA3ixhxw0GAG1QiMKQIyIOKBRduAunwASjhEwFAAdIieAMpQQjSKNuz2DgCWWGCaOABiLmGp4B5eAJIZWblg+eABmMGhEVE4sfFQBIg4rEl2sGlgAFY4YRRUYEVQxf2D3pSSNTB1YZExcaQ0evCenTAEXogEYDA01jYwADymxydnnKkAbjDQAJ7wOOgWFjBqRJw3YFgAXDAACwyG4QNTwIiPQEAch0LxUMJkfSiUFSOkeFFceCgsPBoRwAFoAEZeADuODwMJgAF8aRcrldTsTEFAoOAYOAyPBUsAANZvYxmB5eHzYgjiEC+QgwADUMDoTHpstOAHoWWzwAzGTZTpDSfBtTrdakwGpWZdjTYoI81K8AETAAAWgz5xJAKntlqtztdOE4b3SmR2FSqYBp3uNXKdRD+rwsOGFnnGZRDeTR4BoOHCcQIuAivv5-qVkauqqNxtKwcTOnTBQOptsI1syC+O1LZ1V+pwho7eqIBorOtOpvNUA7VxtdvQjpd-PdnonJ0LfP9gcmQxmqAjVqu0djuDeifQ5mTEwGm5GWZzRDzXnCK+LO935aX56mMFUrV43DiMHZTaSDAnC6KaqQZmAfZdgOPZDp2Ny3HBpwACoDi8MA6KkKj+sBPBvL+RA0jAQblHW4ATMMkgUK2t7xiRaaVBB9J9pRqBLhY4ScRI1AOAwfjPlaBEAOJeG4gomCetjSgQAnGs44rrhe0zNgA-FJ4owICLggZh+CcLJZZwbqrEHBxXFbpADh0PxMCvlapwmZYnEPhZEAOLINl2caDkWU55kjG5ADMnlGWcjlmS5AUOECIWRmqqHEi8FZqtqrARkAA) to demonstrate
## Browser Support
`BaseTable` is well tested on all modern browsers and IE11. _You have to polyfill `Array.prototype.findIndex` to make it works on IE_
-**The [examples](https://autodesk.github.io/react-base-table/examples) don't work on IE as they are powered by [react-runner](https://github.com/nihgwu/react-runner) which is a `react-live` like library but only for modern browsers.**
+**The [examples](https://autodesk.github.io/react-context-table/examples) don't work on IE as they are powered by [react-runner](https://github.com/nihgwu/react-runner) which is a `react-live` like library but only for modern browsers.**
## Playground
diff --git a/docs/inline-editing.md b/docs/inline-editing.md
index 38aec7a2..46de3765 100644
--- a/docs/inline-editing.md
+++ b/docs/inline-editing.md
@@ -123,4 +123,4 @@ export default () => (
## Example
-Check the live example [here](https://autodesk.github.io/react-base-table/examples/inline-editing).
+Check the live example [here](https://autodesk.github.io/react-context-table/examples/inline-editing).
diff --git a/docs/selection.md b/docs/selection.md
index ee643ea1..d3d7a707 100644
--- a/docs/selection.md
+++ b/docs/selection.md
@@ -1,6 +1,6 @@
# Selection
-There is a [PR](https://github.com/Autodesk/react-base-table/pull/39) to add selection feature, but I don't want to merge it with [good reasons](https://github.com/Autodesk/react-base-table/pull/39#pullrequestreview-241987600), so I'd like to share a recipe here for reference
+There is a [PR](https://github.com/Autodesk/react-context-table/pull/39) to add selection feature, but I don't want to merge it with [good reasons](https://github.com/Autodesk/react-context-table/pull/39#pullrequestreview-241987600), so I'd like to share a recipe here for reference
## Recipe
@@ -155,4 +155,4 @@ SelectableTable.defaultProps = {
## Example
-Check the live example [here](https://autodesk.github.io/react-base-table/examples/selection).
+Check the live example [here](https://autodesk.github.io/react-context-table/examples/selection).
diff --git a/package.json b/package.json
index 8a98e7da..022704d8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
- "name": "react-base-table",
- "version": "1.13.2",
+ "name": "react-context-table",
+ "version": "2.0.0-alpha.0",
"description": "a react table component to display large data set with high performance and flexibility",
"main": "lib/index.js",
"module": "es/index.js",
@@ -15,21 +15,26 @@
"license": "MIT",
"repository": {
"type": "git",
- "url": "https://github.com/Autodesk/react-base-table.git"
+ "url": "https://github.com/royue/react-context-table.git"
},
"scripts": {
"start": "cd website && npm start",
"deploy": "cd website && npm run deploy",
"lint": "eslint ./src/**/*.js",
"clean": "rimraf lib es styles.css",
- "build:js": "cross-env NODE_ENV=production babel src -d lib --ignore '**/*.spec.js','__snapshots__' --copy-files --source-maps",
- "build:es": "cross-env BABEL_ENV=es NODE_ENV=production babel src -d es --ignore '**/*.spec.js','__snapshots__' --copy-files --source-maps",
+ "build:types": "tsc --declaration -p ./ -t es2015 --emitDeclarationOnly --outDir types",
+ "build:js": "cross-env NODE_ENV=production babel --extensions .ts,.tsx src --out-dir lib --ignore '**/*.spec.js'",
+ "build:es": "cross-env BABEL_ENV=es NODE_ENV=production babel --extensions .ts,.tsx src --out-dir es --ignore '**/*.spec.js'",
"build:css": "node-sass src/_BaseTable.scss ./styles.css --output-style expanded",
- "build": "npm run build:js && npm run build:es && npm run build:css",
+ "build": "npm run build:js && npm run build:es && npm run build:css && npm run build:types",
"format": "prettier --write 'src/**/*.{js,scss}'",
"prebuild": "npm run clean",
"precommit": "lint-staged",
"prepush": "npm run test",
+ "publish": "npm publish",
+ "release": "npx standard-version --release-as patch && npm run build && npm run publish",
+ "release:alpha": "npx standard-version --prerelease alpha && npm run build && npm publish --tag alpha",
+ "release:minor": "npx standard-version --release-as minor && npm run build && npm run publish ",
"prepublish": "npm run build && npm run test",
"test": "jest"
},
@@ -47,30 +52,35 @@
"dependencies": {
"@babel/runtime": "^7.0.0",
"classnames": "^2.2.5",
- "memoize-one": "^5.0.0",
+ "memoize-one": "^6.0.0",
"prop-types": "^15.7.0",
- "react-virtualized-auto-sizer": "^1.0.2",
- "react-window": "^1.8.2"
+ "react-virtualized-auto-sizer": "^1.0.23",
+ "react-window": "^1.8.2",
+ "typescript": "^4.7.4"
},
"peerDependencies": {
- "react": "^16.0.0 || ^17.0.0",
- "react-dom": "^16.0.0 || ^17.0.0"
+ "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+ "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
},
"devDependencies": {
- "@babel/cli": "^7.0.0",
- "@babel/core": "^7.0.0",
+ "@babel/cli": "^7.21.0",
+ "@babel/core": "^7.21.0",
+ "@babel/eslint-parser": "^7.19.1",
"@babel/plugin-proposal-class-properties": "^7.0.0",
"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
"@babel/plugin-transform-runtime": "^7.0.0",
- "@babel/preset-env": "^7.0.0",
- "@babel/preset-react": "^7.0.0",
- "@types/react": "^16.9.46",
- "babel-core": "^7.0.0-bridge.0",
- "babel-eslint": "^9.0.0",
- "babel-jest": "^23.4.2",
+ "@babel/preset-env": "^7.18.6",
+ "@babel/preset-react": "^7.18.6",
+ "@babel/preset-typescript": "^7.21.0",
+ "@types/jest": "^29.4.0",
+ "@types/react": "^18.2.59",
+ "@typescript-eslint/eslint-plugin": "^5.54.0",
+ "@typescript-eslint/parser": "^5.54.0",
+ "@typescript-eslint/typescript-estree": "^5.54.0",
"babel-plugin-syntax-trailing-function-commas": "^6.22.0",
+ "babel-preset-minify": "^0.5.2",
"cross-env": "^5.2.0",
- "eslint": "^5.6.0",
+ "eslint": "^8.35.0",
"eslint-config-prettier": "^3.0.1",
"eslint-config-react-app": "^3.0.8",
"eslint-plugin-flowtype": "^3.4.2",
@@ -79,15 +89,20 @@
"eslint-plugin-prettier": "^2.6.2",
"eslint-plugin-react": "^7.11.1",
"husky": "^0.14.3",
- "jest": "^23.5.0",
+ "jest": "^29.4.3",
"lerna": "^3.2.1",
- "lint-staged": "^7.2.2",
- "node-sass": "^4.9.3",
- "prettier": "^1.14.2",
- "react": "^17.0.2",
- "react-dom": "^17.0.2",
- "react-test-renderer": "^17.0.2",
- "rimraf": "^2.6.2"
+ "lint-staged": "^13.1.3",
+ "node-sass": "^8.0.0",
+ "prettier": "^2.8.4",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "react-test-renderer": "18.2.0",
+ "rimraf": "^2.6.2",
+ "ts-jest": "^29.0.5"
+ },
+ "resolutions": {
+ "remark-mdx": "2.0.0-next.4",
+ "remark-mdxjs": "2.0.0-next.4"
},
"jest": {
"roots": [
@@ -95,10 +110,10 @@
],
"testRegex": ".*.spec\\.js$",
"transform": {
- "^.+\\.jsx?$": "babel-jest"
+ "^.+\\.(t|j)sx?$": "ts-jest"
},
"transformIgnorePatterns": [
"/node_modules/"
]
}
-}
+}
\ No newline at end of file
diff --git a/src/AutoResizer.js b/src/AutoResizer.js
deleted file mode 100644
index 9a627b2d..00000000
--- a/src/AutoResizer.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import AutoSizer from 'react-virtualized-auto-sizer';
-
-/**
- * Decorator component that automatically adjusts the width and height of a single child
- */
-const AutoResizer = ({ className, width, height, children, onResize }) => {
- const disableWidth = typeof width === 'number';
- const disableHeight = typeof height === 'number';
-
- if (disableWidth && disableHeight) {
- return (
-
- {children({ width, height })}
-
- );
- }
-
- return (
-
- {size =>
- children({
- width: disableWidth ? width : size.width,
- height: disableHeight ? height : size.height,
- })
- }
-
- );
-};
-
-AutoResizer.propTypes = {
- /**
- * Class name for the component
- */
- className: PropTypes.string,
- /**
- * the width of the component, will be the container's width if not set
- */
- width: PropTypes.number,
- /**
- * the height of the component, will be the container's width if not set
- */
- height: PropTypes.number,
- /**
- * A callback function to render the children component
- * The handler is of the shape of `({ width, height }) => node`
- */
- children: PropTypes.func.isRequired,
- /**
- * A callback function when the size of the table container changed if the width and height are not set
- * The handler is of the shape of `({ width, height }) => *`
- */
- onResize: PropTypes.func,
-};
-
-export default AutoResizer;
diff --git a/src/AutoResizer.tsx b/src/AutoResizer.tsx
new file mode 100644
index 00000000..3ecbae68
--- /dev/null
+++ b/src/AutoResizer.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import AutoSizer, { Size } from 'react-virtualized-auto-sizer';
+// console.log('AutoSizer', AutoSizer)
+interface AutoResizerProps {
+ className: string;
+ width: number;
+ height: number;
+ children: any;
+ onResize: (params: { height: number; width: number; [key: string]: any }) => void;
+}
+
+/**
+ * Decorator component that automatically adjusts the width and height of a single child
+ */
+const AutoResizer = ({ className, width, height, children, onResize }: AutoResizerProps) => {
+ const disableWidth = typeof width === 'number';
+ const disableHeight = typeof height === 'number';
+
+ if (disableWidth && disableHeight) {
+ return (
+
-
- {headerHeight + frozenRowsHeight > 0 && (
- // put header after body and reverse the display order via css
- // to prevent header's shadow being covered by body
- 0 ? hoveredRowKey : null}
- />
- )}
-
-
- BaseTable is a react table component to display large data set with high
- performance and flexibility
-
- Get Started
- View Examples
-
-
- Docs
- API
- Examples
-
- Github
-
-
-
+const exportDefault = () => (
+
+
+
BaseTable
+
+ BaseTable is a react table component to display large data set
+ with high performance and flexibility
+
+ Get Started
+ View Examples
+
+
+ Docs
+ API
+ Examples
+
+ Github
+
+
+
)
+export default exportDefault
diff --git a/website/src/pages/playground/index.js b/website/src/pages/playground/index.js
index 8843de9c..005273e7 100644
--- a/website/src/pages/playground/index.js
+++ b/website/src/pages/playground/index.js
@@ -5,12 +5,14 @@ import Page from 'components/Page'
import Playground from 'components/Playground'
const Container = styled(Page).attrs({ full: true })`
- max-width: 100%;
- height: 100vh;
+ max-width: 100%;
+ height: 100vh;
`
-export default ({ location }) => (
-
-
-
+const exportDefault = ({ location }) => (
+
+
+
)
+
+export default exportDefault
diff --git a/website/src/templates/api.js b/website/src/templates/api.js
index dd99f8a7..5831568d 100644
--- a/website/src/templates/api.js
+++ b/website/src/templates/api.js
@@ -10,77 +10,83 @@ import Pagination from 'components/Pagination'
import siteConfig from 'siteConfig'
const links = siteConfig.api.map(item => ({
- key: item.title,
- title: item.title,
- to: item.path,
+ key: item.title,
+ title: item.title,
+ to: item.path,
}))
class ApiTemplate extends React.Component {
- render() {
- const { data, pageContext, location } = this.props
- const metaData = data.componentMetadata
- const methods = metaData.childrenComponentMethodExt
- const name = pageContext.name
- const link = links.find(link => link.to === `/api/${name.toLowerCase()}`)
+ render() {
+ const { data, pageContext, location } = this.props
+ const metaData = data.componentMetadata
+ const methods = metaData.childrenComponentMethodExt
+ const name = pageContext.name
+ const link = links.find(
+ link => link.to === `/api/${name.toLowerCase()}`
+ )
- return (
-
-