fix: display export button for selected state

material-table-core · Jun 27, 2022 · cf6c06b · cf6c06b
1 parent f204080
commit cf6c06b
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 29 deletions.
diff --git a/src/components/MTableToolbar/index.js b/src/components/MTableToolbar/index.js
@@ -24,8 +24,8 @@ export function MTableToolbar(props) {
   const options = useOptionStore();
 
   const selectedRows = React.useMemo(
-    () => props.selectedRows.filter((a) => a.tableData.checked),
-    [props.selectedRows]
+    () => props.originalData.filter((a) => a.tableData.checked),
+    [props.originalData]
   );
 
   const onSearchChange = (searchText) => {
@@ -127,12 +127,12 @@ export function MTableToolbar(props) {
     }
   }
 
-  function renderDefaultActions() {
+  function renderDefaultActions(isSelectionActive) {
     const { classes } = props;
-
+    const diplayedActions = isSelectionActive ? 'toolbarOnSelect' : 'toolbar';
     return (
       <div style={{ display: 'flex' }}>
-        {options.columnsButton && (
+        {options.columnsButton && !isSelectionActive && (
           <span>
             <Tooltip title={localization.showColumnsTitle}>
               <IconButton
@@ -243,39 +243,22 @@ export function MTableToolbar(props) {
           <props.components.Actions
             actions={
               props.actions &&
-              props.actions.filter((a) => a.position === 'toolbar')
+              props.actions.filter((a) => a.position === diplayedActions)
             }
+            data={isSelectionActive ? selectedRows : undefined}
             components={props.components}
           />
         </span>
       </div>
     );
   }
 
-  function renderSelectedActions() {
-    return (
-      <React.Fragment>
-        <props.components.Actions
-          actions={props.actions.filter(
-            (a) => a.position === 'toolbarOnSelect'
-          )}
-          data={selectedRows}
-          components={props.components}
-        />
-      </React.Fragment>
-    );
-  }
-
   function renderActions() {
     const { classes } = props;
 
     return (
       <div className={classes.actions}>
-        <div>
-          {selectedRows.length > 0
-            ? renderSelectedActions()
-            : renderDefaultActions()}
-        </div>
+        <div>{renderDefaultActions(selectedRows.length > 0)}</div>
       </div>
     );
   }
@@ -311,6 +294,7 @@ export function MTableToolbar(props) {
       : options.showTitle
       ? props.title
       : null;
+
   return (
     <Toolbar
       ref={props.forwardedRef}
@@ -334,7 +318,7 @@ MTableToolbar.defaultProps = {
   columns: [],
   columnsHiddenInColumnsButton: false, // By default, all columns are shown in the Columns Button (columns action when `options.columnsButton = true`)
   searchText: '',
-  selectedRows: [],
+  originalData: [],
   title: 'No Title!'
 };
 
@@ -347,7 +331,7 @@ MTableToolbar.propTypes = {
   dataManager: PropTypes.object.isRequired,
   searchText: PropTypes.string,
   onSearchChanged: PropTypes.func.isRequired,
-  selectedRows: PropTypes.array,
+  originalData: PropTypes.array,
   title: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
   data: PropTypes.func,
   classes: PropTypes.object

diff --git a/src/material-table.js b/src/material-table.js
@@ -1071,6 +1071,7 @@ export default class MaterialTable extends React.Component {
   };
   getRenderData = () =>
     this.props.options.exportAll ? this.state.data : this.state.renderData;
+
   render() {
     const props = this.getProps();
     return (
@@ -1089,7 +1090,7 @@ export default class MaterialTable extends React.Component {
             <this.props.components.Toolbar
               actions={this.state.actions}
               components={this.props.components}
-              selectedRows={this.state.originalData}
+              originalData={this.state.originalData}
               columns={this.state.columns}
               getFieldValue={this.dataManager.getFieldValue}
               data={this.getRenderData}

diff --git a/src/utils/data-manager.js b/src/utils/data-manager.js
@@ -775,7 +775,7 @@ export default class DataManager {
       lastEditingRow: this.lastEditingRow,
       orderBy: this.orderBy,
       orderDirection: this.orderDirection,
-      originalData: this.data,
+      originalData: [...this.data],
       pageSize: this.pageSize,
       renderData: this.pagedData,
       searchText: this.searchText,