material-table - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

dist/m-table-body-row.js

@@ -10,13 +10,19 @@ /* eslint-disable no-unused-vars */
 export default class MTableBodyRow extends React.Component {
-  render() {
-    return React.createElement(TableRow, {
-      selected: this.props.index % 2 === 0
-    }, this.props.options.selection ? React.createElement(TableCell, {
-      padding: "checkbox",
-      key: "key-selection-column"
-    }, React.createElement(Checkbox, {
-      checked: this.props.data.tableData.checked === true,
-      value: `${this.props.data.tableData.id}`,
-      onChange: this.props.onRowSelected
-    })) : this.props.actions && this.props.actions.filter(a => !a.isFreeAction).length > 0 && React.createElement(TableCell, {
+  renderColumns() {
+    const mapArr = this.props.columns.filter(columnDef => {
+      return !columnDef.hidden;
+    }).map(columnDef => {
+      const value = this.props.getFieldValue(this.props.data, columnDef);
+      return React.createElement(MTableCell, {
+        columnDef: columnDef,
+        value: value,
+        key: columnDef.tableData.id,
+        rowData: this.props.data
+      });
+    });
+    return mapArr;
+  }
+
+  renderActions() {
+    return React.createElement(TableCell, {
       style: {
@@ -36,15 +42,34 @@ paddingTop: 0,
       })
-    }))), this.props.columns.filter(columnDef => {
-      return !columnDef.hidden;
-    }).map(columnDef => {
-      const value = this.props.getFieldValue(this.props.data, columnDef);
-      return React.createElement(MTableCell, {
-        columnDef: columnDef,
-        value: value,
-        key: columnDef.tableData.id,
-        rowData: this.props.data
-      });
+    })));
+  }
+
+  renderSelectionColumn() {
+    return React.createElement(TableCell, {
+      padding: "checkbox",
+      key: "key-selection-column"
+    }, React.createElement(Checkbox, {
+      checked: this.props.data.tableData.checked === true,
+      value: `${this.props.data.tableData.id}`,
+      onChange: this.props.onRowSelected
     }));
   }
 
+  render() {
+    const columns = this.renderColumns();
+
+    if (this.props.options.selection) {
+      columns.splice(0, 0, this.renderSelectionColumn());
+    } else if (this.props.actions && this.props.actions.filter(a => !a.isFreeAction).length > 0) {
+      if (this.props.options.actionsColumnIndex === -1) {
+        columns.push(this.renderActions());
+      } else if (this.props.options.actionsColumnIndex >= 0) {
+        columns.splice(this.props.options.actionsColumnIndex, 0, this.renderActions());
+      }
+    }
+
+    return React.createElement(TableRow, {
+      selected: this.props.index % 2 === 0
+    }, columns);
+  }
+
 }
@@ -51,0 +76,0 @@ MTableBodyRow.defaultProps = {

dist/m-table-body.js

@@ -26,3 +26,6 @@ /* eslint-disable no-unused-vars */
       emptyCell: this.props.options.selection || this.props.actions && this.props.actions.filter(a => !a.isFreeAction).length > 0,
-      onFilterChanged: this.props.onFilterChanged
+      actionsColumnIndex: this.props.options.actionsColumnIndex,
+      onFilterChanged: this.props.onFilterChanged,
+      selection: this.props.options.selection,
+      onFilterSelectionChanged: this.props.onFilterSelectionChanged
     }), renderData.map((data, index) => {
@@ -57,3 +60,4 @@ return React.createElement(MTableBodyRow, {
   pageSize: 5,
-  renderData: []
+  renderData: [],
+  selection: false
 };
@@ -68,3 +72,5 @@ MTableBody.propTypes = {
   pageSize: PropTypes.number,
-  renderData: PropTypes.array
+  renderData: PropTypes.array,
+  selection: PropTypes.bool.isRequired,
+  onFilterSelectionChanged: PropTypes.func.isRequired
 };

dist/m-table-filter-row.js

@@ -129,2 +129,22 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
   render() {
+    const columns = this.props.columns.map(columnDef => React.createElement(TableCell, {
+      key: columnDef.tableData.id
+    }, this.getComponentForColumn(columnDef)));
+
+    if (this.props.selection) {
+      columns.splice(0, 0, React.createElement(TableCell, {
+        style: {
+          padding: '0 12px'
+        }
+      }, React.createElement(Checkbox, {
+        onChange: this.props.onFilterSelectionChanged
+      })));
+    } else if (this.props.emptyCell) {
+      if (this.props.actionsColumnIndex === -1) {
+        columns.push(React.createElement(TableCell, null));
+      } else {
+        columns.splice(this.props.actionsColumnIndex, 0, React.createElement(TableCell, null));
+      }
+    }
+
     return React.createElement(TableRow, {
@@ -134,5 +154,3 @@ style: {
       }
-    }, this.props.emptyCell && React.createElement(TableCell, null), this.props.columns.map(columnDef => React.createElement(TableCell, {
-      key: columnDef.tableData.id
-    }, this.getComponentForColumn(columnDef))));
+    }, columns);
   }
@@ -144,3 +162,4 @@
   emptyCell: false,
-  columns: []
+  columns: [],
+  selection: false
 };
