toolbarPosition: bottom - Ubica la barra de herramientas al mismo niv…

examples/examples.js

@@ -14,7 +14,6 @@ import CustomizeSearchRender from './customize-search-render';
 import CustomizeSorting from './customize-sorting';
 import CustomizeStyling from './customize-styling';
 import CustomizeToolbar from './customize-toolbar';
-import CustomizeToolbarIcons from './customize-toolbar-icons';
 import CustomizeToolbarSelect from './customize-toolbarselect';
 import DataAsObjects from './data-as-objects';
 import DraggableColumns from './draggable-columns';
@@ -35,6 +34,7 @@ import CustomComponents from './custom-components';
 import InfiniteScrolling from './infinite-scrolling';
 import Themes from './themes';
 import LargeDataSet from './large-data-set';
+import ToolbarPosition from './toolbar-position';
 
 /**
  * Here you can add any extra examples with the Card label as the key, and the component to render as the value
@@ -56,7 +56,6 @@ export default {
   'Customize Sorting': CustomizeSorting,
   'Customize Styling': CustomizeStyling,
   'Customize Toolbar': CustomizeToolbar,
-  'Customize Toolbar Icons': CustomizeToolbarIcons,
   'Customize Toolbar Select': CustomizeToolbarSelect,
   'Data As Objects': DataAsObjects,
   'Draggable Columns': DraggableColumns,
@@ -77,4 +76,5 @@ export default {
   'Text Localization': TextLocalization,
   'Custom Components': CustomComponents,
   Themes: Themes,
+  'Toolbar Position': ToolbarPosition,
 };

examples/toolbar-position/index.js

@@ -0,0 +1,60 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import MUIDataTable from "../../src/";
+
+class Example extends React.Component {
+
+  render() {
+
+    const columns = ["Name", "Title", "Location", "Age", "Salary"];
+
+    let data = [
+      ["Gabby George", "Business Analyst", "Minneapolis", 30, 238500],
+      ["Aiden Lloyd", "Business Consultant", "Dallas",  55, 200000],
+      ["Jaden Collins", "Attorney", "Santa Ana", 27, 500000],
+      ["Franky Rees", "Business Analyst", "St. Petersburg", 22, 50000],
+      ["Aaren Rose", "Business Consultant", "Toledo", 28, 75000],
+      ["Blake Duncan", "Business Management Analyst", "San Diego", 65, 94000],
+      ["Frankie Parry", "Agency Legal Counsel", "Jacksonville", 71, 210000],
+      ["Lane Wilson", "Commercial Specialist", "Omaha", 19, 65000],
+      ["Robin Duncan", "Business Analyst", "Los Angeles", 20, 77000],
+      ["Mel Brooks", "Business Consultant", "Oklahoma City", 37, 135000],
+      ["Harper White", "Attorney", "Pittsburgh", 52, 420000],
+      ["Kris Humphrey", "Agency Legal Counsel", "Laredo", 30, 150000],
+      ["Frankie Long", "Industrial Analyst", "Austin", 31, 170000],
+      ["Brynn Robbins", "Business Analyst", "Norfolk", 22, 90000],
+      ["Justice Mann", "Business Consultant", "Chicago", 24, 133000],
+      ["Addison Navarro", "Business Management Analyst", "New York", 50, 295000],
+      ["Jesse Welch", "Agency Legal Counsel", "Seattle", 28, 200000],
+      ["Eli Mejia", "Commercial Specialist", "Long Beach", 65, 400000],
+      ["Gene Leblanc", "Industrial Analyst", "Hartford", 34, 110000],
+      ["Danny Leon", "Computer Scientist", "Newark", 60, 220000],
+      ["Lane Lee", "Corporate Counselor", "Cincinnati", 52, 180000],
+      ["Jesse Hall", "Business Analyst", "Baltimore", 44, 99000],
+      ["Danni Hudson", "Agency Legal Counsel", "Tampa", 37, 90000],
+      ["Terry Macdonald", "Commercial Specialist", "Miami", 39, 140000],
+      ["Justice Mccarthy", "Attorney", "Tucson", 26, 330000],
+      ["Silver Carey", "Computer Scientist", "Memphis", 47, 250000],
+      ["Franky Miles", "Industrial Analyst", "Buffalo", 49, 190000],
+      ["Glen Nixon", "Corporate Counselor", "Arlington", 44, 80000],
+      ["Gabby Strickland", "Business Process Consultant", "Scottsdale", 26, 45000],
+      ["Mason Ray", "Computer Scientist", "San Francisco", 39, 238500]
+    ];
+
+    const options = {
+      filter: true,
+      selectableRows: 'multiple',
+      filterType: 'dropdown',
+      responsive: 'vertical',
+      rowsPerPage: 10,
+      toolbarPosition: 'bottom' // Ubica la barra de herramientas al mismo nivel que TablePagination
+    };
+
+    return (
+      <MUIDataTable title={"ACME Employee list"} data={data} columns={columns} options={options} />
+    );
+
+  }
+}
+
+export default Example;

src/MUIDataTable.js

@@ -1,7 +1,6 @@
 import Paper from '@material-ui/core/Paper';
-import MuiTable from '@material-ui/core/Table';
-import MuiTooltip from '@material-ui/core/Tooltip';
 import { withStyles } from '@material-ui/core/styles';
+import MuiTable from '@material-ui/core/Table';
 import clsx from 'clsx';
 import assignwith from 'lodash.assignwith';
 import cloneDeep from 'lodash.clonedeep';
@@ -19,6 +18,7 @@ import DefaultTableHead from './components/TableHead';
 import DefaultTableResize from './components/TableResize';
 import DefaultTableToolbar from './components/TableToolbar';
 import DefaultTableToolbarSelect from './components/TableToolbarSelect';
+import MuiTooltip from '@material-ui/core/Tooltip';
 import getTextLabels from './textLabels';
 import { buildMap, getCollatorComparator, getPageValue, sortCompare, warnDeprecated, warnInfo } from './utils';
 import { DndProvider } from 'react-dnd';
@@ -122,7 +122,7 @@ class MUIDataTable extends React.Component {
           label: PropTypes.string,
           name: PropTypes.string.isRequired,
           options: PropTypes.shape({
-            display: PropTypes.oneOf(['true', 'false', 'excluded', 'always', true, false]),
+            display: PropTypes.oneOf(['true', 'false', 'excluded', 'always']),
             empty: PropTypes.bool,
             filter: PropTypes.bool,
             sort: PropTypes.bool,
@@ -155,6 +155,7 @@ class MUIDataTable extends React.Component {
             setCellHeaderProps: PropTypes.func,
             sortThirdClickReset: PropTypes.bool,
             sortDescFirst: PropTypes.bool,
+            toolbarPosition: PropTypes.string,
           }),
         }),
       ]),
@@ -233,7 +234,6 @@ class MUIDataTable extends React.Component {
       rowsSelected: PropTypes.array,
       search: PropTypes.oneOf([true, false, 'true', 'false', 'disabled']),
       searchOpen: PropTypes.bool,
-      searchAlwaysOpen: PropTypes.bool,
       searchPlaceholder: PropTypes.string,
       searchText: PropTypes.string,
       setFilterChipProps: PropTypes.func,
@@ -267,7 +267,6 @@ class MUIDataTable extends React.Component {
       TableToolbar: DefaultTableToolbar,
       TableToolbarSelect: DefaultTableToolbarSelect,
       Tooltip: MuiTooltip,
-      icons: {},
     },
   };
 
@@ -362,8 +361,8 @@ class MUIDataTable extends React.Component {
       props.options.selectToolbarPlacement = STP.NONE;
     }
 
-    // provide default tableId when no tableId has been passed as prop
-    if (!props.options.tableId) {
+    // provide default tableId when draggableColumns is enabled and no tableId has been passed as prop
+    if (props.options.draggableColumns && props.options.draggableColumns.enabled === true && !props.options.tableId) {
       props.options.tableId = (Math.random() + '').replace(/\./, '');
     }
 
@@ -422,6 +421,7 @@ class MUIDataTable extends React.Component {
     textLabels: getTextLabels(),
     viewColumns: true,
     selectToolbarPlacement: STP.REPLACE,
+    toolbarPosition: 'top'
   });
 
   warnDep = (msg, consoleWarnings) => {
@@ -1935,7 +1935,7 @@ class MUIDataTable extends React.Component {
         )}
         {(selectedRows.data.length === 0 ||
           [STP.ABOVE, STP.NONE].indexOf(this.options.selectToolbarPlacement) !== -1) &&
-          showToolbar && (
+          showToolbar && this.options.toolbarPosition != 'bottom' && (
             <TableToolbarComponent
               columns={columns}
               columnOrder={columnOrder}
@@ -2068,6 +2068,27 @@ class MUIDataTable extends React.Component {
           rowsPerPage={rowsPerPage}
           changeRowsPerPage={this.changeRowsPerPage}
           changePage={this.changePage}
+          toolbar={ this.options.toolbarPosition == 'bottom' && <TableToolbarComponent
+              columns={columns}
+              columnOrder={columnOrder}
+              displayData={displayData}
+              data={data}
+              filterData={filterData}
+              filterList={filterList}
+              filterUpdate={this.filterUpdate}
+              updateFilterByType={this.updateFilterByType}
+              options={this.options}
+              resetFilters={this.resetFilters}
+              searchText={searchText}
+              searchTextUpdate={this.searchTextUpdate}
+              searchClose={this.searchClose}
+              tableRef={this.getTableContentRef}
+              toggleViewColumn={this.toggleViewColumn}
+              updateColumns={this.updateColumns}
+              setTableAction={this.setTableAction}
+              components={this.props.components}
+              bottom
+            /> }
         />
         <div className={classes.liveAnnounce} aria-live={'polite'}>
           {announceText}

src/components/TableFooter.js

@@ -15,7 +15,7 @@ const useStyles = makeStyles(
   { name: 'MUIDataTableFooter' },
 );
 
-const TableFooter = ({ options, rowCount, page, rowsPerPage, changeRowsPerPage, changePage }) => {
+const TableFooter = ({ options, rowCount, page, rowsPerPage, changeRowsPerPage, changePage, toolbar }) => {
   const classes = useStyles();
   const { customFooter, pagination = true } = options;
 
@@ -45,6 +45,7 @@ const TableFooter = ({ options, rowCount, page, rowsPerPage, changeRowsPerPage,
           changePage={changePage}
           component={'div'}
           options={options}
+          toolbar={toolbar}
         />
       </MuiTable>
     );

src/components/TablePagination.js

@@ -45,12 +45,15 @@ function TablePagination(props) {
     props.changePage(page);
   };
 
-  const { count, options, rowsPerPage, page } = props;
+  const { count, options, rowsPerPage, page, toolbar } = props;
   const textLabels = options.textLabels.pagination;
 
   return (
     <MuiTableFooter>
       <MuiTableRow>
+        {toolbar && <MuiTableCell colSpan="1000" className={classes.tableCellContainer}>
+          {toolbar}
+        </MuiTableCell>}
         <MuiTableCell colSpan="1000" className={classes.tableCellContainer}>
           <div className={classes.navContainer}>
             {options.jumpToPage ? (