material-table - npm Package Compare versions

Comparing version 1.6.0 to 1.7.0

dist/demo.js

@@ -64,4 +64,18 @@ "use strict";
           birthCity: 63
+        }, {
+          name: 'Mehmet',
+          surname: 'Baran',
+          birthYear: 1987,
+          birthCity: 63
+        }, {
+          name: 'Mehmet',
+          surname: 'Baran',
+          birthYear: 1987,
+          birthCity: 63
         }],
-        title: "Demo Title"
+        title: "Demo Title",
+        options: {
+          columnsButton: true,
+          filtering: true
+        }
       }));
@@ -68,0 +82,0 @@ }

dist/m-table-actions.js

@@ -56,2 +56,3 @@ "use strict";
         key: action.icon + '' + index,
+        color: "inherit",
         disabled: action.disabled,
@@ -61,3 +62,3 @@ onClick: function onClick(event) {
         }
-      }, React.createElement(_core.Icon, action.iconProps, action.icon));
+      }, typeof action.icon === "string" ? React.createElement(_core.Icon, action.iconProps, action.icon) : React.createElement(action.icon, action.iconProps));
 
@@ -64,0 +65,0 @@ if (action.tooltip && !action.disabled) {

dist/m-table-body-row.js

@@ -22,14 +22,8 @@ "use strict";
 
-var React = _interopRequireWildcard(require("react"));
+var _core = require("@material-ui/core");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _mTableCell = _interopRequireDefault(require("./m-table-cell"));
+var React = _interopRequireWildcard(require("react"));
 
-var _mTableActions = _interopRequireDefault(require("./m-table-actions"));
-
-var _filterActions = _interopRequireDefault(require("./filter-actions"));
-
-var _core = require("@material-ui/core");
-
 /* eslint-disable no-unused-vars */
@@ -58,3 +52,4 @@
 
-        return React.createElement(_mTableCell.default, {
+        return React.createElement(_this.props.components.Cell, {
+          icons: _this.props.icons,
           columnDef: columnDef,
@@ -71,2 +66,4 @@ value: value,
     value: function renderActions() {
+      var _this2 = this;
+
       return React.createElement(_core.TableCell, {
@@ -82,5 +79,7 @@ style: {
         }
-      }, React.createElement(_mTableActions.default, {
+      }, React.createElement(this.props.components.Actions, {
         data: this.props.data,
-        actions: this.props.actions.filter((0, _filterActions.default)(this.props.options))
+        actions: this.props.actions.filter(function (a) {
+          return !a.isFreeAction && !_this2.props.options.selection;
+        })
       })));
@@ -103,2 +102,4 @@ }
     value: function render() {
+      var _this3 = this;
+
       var columns = this.renderColumns();
@@ -110,3 +111,5 @@
 
-      if (this.props.actions && this.props.actions.filter((0, _filterActions.default)(this.props.options)).length > 0) {
+      if (this.props.actions && this.props.actions.filter(function (a) {
+        return !a.isFreeAction && !_this3.props.options.selection;
+      }).length > 0) {
         if (this.props.options.actionsColumnIndex === -1) {
@@ -142,2 +145,3 @@ columns.push(this.renderActions());
   actions: _propTypes.default.array,
+  icons: _propTypes.default.any.isRequired,
   index: _propTypes.default.number.isRequired,
@@ -144,0 +148,0 @@ data: _propTypes.default.object.isRequired,

dist/m-table-body.js

@@ -24,14 +24,8 @@ "use strict";
 
-var React = _interopRequireWildcard(require("react"));
+var _core = require("@material-ui/core");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _mTableFilterRow = _interopRequireDefault(require("./m-table-filter-row"));
+var React = _interopRequireWildcard(require("react"));
 
-var _mTableBodyRow = _interopRequireDefault(require("./m-table-body-row"));
-
-var _filterActions = _interopRequireDefault(require("./filter-actions"));
-
-var _core = require("@material-ui/core");
-
 /* eslint-disable no-unused-vars */
@@ -53,6 +47,16 @@
     value: function renderEmpty(emptyRowCount, renderData) {
+      var _this = this;
+
       if (this.props.options.showEmptyDataSourceMessage && renderData.length === 0) {
+        var addColumn = 0;
+
+        if (this.props.options.selection || this.props.actions && this.props.actions.filter(function (a) {
+          return !a.isFreeAction && !_this.props.options.selection;
+        }).length > 0) {
+          addColumn = 1;
+        }
+
         return React.createElement(_core.TableRow, {
           style: {
-            height: 49 * (this.props.options.paging ? this.props.pageSize : 1)
+            height: 49 * (this.props.options.paging && this.props.options.emptyRowsWhenPaging ? this.props.pageSize : 1)
           },
@@ -66,6 +70,6 @@ key: 'empty-' + 0
           },
-          colSpan: this.props.columns.length,
+          colSpan: this.props.columns.length + addColumn,
           key: "empty-"
         }, this.props.localization.emptyDataSourceMessage));
-      } else {
+      } else if (this.props.options.emptyRowsWhenPaging) {
         return React.createElement(React.Fragment, null, (0, _toConsumableArray2.default)(Array(emptyRowCount)).map(function (r, index) {
@@ -89,3 +93,3 @@ return React.createElement(_core.TableRow, {
     value: function render() {
-      var _this = this;
+      var _this2 = this;
 
@@ -102,8 +106,13 @@ var renderData = this.props.renderData;
 
-      return React.createElement(_core.TableBody, null, this.props.options.filtering && React.createElement(_mTableFilterRow.default, {
+      return React.createElement(_core.TableBody, null, this.props.options.filtering && React.createElement(this.props.components.FilterRow, {
         columns: this.props.columns.filter(function (columnDef) {
           return !columnDef.hidden;
         }),
-        emptyCell: this.props.options.selection || this.props.actions && this.props.actions.filter((0, _filterActions.default)(this.props.options)).length > 0,
-        hasActions: this.props.actions && this.props.actions.filter((0, _filterActions.default)(this.props.options)).length > 0,
+        icons: this.props.icons,
+        emptyCell: this.props.options.selection || this.props.actions && this.props.actions.filter(function (a) {
+          return !a.isFreeAction && !_this2.props.options.selection;
+        }).length > 0,
+        hasActions: this.props.actions && this.props.actions.filter(function (a) {
+          return !a.isFreeAction && !_this2.props.options.selection;
+        }).length > 0,
         actionsColumnIndex: this.props.options.actionsColumnIndex,
@@ -114,11 +123,13 @@ onFilterChanged: this.props.onFilterChanged,
       }), renderData.map(function (data, index) {
-        return React.createElement(_mTableBodyRow.default, {
+        return React.createElement(_this2.props.components.Row, {
+          components: _this2.props.components,
+          icons: _this2.props.icons,
           data: data,
           index: index,
           key: index,
-          options: _this.props.options,
-          onRowSelected: _this.props.onRowSelected,
-          actions: _this.props.actions,
-          columns: _this.props.columns,
-          getFieldValue: _this.props.getFieldValue
+          options: _this2.props.options,
+          onRowSelected: _this2.props.onRowSelected,
+          actions: _this2.props.actions,
+          columns: _this2.props.columns,
+          getFieldValue: _this2.props.getFieldValue
         });
@@ -142,5 +153,7 @@ }), this.renderEmpty(emptyRowCount, renderData));
   actions: _propTypes.default.array,
+  components: _propTypes.default.object.isRequired,
   columns: _propTypes.default.array.isRequired,
   currentPage: _propTypes.default.number,
   getFieldValue: _propTypes.default.func.isRequired,
+  icons: _propTypes.default.object.isRequired,
   onRowSelected: _propTypes.default.func,
@@ -147,0 +160,0 @@ options: _propTypes.default.object.isRequired,

dist/m-table-cell.js

@@ -55,9 +55,9 @@ "use strict";
         if (this.props.value) {
-          return React.createElement(_core.Icon, {
+          return React.createElement(this.props.icons.Check, {
             style: style
-          }, "check");
+          });
         } else {
-          return React.createElement(_core.Icon, {
+          return React.createElement(this.props.icons.ThirdStateCheck, {
             style: style
-          }, "remove");
+          });
         }
@@ -64,0 +64,0 @@ } else if (this.props.columnDef.type === 'date') {

dist/m-table-filter-row.js

@@ -60,3 +60,4 @@ "use strict";
   function MTableFilterRow() {
-    var _getPrototypeOf2;
+    var _getPrototypeOf2,
+        _this2 = this;
 
@@ -133,3 +134,3 @@ var _this;
             position: "start"
-          }, React.createElement(_core.Icon, null, "filter_list"))
+          }, React.createElement(_this2.props.icons.Filter, null))
         }
@@ -190,3 +191,3 @@ });
     value: function render() {
-      var _this2 = this;
+      var _this3 = this;
 
@@ -196,3 +197,3 @@ var columns = this.props.columns.map(function (columnDef) {
           key: columnDef.tableData.id
-        }, _this2.getComponentForColumn(columnDef));
+        }, _this3.getComponentForColumn(columnDef));
       });
@@ -199,0 +200,0 @@

dist/m-table-pagination.js

@@ -26,7 +26,7 @@ "use strict";
 
-var React = _interopRequireWildcard(require("react"));
+var _core = require("@material-ui/core");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _core = require("@material-ui/core");
+var React = _interopRequireWildcard(require("react"));
 
@@ -82,15 +82,15 @@ /* eslint-disable no-unused-vars */
         "aria-label": "First Page"
-      }, React.createElement(_core.Icon, null, "first_page")), React.createElement(_core.IconButton, {
+      }, React.createElement(this.props.icons.FirstPage, null)), React.createElement(_core.IconButton, {
         onClick: this.handleBackButtonClick,
         disabled: page === 0,
         "aria-label": "Previous Page"
-      }, React.createElement(_core.Icon, null, "chevron_left")), React.createElement(_core.IconButton, {
+      }, React.createElement(this.props.icons.PreviousPage, null)), React.createElement(_core.IconButton, {
         onClick: this.handleNextButtonClick,
         disabled: page >= Math.ceil(count / rowsPerPage) - 1,
         "aria-label": "Next Page"
-      }, React.createElement(_core.Icon, null, "chevron_right")), React.createElement(_core.IconButton, {
+      }, React.createElement(this.props.icons.NextPage, null)), React.createElement(_core.IconButton, {
         onClick: this.handleLastPageButtonClick,
         disabled: page >= Math.ceil(count / rowsPerPage) - 1,
         "aria-label": "Last Page"
-      }, React.createElement(_core.Icon, null, "last_page")));
+      }, React.createElement(this.props.icons.LastPage, null)));
     }
@@ -97,0 +97,0 @@ }]);

dist/m-table-toolbar.js

@@ -26,16 +26,14 @@ "use strict";
 
-var React = _interopRequireWildcard(require("react"));
+var _core = require("@material-ui/core");
 
+var _colorManipulator = require("@material-ui/core/styles/colorManipulator");
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _mTableActions = _interopRequireDefault(require("./m-table-actions"));
+var _filefy = require("filefy");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _core = require("@material-ui/core");
+var React = _interopRequireWildcard(require("react"));
 
-var _filefy = require("filefy");
-
-var _colorManipulator = require("@material-ui/core/styles/colorManipulator");
-
 /* eslint-disable no-unused-vars */
@@ -63,6 +61,6 @@
         });
