chore: upgrade dependencies, add TypeScript support, and restructure build output

.babelrc

@@ -7,6 +7,7 @@
       },
     ],
     "@babel/preset-react",
+    "@babel/preset-typescript",
   ],
   "plugins": [
     "@babel/plugin-proposal-class-properties",

.gitignore

@@ -12,7 +12,5 @@ npm-debug.log.*
 yarn-error.log
 yarn-error.log.*
 
-styles.css
-es/
-lib/
+dist/
 coverage/

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

.nvmrc

@@ -1 +1 @@
-10.16.0
+24

.prettierrc

@@ -1,6 +1,7 @@
 {
-  "semi": true,
   "singleQuote": true,
-  "trailingComma": "es5",
-  "printWidth": 120
+  "quoteProps": "preserve",
+  "printWidth": 120,
+  "arrowParens": "always",
+  "jsxBracketSameLine": false
 }

CHANGELOG.md

@@ -1,6 +1,38 @@
 # CHANGELOG
 
-## NEXT VERSION
+## v2.0.0 (2026-04-16)
+
+### Breaking Changes
+
+- **Build output restructured**: `lib/` → `dist/cjs/`, `es/` → `dist/esm/`, `types/` → `dist/types/`, `styles.css` → `dist/styles.css`
+  - CSS import changed from `react-base-table/styles.css` to `react-base-table/dist/styles.css`
+  - SCSS import changed from `~react-base-table/es/_BaseTable.scss` to `react-base-table/dist/esm/_BaseTable.scss`
+- **Peer dependency**: requires React >= 17.0.2 (dropped IE11 support)
+- **Removed hand-written `types/index.d.ts`**: replaced by auto-generated declarations from TypeScript source
+
+### Features
+
+- **TypeScript**: rewritten all source files (`src/`) and specs (`spec/`) in TypeScript; ships `.d.ts` declarations out of the box
+- **Exported types**: `ColumnShape`, `RowData`, `RowKey`, `CellRendererProps`, `HeaderRendererProps`, `RowRendererProps`, `ScrollArgs`, `SortByShape`, `SortState`, `TableComponents`, and more
+- **New utility export**: `cloneArray`
+
+### Upgrades
+
+- Upgraded all dev dependencies: ESLint 9, Jest 30, Prettier 3, Husky 9, Sass (Dart), TypeScript 6
+- Replaced `node-sass` with `sass` (Dart Sass)
+- Replaced `react-test-renderer` with `@testing-library/react`
+- Migrated ESLint from `.eslintrc` to flat config (`eslint.config.mjs`) with `@typescript-eslint/parser`
+- Moved test files from `src/` to dedicated `spec/` directory
+
+### Bug Fixes
+
+- fix: `_handleRowExpand` expand logic was always true (`!arr.indexOf(x) >= 0` → `arr.indexOf(x) < 0`)
+
+### Website (Gatsby demo)
+
+- Upgraded Gatsby 2 → 4, React 16 → 18, and all associated plugins
+- Migrated `faker` → `@faker-js/faker` v8
+- Fixed navigation links, code block rendering, and live code examples
 
 ## v1.13.5 (2024-05-24)
 

README.md

@@ -19,22 +19,19 @@ yarn add react-base-table
 
 ## Usage
 
-```js
+```tsx
 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 
-// BaseTable will not render as advertised in the included examples.
-// For advanced styling see link below:
-// https://github.com/Autodesk/react-base-table#advance
- ...
+import 'react-base-table/dist/styles.css'
+
 <BaseTable data={data} width={600} height={400}>
   <Column key="col0" dataKey="col0" width={100} />
   <Column key="col1" dataKey="col1" width={100} />
   ...
 </BaseTable>
-...
 ```
 
+> **Note:** You must import the stylesheet for BaseTable to render correctly. For advanced styling see [below](#advance).
+
 Learn more at the [website](https://autodesk.github.io/react-base-table/)
 
 ### unique key
@@ -64,11 +61,17 @@ Things getting worse with the introduction of React hooks, we use primitive stat
 
 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 
 
-## Browser Support
+## TypeScript
+
+This package is written in TypeScript and ships type declarations out of the box. All public types are exported from the main entry point:
+
+```ts
+import type { ColumnShape, RowData, SortOrderValue } from 'react-base-table'
+```
 
-`BaseTable` is well tested on all modern browsers and IE11. _You have to polyfill `Array.prototype.findIndex` to make it works on IE_
+## Browser Support
 
-**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.**
+`BaseTable` is tested on all modern browsers (Chrome, Firefox, Safari, Edge). IE is no longer supported.
 
 ## Advance
 
@@ -90,7 +93,7 @@ $column-padding: 7.5px;
 $show-frozen-rows-shadow: false;
 $show-frozen-columns-shadow: true;
 
-@import '~react-base-table/es/_BaseTable.scss';
+@import 'react-base-table/dist/esm/_BaseTable.scss';
 
 .#{$table-prefix} {
   &:not(.#{$table-prefix}--show-left-shadow) {
@@ -140,7 +143,16 @@ We are using a advanced table component based on `BaseTable` internally, with mu
 
 ## Development
 
-We use `Yarn` as the package manager, checkout this repo and run `yarn` under both root folder and `website` folder in install packages, then run `yarn start` to start the demo site powered by `Gatsby`
+Requires **Node.js >= 18** (Node 24 recommended). We use `Yarn` as the package manager.
+
+```bash
+yarn install --ignore-scripts
+cd website && yarn install
+cd ..
+yarn start
+```
+
+This starts the demo site powered by Gatsby.
 
 ## Contributing
 

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-base-table/dist/esm/_BaseTable.scss';
 
 .#{$table-prefix} {
   &:not(.#{$table-prefix}--show-left-shadow) {

docs/get-started.md

@@ -14,17 +14,15 @@ yarn add react-base-table
 
 ## Usage
 
-```js
+```tsx
 import BaseTable, { Column } from 'react-base-table'
-import 'react-base-table/styles.css'
+import 'react-base-table/dist/styles.css'
 
-...
 <BaseTable data={data} width={600} height={400}>
   <Column key="col0" dataKey="col0" width={100} />
   <Column key="col1" dataKey="col1" width={100} />
   ...
 </BaseTable>
-...
 ```
 
 ### unique key
@@ -56,9 +54,7 @@ Here is an [example](https://autodesk.github.io/react-base-table/playground#MYew
 
 ## 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.**
+`BaseTable` is tested on all modern browsers (Chrome, Firefox, Safari, Edge). IE is no longer supported.
 
 ## Playground
 

eslint.config.mjs

@@ -0,0 +1,53 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import tsParser from '@typescript-eslint/parser';
+import reactPlugin from 'eslint-plugin-react';
+import jsxA11yPlugin from 'eslint-plugin-jsx-a11y';
+import importPlugin from 'eslint-plugin-import';
+import prettierPlugin from 'eslint-plugin-prettier';
+import prettierConfig from 'eslint-config-prettier';
+
+export default [
+  {
+    ignores: ['dist/', 'website/', 'node_modules/'],
+  },
+  js.configs.recommended,
+  prettierConfig,
+  {
+    files: ['src/**/*.{ts,tsx}', 'spec/**/*.{ts,tsx}'],
+    plugins: {
+      react: reactPlugin,
+      'jsx-a11y': jsxA11yPlugin,
+      import: importPlugin,
+      prettier: prettierPlugin,
+    },
+    languageOptions: {
+      parser: tsParser,
+      ecmaVersion: 2020,
+      sourceType: 'module',
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+      globals: {
+        ...globals.browser,
+        ...globals.es2020,
+        ...globals.jest,
+      },
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+    rules: {
+      'react/prop-types': 2,
+      'react/jsx-uses-react': 'error',
+      'react/jsx-uses-vars': 'error',
+      'prettier/prettier': 'error',
+      'no-unused-vars': 'off',
+      'no-undef': 'off',
+    },
+  },
+];