diff --git a/package.json b/package.json
index b516939..41df20d 100644
--- a/package.json
+++ b/package.json
@@ -22,8 +22,8 @@
"lib"
],
"peerDependencies": {
- "react": "^15.3.0 || ^16.2.0",
- "react-dom": "^15.3.0 || ^16.2.0"
+ "react": "^15.3.0 || ^16.2.0 || ^17.0.0",
+ "react-dom": "^15.3.0 || ^16.2.0 || ^17.0.0"
},
"devDependencies": {
"@babel/cli": "^7.0.0-beta.37",
@@ -42,8 +42,9 @@
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.7.0",
"html-webpack-plugin": "^3.2.0",
- "react": "^16.12.0",
- "react-dom": "^16.12.0",
+ "prop-types": "^15.7.2",
+ "react": "^17.0.0",
+ "react-dom": "^17.0.0",
"react-table": "^6.11.4",
"style-loader": "^0.19.1",
"webpack": "^4.41.2",
diff --git a/src/demo/index.jsx b/src/demo/index.jsx
index f9c064c..c876da2 100644
--- a/src/demo/index.jsx
+++ b/src/demo/index.jsx
@@ -2,7 +2,7 @@ import React from 'react';
import { render } from 'react-dom';
import ReactTable from 'react-table';
import 'react-table/react-table.css';
-import withFixedColumns from '../../lib';
+import withFixedColumns, { withFixedColumnsScrollEvent } from '../../lib';
import '../../lib/styles.css';
import './styles.css';
import {
@@ -16,6 +16,121 @@ import {
} from '../../src/FakeData.js';
const ReactTableFixedColumns = withFixedColumns(ReactTable);
+const ReactTableFixedColumnsScrollEvent = withFixedColumnsScrollEvent(ReactTable);
+
+const columns = [
+ {
+ Header: 'First Name',
+ accessor: 'firstName',
+ width: 150,
+ fixed: 'left',
+ },
+ {
+ Header: 'Last Name',
+ accessor: 'lastName',
+ width: 150,
+ fixed: 'left',
+ },
+ {
+ Header: 'Age',
+ accessor: 'age',
+ width: 150,
+ fixed: 'right',
+ },
+ {
+ Header: 'Email',
+ accessor: 'email',
+ width: 300,
+ },
+ {
+ Header: 'Professional Email',
+ accessor: 'proEmail',
+ width: 300,
+ },
+ {
+ Header: 'Street',
+ accessor: 'street',
+ width: 300,
+ },
+ {
+ Header: 'Street bis',
+ accessor: 'streetBis',
+ width: 300,
+ },
+ {
+ Header: 'City',
+ accessor: 'city',
+ },
+];
+
+const groupedColumns = [
+ {
+ fixed: 'left',
+ columns: [
+ {
+ Header: 'First Name',
+ accessor: 'firstName',
+ width: 150,
+ Footer: () =>
Footer
,
+ },
+ {
+ Header: 'Last Name',
+ accessor: 'lastName',
+ width: 150,
+ },
+ ],
+ },
+ {
+ Header: 'Other Infos',
+ columns: [
+ {
+ Header: 'Full name',
+ id: 'Full Name',
+ width: 150,
+ Cell: row => {row.original.firstName}
{row.original.lastName}
,
+ Footer: () => Footer
,
+ },
+ {
+ Header: 'Age',
+ accessor: 'age',
+ },
+ ],
+ },
+ {
+ Header: 'Location',
+ columns: [
+ {
+ Header: 'Street',
+ accessor: 'street',
+ width: 300,
+ },
+ {
+ Header: 'Street bis',
+ accessor: 'streetBis',
+ width: 300,
+ },
+ {
+ Header: 'City',
+ accessor: 'city',
+ },
+ ],
+ },
+ {
+ fixed: 'right',
+ columns: [
+ {
+ Header: 'Professional Email',
+ accessor: 'proEmail',
+ width: 200,
+ },
+ {
+ Header: 'Email',
+ accessor: 'email',
+ width: 200,
+ },
+ ],
+ },
+];
const getData = () => {
const data = [];
@@ -41,6 +156,8 @@ const getData = () => {
return data;
};
+const getTdProps = () => ({ style: { textAlign: 'center' } });
+
function Demo() {
return (
-
+
+ {/* Basic */}
({ style: { textAlign: 'center' } })}
+ getTdProps={getTdProps}
filterable
- columns={[
- {
- Header: 'First Name',
- accessor: 'firstName',
- width: 150,
- fixed: 'left',
- },
- {
- Header: 'Last Name',
- accessor: 'lastName',
- width: 150,
- fixed: 'left',
- },
- {
- Header: 'Age',
- accessor: 'age',
- width: 150,
- fixed: 'right',
- },
- {
- Header: 'Email',
- accessor: 'email',
- width: 300,
- },
- {
- Header: 'Professional Email',
- accessor: 'proEmail',
- width: 300,
- },
- {
- Header: 'Street',
- accessor: 'street',
- width: 300,
- },
- {
- Header: 'Street bis',
- accessor: 'streetBis',
- width: 300,
- },
- {
- Header: 'City',
- accessor: 'city',
- },
- ]}
+ columns={columns}
defaultPageSize={50}
className="-striped -highlight"
/>
+ {/* Grouped Columns */}
({ style: { textAlign: 'center' } })}
+ getTdProps={getTdProps}
+ filterable
+ columns={groupedColumns}
+ defaultPageSize={50}
+ className="-striped"
+ />
+
+
+ {/* Scroll Event */}
+
+
+
+
+ {/* Grouped Columns & Scroll Event */}
+
+
Footer
,
- },
- {
- Header: 'Last Name',
- accessor: 'lastName',
- width: 150,
- },
- ],
- },
- {
- Header: 'Other Infos',
- columns: [
- {
- Header: 'Full name',
- id: 'Full Name',
- width: 150,
- Cell: row => {row.original.firstName}
{row.original.lastName}
,
- Footer: () => Footer
,
- },
- {
- Header: 'Age',
- accessor: 'age',
- },
- ],
- },
- {
- Header: 'Location',
- columns: [
- {
- Header: 'Street',
- accessor: 'street',
- width: 300,
- },
- {
- Header: 'Street bis',
- accessor: 'streetBis',
- width: 300,
- },
- {
- Header: 'City',
- accessor: 'city',
- },
- ],
- },
- {
- fixed: 'right',
- columns: [
- {
- Header: 'Professional Email',
- accessor: 'proEmail',
- width: 200,
- },
- {
- Header: 'Email',
- accessor: 'email',
- width: 200,
- },
- ],
- },
- ]}
+ columns={groupedColumns}
defaultPageSize={50}
className="-striped"
/>
diff --git a/src/lib/scrollEvent/index.js b/src/lib/scrollEvent/index.js
index e882a71..3be0e7a 100644
--- a/src/lib/scrollEvent/index.js
+++ b/src/lib/scrollEvent/index.js
@@ -8,7 +8,7 @@ export default (ReactTable) => {
class ReactTableFixedColumns extends React.Component {
static propTypes = {
columns: PropTypes.array.isRequired,
- getProps: PropTypes.func,
+ getTableProps: PropTypes.func,
innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
className: PropTypes.string,
uniqClassName: PropTypes.string,
@@ -16,7 +16,7 @@ export default (ReactTable) => {
}
static defaultProps = {
- getProps: null,
+ getTableProps: null,
innerRef: null,
className: null,
uniqClassName: null,
@@ -51,7 +51,7 @@ export default (ReactTable) => {
}
onScrollX = (event) => {
- if (event.nativeEvent.target.getAttribute('class').indexOf('rt-table') === -1) return;
+ if (event.currentTarget !== event.target) return;
this.calculatePos(event.nativeEvent.target);
}
@@ -136,10 +136,10 @@ export default (ReactTable) => {
return this.getColumnsWithFixedFeature(sortedColumns, columnProps);
})
- getProps = (...args) => {
- const { getProps } = this.props;
+ getTableProps = (...args) => {
+ const { getTableProps } = this.props;
return {
- ...(getProps && getProps(...args)),
+ ...(getTableProps && getTableProps(...args)),
onScroll: this.onScrollX,
};
}
@@ -158,7 +158,7 @@ export default (ReactTable) => {
ref={innerRef}
className={cx(className, 'rthfc', '-se', this.uniqClassName)}
columns={this.getColumns(columns, this.props.column)}
- getProps={this.getProps}
+ getTableProps={this.getTableProps}
{...this.onChangePropertyList}
/>
);
diff --git a/yarn.lock b/yarn.lock
index 1993e94..2b097ff 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5332,7 +5332,7 @@ prop-types@^15.6.0:
loose-envify "^1.3.1"
object-assign "^4.1.1"
-prop-types@^15.6.2:
+prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -5491,15 +5491,14 @@ rc@^1.2.7:
minimist "^1.2.0"
strip-json-comments "~2.0.1"
-react-dom@^16.12.0:
- version "16.12.0"
- resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.12.0.tgz#0da4b714b8d13c2038c9396b54a92baea633fe11"
- integrity sha512-LMxFfAGrcS3kETtQaCkTKjMiifahaMySFDn71fZUNpPHZQEzmk/GiAeIT8JSOrHB23fnuCOMruL2a8NYlw+8Gw==
+react-dom@^17.0.0:
+ version "17.0.2"
+ resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
+ integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"
- prop-types "^15.6.2"
- scheduler "^0.18.0"
+ scheduler "^0.20.2"
react-is@^16.8.1:
version "16.12.0"
@@ -5515,14 +5514,13 @@ react-table@^6.11.4:
classnames "^2.2.5"
react-is "^16.8.1"
-react@^16.12.0:
- version "16.12.0"
- resolved "https://registry.yarnpkg.com/react/-/react-16.12.0.tgz#0c0a9c6a142429e3614834d5a778e18aa78a0b83"
- integrity sha512-fglqy3k5E+81pA8s+7K0/T3DBCF0ZDOher1elBFzF7O6arXJgzyu/FW+COxFvAWXJoJN9KIZbT2LXlukwphYTA==
+react@^17.0.0:
+ version "17.0.2"
+ resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
+ integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"
- prop-types "^15.6.2"
read-pkg-up@^2.0.0:
version "2.0.0"
@@ -5872,10 +5870,10 @@ sax@^1.2.4, sax@~1.2.1:
version "1.2.4"
resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
-scheduler@^0.18.0:
- version "0.18.0"
- resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.18.0.tgz#5901ad6659bc1d8f3fdaf36eb7a67b0d6746b1c4"
- integrity sha512-agTSHR1Nbfi6ulI0kYNK0203joW2Y5W4po4l+v03tOoiJKpTBbxpNhWDvqc/4IcOw+KLmSiQLTasZ4cab2/UWQ==
+scheduler@^0.20.2:
+ version "0.20.2"
+ resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
+ integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"