@@ -150,4 +169,6 @@ MTableFilterRow.propTypes = {
   columns: PropTypes.array.isRequired,
-  onFilterChanged: PropTypes.func.isRequired
+  onFilterChanged: PropTypes.func.isRequired,
+  selection: PropTypes.bool.isRequired,
+  onFilterSelectionChanged: PropTypes.func.isRequired
 };
 export default MTableFilterRow;

dist/m-table-header.js

@@ -8,15 +8,6 @@ /* eslint-disable no-unused-vars */
 class MTableHeader extends React.Component {
-  render() {
-    return React.createElement(TableHead, null, React.createElement(TableRow, null, this.props.hasSelection ? React.createElement(TableCell, {
-      padding: "checkbox",
-      key: "key-selection-column"
-    }, React.createElement(Checkbox, {
-      indeterminate: this.props.selectedCount > 0 && this.props.selectedCount < this.props.dataCount,
-      checked: this.props.selectedCount === this.props.dataCount,
-      onChange: (event, checked) => this.props.onAllSelected && this.props.onAllSelected(checked)
-    })) : this.props.showActionsColumn && React.createElement(TableCell, {
-      key: "key-actions-column"
-    }, React.createElement(TableSortLabel, null, this.props.localization.actions)), this.props.columns.filter(columnDef => {
+  renderHeader() {
+    const mapArr = this.props.columns.filter(columnDef => {
       return !columnDef.hidden;
-    }).map((columnDef, index, arr) => React.createElement(TableCell, {
+    }).map(columnDef => React.createElement(TableCell, {
       key: columnDef.tableData.id,
@@ -31,5 +22,39 @@ numeric: ['numeric'].indexOf(columnDef.type) !== -1
       }
-    }, columnDef.title) : columnDef.title))));
+    }, columnDef.title) : columnDef.title));
+    return mapArr;
   }
 
+  renderActionsHeader() {
+    return React.createElement(TableCell, {
+      key: "key-actions-column"
+    }, React.createElement(TableSortLabel, null, this.props.localization.actions));
+  }
+
+  renderSelectionHeader() {
+    return React.createElement(TableCell, {
+      padding: "checkbox",
+      key: "key-selection-column"
+    }, React.createElement(Checkbox, {
+      indeterminate: this.props.selectedCount > 0 && this.props.selectedCount < this.props.dataCount,
+      checked: this.props.selectedCount === this.props.dataCount,
+      onChange: (event, checked) => this.props.onAllSelected && this.props.onAllSelected(checked)
+    }));
+  }
+
+  render() {
+    const headers = this.renderHeader();
+
+    if (this.props.hasSelection) {
+      headers.splice(0, 0, this.renderSelectionHeader());
+    } else if (this.props.showActionsColumn) {
+      if (this.props.actionsHeaderIndex >= 0) {
+        headers.splice(this.props.actionsHeaderIndex, 0, this.renderActionsHeader());
+      } else if (this.props.actionsHeaderIndex === -1) {
+        headers.push(this.renderActionsHeader());
+      }
+    }
+
+    return React.createElement(TableHead, null, React.createElement(TableRow, null, headers));
+  }
+
 }
@@ -43,3 +68,4 @@
   orderBy: undefined,
-  orderDirection: 'asc'
+  orderDirection: 'asc',
+  actionsHeaderIndex: 0
 };
@@ -55,4 +81,5 @@ MTableHeader.propTypes = {
   orderBy: PropTypes.number,
-  orderDirection: PropTypes.string
+  orderDirection: PropTypes.string,
+  actionsHeaderIndex: PropTypes.number
 };
 export default MTableHeader;

dist/material-table.js

@@ -37,3 +37,4 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread";
       orderBy: -1,
-      orderDirection: ''
+      orderDirection: '',
+      filterSelectionChecked: false
     }, this.getDataAndColumns(calculatedProps));
