Skip to content

Commit

Permalink
Merge pull request #90 from ajnetterfield/master
Browse files Browse the repository at this point in the history 
fix: scroll event in react 17
  • Loading branch information
@GuillaumeJasmin
GuillaumeJasmin committed Jul 24, 2021
2 parents 0d432a4 + ff699bd commit ef60762
Show file tree
Hide file tree
Showing 4 changed files with 175 additions and 143 deletions.
9 changes: 5 additions & 4 deletions package.json
View file
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
265 changes: 149 additions & 116 deletions src/demo/index.jsx
View file
Expand Up @@ -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 {
Expand All @@ -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: () => <div>Footer</div>,
},
{
Header: 'Last Name',
accessor: 'lastName',
width: 150,
},
],
},
{
Header: 'Other Infos',
columns: [
{
Header: 'Full name',
id: 'Full Name',
width: 150,
Cell: row => <div>{row.original.firstName}<br />{row.original.lastName}</div>,
Footer: () => <div>Footer</div>,
},
{
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 = [];
Expand All @@ -41,6 +156,8 @@ const getData = () => {
return data;
};

const getTdProps = () => ({ style: { textAlign: 'center' } });

function Demo() {
return (
<div className="container">
Expand All @@ -52,135 +169,51 @@ function Demo() {
<a href="https://github.com/guillaumejasmin/react-table-hoc-fixed-columns">Github source</a>
</div>
</div>
<div>

<div>
{/* Basic */}
<div className="table">
<ReactTableFixedColumns
data={getData()}
getTdProps={() => ({ 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"
/>
</div>

{/* Grouped Columns */}
<div className="table">
<ReactTableFixedColumns
data={getData()}
getTdProps={() => ({ style: { textAlign: 'center' } })}
getTdProps={getTdProps}
filterable
columns={groupedColumns}
defaultPageSize={50}
className="-striped"
/>
</div>

{/* Scroll Event */}
<div className="table">
<ReactTableFixedColumnsScrollEvent
data={getData()}
getTdProps={getTdProps}
filterable
columns={columns}
defaultPageSize={50}
className="-striped -highlight"
/>
</div>

{/* Grouped Columns & Scroll Event */}
<div className="table">
<ReactTableFixedColumnsScrollEvent
data={getData()}
getTdProps={getTdProps}
filterable
columns={[
{
fixed: 'left',
columns: [
{
Header: 'First Name',
accessor: 'firstName',
width: 150,
Footer: () => <div>Footer</div>,
},
{
Header: 'Last Name',
accessor: 'lastName',
width: 150,
},
],
},
{
Header: 'Other Infos',
columns: [
{
Header: 'Full name',
id: 'Full Name',
width: 150,
Cell: row => <div>{row.original.firstName}<br />{row.original.lastName}</div>,
Footer: () => <div>Footer</div>,
},
{
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"
/>
Expand Down
14 changes: 7 additions & 7 deletions src/lib/scrollEvent/index.js
View file
Expand Up @@ -8,15 +8,15 @@ 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,
column: PropTypes.object,
}

static defaultProps = {
getProps: null,
getTableProps: null,
innerRef: null,
className: null,
uniqClassName: null,
Expand Down Expand Up @@ -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);
}

Expand Down Expand Up @@ -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,
};
}
Expand All @@ -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}
/>
);
Expand Down

0 comments on commit ef60762

Please sign in to comment.