-      });
+      }); // eslint-disable-next-line no-unused-vars
 
-      var builder = new _filefy.CsvBuilder((_this.props.title || 'data') + '.csv') // eslint-disable-line no-unused-vars
-      .setColumns(columns.map(function (columnDef) {
+
+      var builder = new _filefy.CsvBuilder((_this.props.title || 'data') + '.csv').setColumns(columns.map(function (columnDef) {
         return columnDef.title;
@@ -83,21 +81,36 @@ })).addRows(data).exportFile();
   (0, _createClass2.default)(MTableToolbar, [{
+    key: "renderSearch",
+    value: function renderSearch() {
+      var _this2 = this;
+
+      if (this.props.search) {
+        return React.createElement(_core.TextField, {
+          value: this.props.searchText,
+          onChange: function onChange(event) {
+            return _this2.props.onSearchChanged(event.target.value);
+          },
+          color: "inherit",
+          InputProps: {
+            startAdornment: React.createElement(_core.InputAdornment, {
+              position: "start"
+            }, React.createElement(this.props.icons.Search, {
+              color: "inherit"
+            }))
+          }
+        });
+      } else {
+        return null;
+      }
+    }
+  }, {
     key: "renderDefaultActions",
     value: function renderDefaultActions() {
-      var _this2 = this;
+      var _this3 = this;
 
-      return React.createElement("div", null, this.props.search && React.createElement(_core.TextField, {
-        value: this.props.searchText,
-        onChange: function onChange(event) {
-          return _this2.props.onSearchChanged(event.target.value);
-        },
-        InputProps: {
-          startAdornment: React.createElement(_core.InputAdornment, {
-            position: "start"
-          }, React.createElement(_core.Icon, null, "search"))
-        }
-      }), this.props.columnsButton && React.createElement("span", null, React.createElement(_core.Tooltip, {
+      return React.createElement("div", null, this.renderSearch(), this.props.columnsButton && React.createElement("span", null, React.createElement(_core.Tooltip, {
         title: "Show Columns"
       }, React.createElement(_core.IconButton, {
+        color: "inherit",
         onClick: function onClick(event) {
-          return _this2.setState({
+          return _this3.setState({
             columnsButtonAnchorEl: event.currentTarget
@@ -107,7 +120,7 @@ });
         "aria-label": "Show Columns"
-      }, React.createElement(_core.Icon, null, "view_column"))), React.createElement(_core.Menu, {
+      }, React.createElement(this.props.icons.ViewColumn, null))), React.createElement(_core.Menu, {
         anchorEl: this.state.columnsButtonAnchorEl,
         open: Boolean(this.state.columnsButtonAnchorEl),
         onClose: function onClose() {
-          return _this2.setState({
+          return _this3.setState({
             columnsButtonAnchorEl: null
@@ -124,6 +137,6 @@ });
             onChange: function onChange(event, checked) {
-              var columns = _this2.props.columns;
+              var columns = _this3.props.columns;
               columns[index].hidden = !checked;
 
-              _this2.props.onColumnsChanged(columns);
+              _this3.props.onColumnsChanged(columns);
             }
@@ -135,4 +148,5 @@ })
       }, React.createElement(_core.IconButton, {
+        color: "inherit",
         onClick: function onClick(event) {
-          return _this2.setState({
+          return _this3.setState({
             exportButtonAnchorEl: event.currentTarget
@@ -142,7 +156,7 @@ });
         "aria-label": "Show Columns"
-      }, React.createElement(_core.Icon, null, "save_alt"))), React.createElement(_core.Menu, {
+      }, React.createElement(this.props.icons.Export, null))), React.createElement(_core.Menu, {
         anchorEl: this.state.exportButtonAnchorEl,
         open: Boolean(this.state.exportButtonAnchorEl),
         onClose: function onClose() {
-          return _this2.setState({
+          return _this3.setState({
             exportButtonAnchorEl: null
@@ -154,3 +168,3 @@ });
         onClick: this.exportCsv
-      }, "Export as CSV"))), React.createElement(_mTableActions.default, {
+      }, "Export as CSV"))), React.createElement(this.props.components.Actions, {
         actions: this.props.actions && this.props.actions.filter(function (a) {
@@ -162,12 +176,17 @@ return a.isFreeAction;
   }, {
-    key: "renderActions",
-    value: function renderActions() {
-      return React.createElement("div", null, this.props.selectedRows && this.props.selectedRows.length > 0 ? React.createElement(_mTableActions.default, {
+    key: "renderSelectedActions",
+    value: function renderSelectedActions() {
+      return React.createElement(React.Fragment, null, this.renderSearch(), React.createElement(this.props.components.Actions, {
         actions: this.props.actions.filter(function (a) {
-          return !a.isFreeAction && (!a.isRowAction || a.isSelectedAction);
+          return !a.isFreeAction;
         }),
         data: this.props.selectedRows
-      }) : this.renderDefaultActions());
+      }));
     }
   }, {
+    key: "renderActions",
+    value: function renderActions() {
+      return React.createElement("div", null, this.props.selectedRows && this.props.selectedRows.length > 0 ? this.renderSelectedActions() : this.renderDefaultActions());
+    }
+  }, {
     key: "render",
@@ -214,3 +233,3 @@ value: function render() {
   title: _propTypes.default.string.isRequired,
-  renderData: _propTypes.default.func,
+  renderData: _propTypes.default.array,
   exportButton: _propTypes.default.bool,
@@ -217,0 +236,0 @@ classes: _propTypes.default.object

dist/material-table.js

@@ -10,4 +10,54 @@ "use strict";
 });
+Object.defineProperty(exports, "MTableActions", {
+  enumerable: true,
+  get: function get() {
+    return _mTableActions.default;
+  }
+});
+Object.defineProperty(exports, "MTableBody", {
+  enumerable: true,
+  get: function get() {
+    return _mTableBody.default;
+  }
+});
+Object.defineProperty(exports, "MTableBodyRow", {
+  enumerable: true,
+  get: function get() {
+    return _mTableBodyRow.default;
+  }
+});
+Object.defineProperty(exports, "MTableCell", {
+  enumerable: true,
+  get: function get() {
+    return _mTableCell.default;
+  }
+});
+Object.defineProperty(exports, "MTableFilterRow", {
+  enumerable: true,
+  get: function get() {
+    return _mTableFilterRow.default;
+  }
+});
+Object.defineProperty(exports, "MTableHeader", {
+  enumerable: true,
+  get: function get() {
+    return _mTableHeader.default;
+  }
+});
+Object.defineProperty(exports, "MTablePagination", {
+  enumerable: true,
+  get: function get() {
+    return _mTablePagination.default;
+  }
+});
+Object.defineProperty(exports, "MTableToolbar", {
+  enumerable: true,
+  get: function get() {
+    return _mTableToolbar.default;
+  }
+});
 exports.default = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));
@@ -39,6 +89,12 @@
 
-var _filterActions = _interopRequireDefault(require("./filter-actions"));
+var _mTableActions = _interopRequireDefault(require("./m-table-actions"));
 
 var _mTableBody = _interopRequireDefault(require("./m-table-body"));
 
+var _mTableBodyRow = _interopRequireDefault(require("./m-table-body-row"));
+
+var _mTableCell = _interopRequireDefault(require("./m-table-cell"));
+
+var _mTableFilterRow = _interopRequireDefault(require("./m-table-filter-row"));
+
 var _mTableHeader = _interopRequireDefault(require("./m-table-header"));
@@ -256,2 +312,4 @@
       var calculatedProps = (0, _objectSpread2.default)({}, props || this.props);
+      calculatedProps.components = (0, _objectSpread2.default)({}, MaterialTable.defaultProps.components, calculatedProps.components);
+      calculatedProps.icons = (0, _objectSpread2.default)({}, MaterialTable.defaultProps.icons, calculatedProps.icons);
       calculatedProps.options = (0, _objectSpread2.default)({}, MaterialTable.defaultProps.options, calculatedProps.options);
@@ -302,3 +360,3 @@ return calculatedProps;
           }
-        }, React.createElement(_core.TableRow, null, React.createElement(_core.TablePagination, {
+        }, React.createElement(_core.TableRow, null, React.createElement(props.components.Pagination, {
           style: {
@@ -332,3 +390,7 @@ float: 'right'
           },
-          ActionsComponent: _mTablePagination.default
+          ActionsComponent: function ActionsComponent(subProps) {
+            return React.createElement(_mTablePagination.default, (0, _extends2.default)({}, subProps, {
+              icons: props.icons
+            }));
+          }
         }))));
@@ -348,4 +410,5 @@ }
       var props = this.getProps();
-      return React.createElement(_core.Paper, null, props.options.toolbar && React.createElement(_mTableToolbar.default, {
+      return React.createElement(_core.Paper, null, props.options.toolbar && React.createElement(props.components.Toolbar, {
         actions: props.actions,
+        components: props.components,
         selectedRows: this.state.selectedCount > 0 ? this.state.data.filter(function (a) {
@@ -356,2 +419,3 @@ return a.tableData.checked;
         columnsButton: props.options.columnsButton,
+        icons: props.icons,
         exportButton: props.options.exportButton,
@@ -379,3 +443,3 @@ renderData: this.state.renderData,
         }
-      }, React.createElement(_core.Table, null, React.createElement(_mTableHeader.default, {
+      }, React.createElement(_core.Table, null, React.createElement(props.components.Header, {
         localization: (0, _objectSpread2.default)({}, MaterialTable.defaultProps.localization, this.props.localization),
@@ -386,3 +450,5 @@ columns: this.state.columns,
         dataCount: this.state.data.length,
-        showActionsColumn: props.actions && props.actions.filter((0, _filterActions.default)(this.props.options)).length > 0,
+        showActionsColumn: props.actions && props.actions.filter(function (a) {
+          return !a.isFreeAction && !_this3.props.options.selection;
+        }).length > 0,
         orderBy: this.state.orderBy,
@@ -418,4 +484,6 @@ orderDirection: this.state.orderDirection,
         sorting: props.options.sorting
-      }), React.createElement(_mTableBody.default, {
+      }), React.createElement(props.components.Body, {
         actions: props.actions,
+        components: props.components,
+        icons: props.icons,
         renderData: this.state.renderData,
@@ -474,3 +542,48 @@ currentPage: this.state.currentPage,
   columns: [],
+  components: {
+    Actions: _mTableActions.default,
+    Body: _mTableBody.default,
+    Cell: _mTableCell.default,
+    FilterRow: _mTableFilterRow.default,
+    Header: _mTableHeader.default,
+    Pagination: _core.TablePagination,
+    Row: _mTableBodyRow.default,
+    Toolbar: _mTableToolbar.default
+  },
   data: [],
+  icons: {
+    /* eslint-disable react/display-name */
+    Check: function Check(props) {
+      return React.createElement(_core.Icon, props, "check");
+    },
+    Export: function Export(props) {
+      return React.createElement(_core.Icon, props, "save_alt");
+    },
+    Filter: function Filter(props) {
+      return React.createElement(_core.Icon, props, "filter_list");
+    },
+    FirstPage: function FirstPage(props) {
+      return React.createElement(_core.Icon, props, "first_page");
+    },
+    LastPage: function LastPage(props) {
+      return React.createElement(_core.Icon, props, "last_page");
+    },
+    NextPage: function NextPage(props) {
+      return React.createElement(_core.Icon, props, "chevron_right");
+    },
+    PreviousPage: function PreviousPage(props) {
+      return React.createElement(_core.Icon, props, "chevron_left");
+    },
+    Search: function Search(props) {
+      return React.createElement(_core.Icon, props, "search");
+    },
+    ThirdStateCheck: function ThirdStateCheck(props) {
+      return React.createElement(_core.Icon, props, "remove");
+    },
+    ViewColumn: function ViewColumn(props) {
+      return React.createElement(_core.Icon, props, "view_column");
+    }
+    /* eslint-enable react/display-name */
+
+  },
   title: 'Table Title',
@@ -480,2 +593,3 @@ options: {
     columnsButton: false,
+    emptyRowsWhenPaging: true,
     exportButton: false,
@@ -486,7 +600,7 @@ filtering: false,
     pageSizeOptions: [5, 10, 20],
+    showEmptyDataSourceMessage: true,
     search: true,
     selection: false,
     sorting: true,
-    toolbar: true,
-    showEmptyDataSourceMessage: true
+    toolbar: true
   },
@@ -525,3 +639,25 @@ localization: {
   })).isRequired,
+  components: _propTypes.default.shape({
+    Actions: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
+    Body: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
+    Cell: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
+    FilterRow: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
+    Header: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
+    Pagination: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
+    Row: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
+    Toolbar: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func])
+  }),
   data: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
+  icons: _propTypes.default.shape({
+    Check: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
+    Export: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
+    Filter: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
+    FirstPage: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
+    LastPage: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
+    NextPage: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
+    PreviousPage: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
+    Search: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
+    ThirdStateCheck: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
+    ViewColumn: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func])
+  }),
   title: _propTypes.default.string,
@@ -531,2 +667,3 @@ options: _propTypes.default.shape({
     columnsButton: _propTypes.default.bool,
+    emptyRowsWhenPaging: _propTypes.default.bool,
     exportButton: _propTypes.default.bool,
@@ -537,7 +674,7 @@ filtering: _propTypes.default.bool,
     pageSizeOptions: _propTypes.default.arrayOf(_propTypes.default.number),
+    showEmptyDataSourceMessage: _propTypes.default.bool,
     search: _propTypes.default.bool,
     selection: _propTypes.default.bool,
     sorting: _propTypes.default.bool,
-    toolbar: _propTypes.default.bool,
-    showEmptyDataSourceMessage: _propTypes.default.bool
+    toolbar: _propTypes.default.bool
   }),
@@ -544,0 +681,0 @@ localization: _propTypes.default.shape({

index.d.ts

@@ -7,2 +7,4 @@ import * as React from 'react';
   columns: Column[];
+  components?: Components;
+  icons?: Icons,
   data: object;
@@ -19,4 +21,4 @@ title: string;
 export interface Action {
-  icon: string;
-  isFreeAction?: boolean;
+  icon: string | React.ReactElement;
+  isFreeAction?: boolean;    
   tooltip?: string;
@@ -41,5 +43,30 @@ onClick: (event: any, data: any) => void;
 
+export interface Components {
+  Actions: React.ReactElement;
+  Body: React.ReactElement;
+  Cell: React.ReactElement;
+  FilterRow: React.ReactElement;
+  Header: React.ReactElement;
+  Pagination: React.ReactElement;
+  Row: React.ReactElement;
+  Toolbar: React.ReactElement;
+}
+
+export interface Icons {
+  Check: React.ReactElement;
+  Export: React.ReactElement;
+  Filter: React.ReactElement;
+  FirstPage: React.ReactElement;
+  LastPage: React.ReactElement;
+  NextPage: React.ReactElement;
+  PreviousPage: React.ReactElement;
+  Search: React.ReactElement;
+  ThirdStateCheck: React.ReactElement;
+  ViewColumn: React.ReactElement;
+}
+
 export interface Options {
   actionsColumnIndex?:number;
   columnsButton?: boolean;
+  emptyRowsWhenPaging?: boolean;
   exportButton?: boolean;
@@ -50,2 +77,3 @@ filtering?: boolean;
   pageSizeOptions?: number[];
+  showEmptyDataSourceMessage?:boolean;
   search?: boolean;
@@ -55,3 +83,2 @@ selection?: boolean;
   toolbar?: boolean;
-  showEmptyDataSourceMessage?:boolean;
 }
@@ -58,0 +85,0 @@

package.json

 {
   "name": "material-table",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "Datatable for React based on https://material-ui.com/api/table/ with additional features",
@@ -5,0 +5,0 @@ "main": "dist/material-table.js",

README.md

@@ -31,2 +31,3 @@ # material-table
 ```
+or use `icons` props to give icons to material-table
 
@@ -33,0 +34,0 @@ ## Usage

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

81663

increased by9.91%

Lines of code

1838

increased by11.87%

Number of lines in readme file

70

increased by1.45%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of package files

14

decreased by-6.67%

No dependency changes