@@ -90,2 +91,6 @@ }
     if (this.state) {
+      renderData = renderData.filter(row => {
+        if (this.state.filterSelectionChecked) return row.tableData.checked;
+        return row.tableData;
+      });
       this.state.columns.filter(columnDef => columnDef.tableData.filterValue).forEach(columnDef => {
@@ -290,3 +295,4 @@ const {
         });
-      }
+      },
+      actionsHeaderIndex: props.options.actionsColumnIndex
     }), React.createElement(MTableBody, {
@@ -309,2 +315,12 @@ actions: props.actions,
       },
+      onFilterSelectionChanged: event => {
+        const filterSelectionChecked = event.target.checked;
+        const columns = this.state.columns;
+        this.setState({
+          columns,
+          filterSelectionChecked
+        }, () => {
+          this.setData();
+        });
+      },
       onRowSelected: (event, checked) => {
@@ -317,2 +333,3 @@ const data = this.state.data;
         }), () => this.onSelectionChange());
+        this.setData();
       }
@@ -331,2 +348,3 @@ }))), this.renderFooter());
   options: {
+    actionsColumnIndex: 0,
     columnsButton: false,
@@ -367,2 +385,3 @@ exportButton: false,
   options: PropTypes.shape({
+    actionsColumnIndex: PropTypes.number,
     columnsButton: PropTypes.bool,
@@ -369,0 +388,0 @@ exportButton: PropTypes.bool,

index.d.ts

@@ -33,2 +33,3 @@ import * as React from 'react';
 export interface Options {
+  actionsColumnIndex?:number;
   columnsButton?: boolean;
@@ -35,0 +36,0 @@ exportButton?: boolean;

package.json

 {
   "name": "material-table",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Datatable for React based on https://material-ui.com/api/table/ with additional features",
@@ -15,6 +15,12 @@ "main": "dist/material-table.js",
     "copy": "robocopy dist docs/node_modules/material-table/dist",
-    "lint": "eslint src/** --fix",
+    "lint": "eslint src/**",
+    "lint:fix": "eslint src/** --fix",
     "docz:dev": "docz dev",
     "docz:build": "docz build"
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "npm run lint"
+    }
+  },
   "repository": {
@@ -52,3 +58,4 @@ "type": "git",
     "eslint-plugin-react": "7.11.1",
-    "eslint-plugin-standard": "4.0.0"
+    "eslint-plugin-standard": "4.0.0",
+    "husky": "^1.2.0"
   },
@@ -55,0 +62,0 @@ "peerDependencies": {

README.md

@@ -8,6 +8,8 @@ # material-table
 [![Follow on Twitter](https://img.shields.io/twitter/follow/baranmehmet.svg?label=follow+baranmehmet)](https://twitter.com/baranmehmet)
+[![Gitter chat](https://badges.gitter.im/gitterHQ/gitter.png)](https://gitter.im/material-table/Lobby)
 
-Datatable for React based on https://material-ui.com/api/table/ with additional features
+A simple and powerful Datatable for React based on [Material-UI Table](https://material-ui.com/api/table/) with some additional features.
 
-[__DEMO AND DOCUMENTATION__](https://mbrn.github.io/material-table/)
+## Demo and documentation
+You can access all examples and documentation from [__docs site__](https://mbrn.github.io/material-table/).
 
@@ -34,4 +36,4 @@ ## Installation
 ```js
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
+import React, { Component } from 'react'
+import ReactDOM from 'react-dom'
 import MaterialTable from 'material-table'
@@ -42,15 +44,15 @@
     return (
-      <div style={{maxWidth: '100%'}}>
+      <div style={{ maxWidth: '100%' }}>
         <MaterialTable
           columns={[
-            {title: 'Adı', field: 'name'},
-            {title: 'Soyadı', field: 'surname'},
-            {title: 'Doğum Yılı', field: 'birthYear', type: 'numeric'},
-            {title: 'Doğum Yeri', field: 'birthCity', lookup: {34: 'İstanbul', 63: 'Şanlıurfa'}}
+            { title: 'Adı', field: 'name' },
+            { title: 'Soyadı', field: 'surname' },
+            { title: 'Doğum Yılı', field: 'birthYear', type: 'numeric' },
+            { title: 'Doğum Yeri', field: 'birthCity', lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' } }
           ]}
-          data={[{name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63}]}
+          data={[{ name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 }]}
           title="Demo Title"
         />
       </div>
-    );
+    )
   }
@@ -62,6 +64,2 @@ }
 
-## Documentation
-
-You can access all examples and documentation from [__docs site__](https://mbrn.github.io/material-table/)
-
 ## Contributing
@@ -71,5 +69,6 @@
 
-## Licence
+If you have any sort of doubt, idea or just want to talk about the project, feel free to join [our chat on Gitter](https://gitter.im/material-table/Lobby) :)
 
-This project is licensed under the terms of the [MIT license](/LICENSE).
+## License
 
+This project is licensed under the terms of the [MIT license](/LICENSE).

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

44891

increased by7.42%

Lines of code

1102

increased by8.57%

Worsened metrics

Dev dependency count

17

increased by6.25%

Number of lines in readme file

69

decreased by-2.82%

No dependency changes