tweaks for new responsive update

gregnb · Jun 6, 2020 · 4f957e9 · 4f957e9
1 parent 1498ba3
commit 4f957e9
Show file tree

Hide file tree

Showing 36 changed files with 89 additions and 79 deletions.
diff --git a/examples/array-value-columns/index.js b/examples/array-value-columns/index.js
@@ -94,7 +94,7 @@ class Example extends React.Component {
     const options = {
       filter: true,
       filterType: 'dropdown',
-      responsive: 'scrollMaxHeight',
+      responsive: 'standard',
     };
 
     return (

diff --git a/examples/column-filters/index.js b/examples/column-filters/index.js
@@ -94,7 +94,7 @@ class Example extends React.Component {
       },
       selectableRows: 'multiple',
       filterType: 'dropdown',
-      responsive: 'stacked',
+      responsive: 'vertical',
       rowsPerPage: 10,
       page: 1,
     };

diff --git a/examples/column-options-update/index.js b/examples/column-options-update/index.js
@@ -125,7 +125,7 @@ class Example extends React.Component {
       },
       selectableRows: 'multiple',
       filterType: 'dropdown',
-      responsive: 'stacked',
+      responsive: 'vertical',
       rowsPerPage: 10,
       page: 1,
     };

diff --git a/examples/component/index.js b/examples/component/index.js
@@ -126,7 +126,7 @@ class Example extends React.Component {
     const options = {
       filter: true,
       filterType: 'dropdown',
-      responsive: 'scrollMaxHeight'
+      responsive: 'standard'
     };
 
     return (

diff --git a/examples/csv-export/index.js b/examples/csv-export/index.js
@@ -69,7 +69,7 @@ class Example extends React.Component {
       filter: true,
       selectableRows: 'multiple',
       filterType: 'dropdown',
-      responsive: 'stacked',
+      responsive: 'vertical',
       rowsPerPage: 10,
       downloadOptions: {
           filename: 'excel-format.csv',

diff --git a/examples/custom-action-columns/index.js b/examples/custom-action-columns/index.js
@@ -167,7 +167,7 @@ class Example extends React.Component {
     const options = {
       filter: true,
       filterType: 'dropdown',
-      responsive: 'stacked',
+      responsive: 'vertical',
       page: 2,
       onColumnSortChange: (changedColumn, direction) => console.log('changedColumn: ', changedColumn, 'direction: ', direction),
       onChangeRowsPerPage: numberOfRows => console.log('numberOfRows: ', numberOfRows),

diff --git a/examples/customize-columns/index.js b/examples/customize-columns/index.js
@@ -85,7 +85,7 @@ class Example extends React.Component {
     const options = {
       filter: true,
       filterType: 'dropdown',
-      responsive: 'stacked',
+      responsive: 'vertical',
     };
 
     return (

diff --git a/examples/customize-filter/index.js b/examples/customize-filter/index.js
@@ -229,7 +229,7 @@ class Example extends React.Component {
     const options = {
       filter: true,
       filterType: 'multiselect',
-      responsive: 'scrollMaxHeight',
+      responsive: 'standard',
     };
 
     return (

diff --git a/examples/customize-footer/index.js b/examples/customize-footer/index.js
@@ -44,7 +44,7 @@ class Example extends React.Component {
     const options = {
       filter: true,
       filterType: 'dropdown',
-      responsive: 'stacked',
+      responsive: 'vertical',
       rowsPerPage: 10,
       customFooter: (count, page, rowsPerPage, changeRowsPerPage, changePage, textLabels) => {
         return (  

diff --git a/examples/customize-rows/index.js b/examples/customize-rows/index.js
@@ -71,7 +71,7 @@ function Example() {
       ]}
       options={{
         selectableRows: "none",
-        responsive: "scrollMaxHeight",
+        responsive: "standard",
         customRowRender: data => {
           const [ name, cardNumber, cvc, expiry ] = data;
 

diff --git a/examples/customize-search-render/index.js b/examples/customize-search-render/index.js
@@ -46,7 +46,7 @@ class Example extends React.Component {
       filter: true,
       selectableRows: 'mulitple',
       filterType: 'dropdown',
-      responsive: 'stacked',
+      responsive: 'vertical',
       rowsPerPage: 10,
       customSearchRender: (searchText, handleSearch, hideSearch, options) => {
         return (

diff --git a/examples/customize-search/index.js b/examples/customize-search/index.js
@@ -80,7 +80,7 @@ class Example extends React.Component {
     const options = {
       filter: true,
       filterType: 'dropdown',
-      responsive: 'stacked',
+      responsive: 'vertical',
       page: 0,
       searchText: this.state.searchText,
       searchProps: {

diff --git a/examples/customize-sorting/index.js b/examples/customize-sorting/index.js
@@ -19,7 +19,7 @@ class Example extends React.Component {
     const options = {
       filter: true,
       filterType: 'dropdown',
-      responsive: 'stacked',
+      responsive: 'vertical',
       customSort: (data, colIndex, order) => {
         return data.sort((a, b) => {
           return (a.data[colIndex].length < b.data[colIndex].length ? -1: 1 ) * (order === 'desc' ? 1 : -1);

diff --git a/examples/customize-styling/index.js b/examples/customize-styling/index.js
@@ -24,7 +24,7 @@ class Example extends React.Component {
     super(props);
     this.state = {
       denseTable: false,
-      stacked: true
+      vertical: true
     };
   }
 
@@ -54,7 +54,7 @@ class Example extends React.Component {
 
   toggleResponsive = (event) => {
     this.setState({
-      stacked: event.target.checked ? true : false
+      vertical: event.target.checked ? true : false
     });
   }
 
@@ -149,7 +149,7 @@ class Example extends React.Component {
     const options = {
       filter: true,
       filterType: 'dropdown',
-      responsive: this.state.stacked ? 'stacked' : 'scrollMaxHeight',
+      responsive: this.state.vertical ? 'vertical' : 'standard',
       fixedHeader: false,
       fixedSelectColumn: false,
       rowHover: false,
@@ -191,13 +191,13 @@ class Example extends React.Component {
           <FormControlLabel
             control={
               <Switch
-                checked={this.state.stacked}
+                checked={this.state.vertical}
                 onChange={this.toggleResponsive}
-                value="stacked"
+                value="vertical"
                 color="primary"
               />
             }
-            label="Stacked Table"
+            label="Responsive Vertical Table"
           />
         </FormGroup>
         <MUIDataTable title={"ACME Employee list"} data={data} columns={columns} options={options} />

diff --git a/examples/customize-toolbar/index.js b/examples/customize-toolbar/index.js
@@ -46,7 +46,7 @@ class Example extends React.Component {
       filter: true,
       selectableRows: 'multiple',
       filterType: 'dropdown',
-      responsive: 'stacked',
+      responsive: 'vertical',
       rowsPerPage: 10,
       customToolbar: () => {
         return (

diff --git a/examples/customize-toolbarselect/index.js b/examples/customize-toolbarselect/index.js
@@ -44,7 +44,7 @@ class Example extends React.Component {
       filter: true,
       selectableRows: 'multiple',
       filterType: "dropdown",
-      responsive: "stacked",
+      responsive: "vertical",
       rowsPerPage: 10,
       customToolbarSelect: (selectedRows, displayData, setSelectedRows) => (
         <CustomToolbarSelect selectedRows={selectedRows} displayData={displayData} setSelectedRows={setSelectedRows} />

diff --git a/examples/data-as-objects/index.js b/examples/data-as-objects/index.js
@@ -77,7 +77,7 @@ class Example extends React.Component {
     const options = {
       filter: true,
       filterType: 'dropdown',
-      responsive: 'stacked',
+      responsive: 'vertical',
       enableNestedDataAccess: '.', // allows nested data separated by "." (see column names and the data structure above)
     };
 

diff --git a/examples/expandable-rows/index.js b/examples/expandable-rows/index.js
@@ -1,4 +1,4 @@
-import React from "react";
+ import React from "react";
 import ReactDOM from "react-dom";
 import MUIDataTable from "../../src/";
 import TableRow from "@material-ui/core/TableRow";
@@ -80,7 +80,7 @@ class Example extends React.Component {
     const options = {
       filter: true,
       filterType: 'dropdown',
-      responsive: 'scrollMaxHeight',
+      responsive: 'standard',
       expandableRows: true,
       expandableRowsHeader: true,
       expandableRowsOnClick: true,

diff --git a/examples/fixed-header/index.js b/examples/fixed-header/index.js
@@ -102,7 +102,7 @@ class Example extends React.Component {
     const options = {
       filter: true,
       filterType: 'dropdown',
-      responsive: 'scrollMaxHeight',
+      responsive: 'standard',
       fixedHeader: true,
       fixedSelectColumn: true
     };

diff --git a/examples/hide-columns-print/index.js b/examples/hide-columns-print/index.js
@@ -81,7 +81,7 @@ class Example extends React.Component {
     const options = {
       filter: true,
       filterType: 'dropdown',
-      responsive: 'scrollMaxHeight',
+      responsive: 'standard',
     };
 
     return (

diff --git a/examples/large-data-set/index.js b/examples/large-data-set/index.js
@@ -121,7 +121,7 @@ class Example extends React.Component {
       rowsPerPageOptions: [10, 100, 250, 500, 1000],
       filter: true,
       filterType: 'dropdown',
-      responsive: 'scrollMaxHeight',
+      responsive: 'standard',
       customSearchRender: debounceSearchRender(500),
     };
 

diff --git a/examples/on-download/index.js b/examples/on-download/index.js
@@ -103,7 +103,7 @@ class Example extends React.Component {
     const options = {
       filter: true,
       filterType: 'dropdown',
-      responsive: 'scrollMaxHeight',
+      responsive: 'standard',
       onDownload: (buildHead, buildBody, columns, data) =>
         buildHead(headerNames) +
         buildBody(

diff --git a/examples/on-table-init/index.js b/examples/on-table-init/index.js
@@ -67,7 +67,7 @@ class Example extends React.Component {
     filter: true,
     selectableRows: 'multiple',
     filterType: 'dropdown',
-    responsive: 'scrollMaxHeight',
+    responsive: 'standard',
     rowsPerPage: 10,
     download: false, // hide csv download option
     onTableInit: this.handleTableInit,

diff --git a/examples/selectable-rows/index.js b/examples/selectable-rows/index.js
@@ -70,7 +70,7 @@ class Example extends React.Component {
       selectableRowsOnClick: true,
       selectableRowsHideCheckboxes: this.state.selectableRowsHideCheckboxes,
       filterType: 'dropdown',
-      responsive: 'stacked',
+      responsive: 'vertical',
       rowsPerPage: 10,
       rowsSelected: this.state.rowsSelected,
       onRowsSelect: (rowsSelected, allRows) => {

diff --git a/examples/serverside-filters/index.js b/examples/serverside-filters/index.js
@@ -156,7 +156,7 @@ class Example extends React.Component {
       filter: true,
       serverSideFilterList: this.state.serverSideFilterList,
       filterType: 'dropdown',
-      responsive: 'scrollMaxHeight',
+      responsive: 'standard',
       serverSide: true,
       onFilterDialogOpen: () => {
         console.log('filter dialog opened');

diff --git a/examples/serverside-options/index.js b/examples/serverside-options/index.js
@@ -45,7 +45,7 @@ class Example extends React.Component {
       filter: true,
       selectableRows: 'multiple',
       filterType: 'dropdown',
-      responsive: 'stacked',
+      responsive: 'vertical',
       rowsPerPage: 10,
       page: 1,
       rowsSelected: [2, 5],

diff --git a/examples/serverside-pagination/index.js b/examples/serverside-pagination/index.js
@@ -73,7 +73,7 @@ class Example extends React.Component {
     const options = {
       filter: true,
       filterType: 'dropdown',
-      responsive: 'stacked',
+      responsive: 'vertical',
       serverSide: true,
       count: count,
       page: page,

diff --git a/examples/serverside-sorting/index.js b/examples/serverside-sorting/index.js
@@ -178,7 +178,7 @@ class Example extends React.Component {
     const options = {
       filter: true,
       filterType: 'dropdown',
-      responsive: 'scrollMaxHeight',
+      responsive: 'standard',
       serverSide: true,
       count: count,
       page: page,

diff --git a/examples/simple-no-toolbar/index.js b/examples/simple-no-toolbar/index.js
@@ -21,7 +21,7 @@ class Example extends React.Component {
       download: false,
       viewColumns: false,
       customToolbar: null,
-      responsive: 'stacked'
+      responsive: 'vertical'
     };
 
     return (

diff --git a/examples/text-localization/index.js b/examples/text-localization/index.js
@@ -44,7 +44,7 @@ class Example extends React.Component {
     const options = {
       filter: true,
       filterType: 'dropdown',
-      responsive: 'stacked',
+      responsive: 'vertical',
       textLabels: {
         body: {
           noMatch: "Sorry we could not find any records!",

diff --git a/examples/themes/index.js b/examples/themes/index.js
@@ -76,7 +76,7 @@ class Example extends React.Component {
             filter: true,
             selectableRows: 'multiple',
             filterType: 'dropdown',
-            responsive: 'stacked',
+            responsive: 'vertical',
             rowsPerPage: 10,
             page: 1,
         };

diff --git a/package-lock.json b/package-lock.json