Merge pull request #25 from jbetancur/fix-general-bugs

bug fixes | add fixedHeader feature

README.md

@@ -8,7 +8,7 @@ Creating yet another React table library came out of nescessity while developing
 
 If you want to achieve balance with the force and want a simple, sortable, and flexible table library give React Data Table Component a chance. If you want an Excel clone and need to pivot large data sets then this is not the React table library you are looking for 👋
 
-React Data Table Component is not yet Feature Complete and still under **Development** - though I do not anticpate the API to change.
+React Data Table Component is not yet Feature Complete and still under **Development** - though I do not anticpate the existing API to change.
 
 ## Initial features available:
 
@@ -105,6 +105,7 @@ Nothing new here - we are using an array of object literals and properties to de
 | customTheme | object | no |  | Override the [default theme](https://github.com/jbetancur/react-data-table-component/blob/master/src/themes/default.js), by overriding specifc props. Your changes will be merged. [See Theming](#theming) for more information |
 | disabled | bool | no | false | disables the Table section |
 | noHeader | bool | no | false | removes the table header. `title`, `contextTitle` and `contextActions` will be ignored |
+| fixedHeader | bool | no | false | makes the table header fixed allowing you to scroll the table body |
 
 #### Advanced Selectable Component Options
 Sometimes 3rd party checkbox components have their own way of handling indeterminate state. We don't want React Data Table hardcoded to a specific ui lib or custom component, so instead a "hook" is provided to allow you to pass a function that will be resolved by React Data Table's internal `Checkbox` for use with `indeterminate` functionality.

package.json

@@ -61,7 +61,7 @@
     "@storybook/addon-links": "^3.3.15",
     "@storybook/react": "^3.3.15",
     "babel-core": "^6.26.0",
-    "babel-eslint": "^8.2.2",
+    "babel-eslint": "^8.2.3",
     "babel-jest": "^22.4.3",
     "babel-plugin-external-helpers": "^6.22.0",
     "babel-plugin-module-resolver": "^3.1.1",
@@ -81,10 +81,10 @@
     "eslint-config-react-app": "^2.1.0",
     "eslint-import-resolver-babel-module": "^4.0.0",
     "eslint-plugin-flowtype": "^2.46.1",
-    "eslint-plugin-import": "^2.10.0",
-    "eslint-plugin-jest": "^21.15.0",
+    "eslint-plugin-import": "^2.12.0",
+    "eslint-plugin-jest": "^21.17.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-react": "^7.7.0",
+    "eslint-plugin-react": "^7.8.2",
     "flow-bin": "^0.67.1",
     "flow-typed": "2.3.0",
     "jest": "^22.4.3",
@@ -100,7 +100,7 @@
     "rollup-plugin-scss": "^0.4.0",
     "rollup-plugin-uglify": "^3.0.0",
     "styled-components": "^3.2.5",
-    "stylelint": "^9.1.3",
+    "stylelint": "^9.2.1",
     "stylelint-config-standard": "^18.2.0",
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.3.1",

src/DataTable/DataTable.js

@@ -18,23 +18,30 @@ import TableWrapper from './TableWrapper';
 import NoData from './NoData';
 import { propTypes, defaultProps } from './DataTablePropTypes';
 import { decorateColumns, getSortDirection, calcFirstCellIndex } from './util';
-import { handleSelectAll, handleRowChecked, toggleExpand, handleSort, clearSelectedRows } from './statemgmt';
+import { handleSelectAll, handleRowChecked, toggleExpand, handleSort, clearSelected } from './statemgmt';
 import defaultTheme from '../themes/default';
 
+const recalculateRows = ({ defaultSortAsc, defaultSortField, data }) => {
+  const sortDirection = getSortDirection(defaultSortAsc);
+
+  return defaultSortField ? orderBy(data, defaultSortField, sortDirection) : data;
+};
+
 class DataTable extends Component {
   static propTypes = propTypes;
   static defaultProps = defaultProps;
 
   static getDerivedStateFromProps(props, state) {
-    // allow clearing of rows via passed clearSelectedRows prop
+    // allow clearing of rows via passed clearSelectedRows toggle prop
     if (props.clearSelectedRows !== state.clearSelectedRows) {
-      return clearSelectedRows(props.clearSelectedRows);
+      return clearSelected(props.clearSelectedRows);
     }
 
     // Keep data state in sync if it changes
-    if (props.data !== state.rows) {
+    if (props.data !== state.data) {
       return {
-        rows: orderBy(props.data, state.sortColumn, state.sortDirection),
+        data: props.data,
+        rows: recalculateRows(props),
       };
     }
 
@@ -60,10 +67,14 @@ class DataTable extends Component {
       selectedRows: [],
       sortColumn: props.defaultSortField,
       sortDirection,
-      rows: props.defaultSortField ? orderBy(props.data, props.defaultSortField, sortDirection) : props.data,
+      rows: recalculateRows(props),
       clearSelectedRows: false,
+      // eslint-disable-next-line react/no-unused-state
       defaultSortAsc: props.defaultSortAsc,
+      // eslint-disable-next-line react/no-unused-state
       defaultSortField: props.defaultSortField,
+      // eslint-disable-next-line react/no-unused-state
+      data: props.data,
     };
   }
 
@@ -73,7 +84,17 @@ class DataTable extends Component {
       || prevState.sortDirection !== this.state.sortDirection
       || prevState.sortColumn !== this.state.sortColumn)
     ) {
-      this.props.onTableUpdate(this.state);
+      const { allSelected, selectedCount, selectedRows, rows, sortColumn, sortDirection, clearSelectedRows } = this.state;
+
+      this.props.onTableUpdate({
+        allSelected,
+        selectedCount,
+        selectedRows,
+        rows,
+        sortColumn,
+        sortDirection,
+        clearSelectedRows,
+      });
     }
   }
 
@@ -247,6 +268,7 @@ class DataTable extends Component {
       noDataComponent,
       disabled,
       noHeader,
+      fixedHeader,
     } = this.props;
 
     const {
@@ -288,7 +310,11 @@ class DataTable extends Component {
               <Table disabled={disabled}>
                 {this.renderTableHead()}
 
-                <TableBody>
+                <TableBody
+                  fixedHeader={fixedHeader}
+                  hasOffset={overflowY}
+                  offset={overflowYOffset}
+                >
                   {this.renderRows()}
                 </TableBody>
               </Table>}

src/DataTable/DataTablePropTypes.js

@@ -56,6 +56,7 @@ export const propTypes = {
   disabled: PropTypes.bool,
   noHeader: PropTypes.bool,
   onRowClicked: PropTypes.func,
+  fixedHeader: PropTypes.bool,
 };
 
 export const defaultProps = {
@@ -93,4 +94,5 @@ export const defaultProps = {
   disabled: false,
   noHeader: false,
   onRowClicked: null,
+  fixedHeader: false,
 };

src/DataTable/ResponsiveWrapper.js

@@ -6,13 +6,14 @@ import styled, { css } from 'styled-components';
   https://www.brunildo.org/test/Overflowxy2.html
 */
 
-const TableWrapper = styled.div`
+const ResponsiveWrapper = styled.div`
   position: relative;
+  width: 100%;
   ${props => props.responsive && 'overflow-x: auto'};
   ${props => props.overflowY && props.responsive && props.overflowYOffset && css`
     padding-bottom: ${props.overflowYOffset};
     margin-bottom: -${props.overflowYOffset};
   `};
 `;
 
-export default TableWrapper;
+export default ResponsiveWrapper;

src/DataTable/Table.js

@@ -1,11 +1,11 @@
 import styled from 'styled-components';
 
 const TableStyle = styled.div`
-  display: table;
+  display: flex;
+  flex-direction: column;
   width: 100%;
   height: 100%;
   max-width: 100%;
-  border-collapse: collapse;
   ${props => props.disabled && 'pointer-events: none'};
   ${props => props.disabled && 'opacity: 0.4'};
 `;

src/DataTable/TableBody.js

@@ -1,7 +1,10 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 const TableBody = styled.div`
-  /* future styling */
+  ${props => props.fixedHeader && css`
+    max-height: ${props.hasOffset ? `calc(100vh - ${props.offset || 0})` : '100vh'};
+    overflow: scroll;
+  `};
 `;
 
 export default TableBody;

src/DataTable/TableRow.js

@@ -8,6 +8,7 @@ import { determineExpanderRowIdentifier, isExpandedRow } from './util';
 
 const TableRowStyle = styled.div`
   display: flex;
+  width: 100%;
   border-top: 1px solid ${props => props.theme.rows.borderColor};
   ${props => props.striped && css`
       &:nth-child(odd) {

src/DataTable/TableWrapper.js

@@ -1,8 +1,10 @@
 import styled from 'styled-components';
 
 const TableWrapper = styled.div`
+  display: table;
   position: relative;
   height: 100%;
+  width: 100%;
 `;
 
 export default TableWrapper;

src/DataTable/__tests__/DataTable.test.js

@@ -5,8 +5,51 @@ import { shallow } from 'enzyme';
 
 import DataTable from '../DataTable';
 
+// eslint-disable-next-line arrow-body-style
+jest.mock('shortid', () => {
+  return {
+    generate: jest.fn(() => 1),
+  };
+});
+
+// eslint-disable-next-line arrow-body-style
+const dataMock = () => {
+  return {
+    columns: [{ name: 'Test', selector: 'some.name' }],
+    data: [{ id: 1, some: { name: 'Henry the 8th' } }],
+  };
+};
+
 test('component <DataTable /> should render correctly', () => {
   const wrapper = shallow(<DataTable data={[]} columns={[]} />);
 
   expect(wrapper.dive().dive()).toMatchSnapshot();
 });
+
+test('component <DataTable /> should render correctly with columns/data', () => {
+  const mock = dataMock();
+  const wrapper = shallow(<DataTable data={mock.data} columns={mock.columns} />);
+
+  expect(wrapper.dive().dive()).toMatchSnapshot();
+});
+
+test('component <DataTable /> should render correctly if the keyField is overriden', () => {
+  const mock = dataMock();
+  const data = [{ uuid: 1, some: { name: 'Henry the 8th' } }];
+  const wrapper = shallow(<DataTable data={data} columns={mock.columns} keyField="uuid" />);
+
+  expect(wrapper.dive().dive()).toMatchSnapshot();
+});
+
+
+test('component <DataTable /> should render correctly with a default sort field', () => {
+  const mock = dataMock();
+  const wrapper = shallow(<DataTable
+    data={mock.data}
+    columns={mock.columns}
+    defaultSortField="some.name"
+  />);
+
+  expect(wrapper.dive().dive()).toMatchSnapshot();
+});
+