Merge 2f087d2 into b8eec4c

README.md

@@ -219,6 +219,7 @@ The component accepts the following props:
 |**`onTableInit`**|function||Callback function that triggers when table state has been initialized. `function(action: string, tableState: object) => void`
 |**`setRowProps`**|function||Is called for each row and allows you to return custom props for this row based on its data. `function(row: array, dataIndex: number) => object` [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/customize-styling/index.js)
 |**`setTableProps`**|function||Is called for the table and allows you to return custom props for the table based on its data. `function() => object` [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/customize-styling/index.js)
+|**`sortOrder`**|object|{}|Sets the column to sort by and its sort direction. To remove/reset sorting, input in an empty object. The object options are the column name and the direction: `name: string, direction: enum('asc', 'desc')` [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/customize-columns/index.js)
 
 ## Customize Columns
 
@@ -259,11 +260,10 @@ const columns = [
 |**`filterType `**|string|'dropdown'|Choice of filtering view. Takes priority over global filterType option.`enum('checkbox', 'dropdown', 'multiselect', 'textField', 'custom')` Use 'custom' if you are supplying your own rendering via `filterOptions`.
 |**`sort`**|boolean|true|Enable/disable sorting on column
 |**`searchable`**|boolean|true|Exclude/include column from search results
-|**`sortDirection`**|string||Set default sort order `enum('asc', 'desc', 'none')` **(`null` option has been deprecated, use 'none' instead)**
 |**`print`**|boolean|true|Display column when printing
 |**`download`**|boolean|true|Display column in CSV download file
 |**`hint`**|string||Display hint icon with string as tooltip on hover.
-|**`customHeadRender`**|function||Function that returns a string or React component. Used as display for column header. `function(columnMeta, handleToggleColumn) => string`|` React Component`
+|**`customHeadRender`**|function||Function that returns a string or React component. Used as display for column header. `function(columnMeta, handleToggleColumn, sortOrder) => string`|` React Component`
 |**`customBodyRender`**|function||Function that returns a string or React component. Used as display data within all table cells of a given column. `function(value, tableMeta, updateValue) => string`|` React Component` [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/component/index.js)
 |**`setCellProps`**|function||Is called for each cell and allows to you return custom props for this cell based on its data. `function(cellValue: string, rowIndex: number, columnIndex: number) => object` [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/customize-styling/index.js)
 |**`setCellHeaderProps`**|function||Is called for each header cell and allows you to return custom props for the header cell based on its data. `function(columnMeta: object) => object` [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/customize-styling/index.js)
@@ -276,7 +276,6 @@ function(columnMeta: {
   display: enum('true', 'false', 'excluded'),
   filter: boolean,
   sort: boolean,
-  sortDirection: boolean,
   download: boolean,
   empty: boolean,
   index: number,

examples/customize-columns/index.js

@@ -19,7 +19,6 @@ class Example extends React.Component {
         name: "Title",
         options: {
           filter: true,
-          sortDirection: 'asc'
         }
       },
       {
@@ -86,6 +85,10 @@ class Example extends React.Component {
       filter: true,
       filterType: 'dropdown',
       responsive: 'stacked',
+      sortOrder: {
+        name: 'Title',
+        direction: 'asc'
+      }
     };
 
     return (

examples/serverside-pagination/index.js

@@ -8,57 +8,140 @@ class Example extends React.Component {
   state = {
     page: 0,
     count: 1,
+    rowsPerPage: 5,
+    sortOrder: {},
     data: [["Loading Data..."]],
+    columns: [
+      {
+        name: "fullName",
+        label: "Full Name",
+        options: {
+          customBodyRender: (value, tableMeta, updateValue) => {
+
+            // Here you can render a more complex display.
+            // You're given access to tableMeta, which has
+            // the rowData (as well as the original object data).
+            // See the console for a detailed look at this object.
+
+            console.log('customBodyRender');
+            console.dir(tableMeta);
+            return value;
+          }
+        },
+      },
+      {
+        name: "title",
+        label: "Title",
+        options: {},
+      },
+      {
+        name: "location",
+        label: "Location",
+        options: {},
+      },
+    ],
     isLoading: false
   };
 
   componentDidMount() {
-    this.getData();
+    this.getData("", 0);
   }
 
   // get data
-  getData = () => {
+  getData = (url, page) => {
     this.setState({ isLoading: true });
-    this.xhrRequest().then(res => {
+    this.xhrRequest(url, page).then(res => {
       this.setState({ data: res.data, isLoading: false, count: res.total });
     });
   }
 
+  getSrcData = () => {
+    return [
+      {fullName: "Gabby George", title: "Business Analyst", location: "Minneapolis"},
+      {fullName: "Aiden Lloyd", title: "Business Consultant", location: "Dallas"},
+      {fullName: "Jaden Collins", title: "Attorney", location: "Santa Ana"},
+      {fullName: "Franky Rees", title: "Business Analyst", location: "St. Petersburg"},
+      {fullName: "Aaren Rose", title: "Business Analyst", location: "Toledo"},
+
+      {fullName: "John George", title: "Business Analyst", location: "Washington DC"},
+      {fullName: "Pat Lloyd", title: "Computer Programmer", location: "Baltimore"},
+      {fullName: "Joe Joe Collins", title: "Attorney", location: "Las Cruces"},
+      {fullName: "Franky Hershy", title: "Paper Boy", location: "El Paso"},
+      {fullName: "Aaren Smalls", title: "Business Analyst", location: "Tokyo"},
+
+      {fullName: "Boogie G", title: "Police Officer", location: "Unknown"},
+      {fullName: "James Roulf", title: "Business Consultant", location: "Video Game Land"},
+      {fullName: "Mike Moocow", title: "Burger King Employee", location: "New York"},
+      {fullName: "Mimi Gerock", title: "Business Analyst", location: "McCloud"},
+      {fullName: "Jason Evans", title: "Business Analyst", location: "Mt Shasta"},
+
+      {fullName: "Simple Sam", title: "Business Analyst", location: "Mt Shasta"},
+      {fullName: "Marky Mark", title: "Business Consultant", location: "Las Cruces"},
+      {fullName: "Jaden Jam", title: "Attorney", location: "El Paso"},
+      {fullName: "Holly Jo", title: "Business Analyst", location: "St. Petersburg"},
+      {fullName: "Suzie Q", title: "Business Analyst", location: "New York"},
+    ];
+  }
+
+  sort = (page, sortOrder) => {
+
+    this.setState({ isLoading: true });
+    this.xhrRequest("", page, sortOrder).then(res => {
+      this.setState({ 
+        data: res.data, 
+        page: res.page, 
+        sortOrder,
+        isLoading: false, 
+        count: res.total,
+      });
+    });
+  }
+
   // mock async function
-  xhrRequest = () => {
+  xhrRequest = (url, page, sortOrder = {}) => {
 
     return new Promise((resolve, reject) => {
-      const total = 124;  // mock record count from server
       // mock page data
-      const srcData = [
-        ["Gabby George", "Business Analyst", "Minneapolis"],
-        ["Aiden Lloyd", "Business Consultant", "Dallas"],
-        ["Jaden Collins", "Attorney", "Santa Ana"],
-        ["Franky Rees", "Business Analyst", "St. Petersburg"],
-        ["Aaren Rose", "Business Analyst", "Toledo"]
-      ];
-      const maxRound =  Math.floor(Math.random() * 2) + 1;
-      const data = [...Array(maxRound)].reduce(acc => acc.push(...srcData) && acc, []);
-      data.sort((a, b) => 0.5 - Math.random());
+      let fullData = this.getSrcData();
+      const total = fullData.length;  // mock record count from server - normally this would be a number attached to the return data
+
+      let sortField = sortOrder.name;
+      let sortDir = sortOrder.direction;
+
+      if (sortField) {
+        fullData = fullData.sort((a, b) => {
+          if (a[sortField] < b[sortField]) {
+            return  1 * (sortDir === 'asc' ? -1 : 1);
+          } else if (a[sortField] > b[sortField]) {
+            return -1 * (sortDir === 'asc' ? -1 : 1);
+          } else {
+            return 0;
+          }
+        });
+      }
+
+      const srcData = fullData.slice(page * this.state.rowsPerPage, (page+1) * this.state.rowsPerPage);
+      let data = srcData;
 
       setTimeout(() => {
         resolve({
-          data, total
+          data, total, page
         });
-      }, 2500);
+      }, 500);
 
     });
 
   }
 
-  changePage = (page) => {
+  changePage = (page, sortOrder) => {
     this.setState({
       isLoading: true,
     });
-    this.xhrRequest(`/myApiServer?page=${page}`).then(res => {
+    this.xhrRequest(`/myApiServer?page=${page}`, page, sortOrder).then(res => {
       this.setState({
         isLoading: false,
-        page: page,
+        page: res.page,
+        sortOrder,
         data: res.data,
         count: res.total,
       });
@@ -67,40 +150,51 @@ class Example extends React.Component {
 
   render() {
 
-    const columns = ["Name", "Title", "Location"];
-    const { data, page, count, isLoading } = this.state;
+    const { data, page, count, isLoading, rowsPerPage, sortOrder } = this.state;
 
     const options = {
       filter: true,
       filterType: 'dropdown',
-      responsive: 'stacked',
+      responsive: 'scrollMaxHeight',
       serverSide: true,
       count: count,
-      page: page,
+      rowsPerPage: rowsPerPage,
+      rowsPerPageOptions: [],
+      sortOrder: sortOrder,
       onTableChange: (action, tableState) => {
 
         console.log(action, tableState);
+
         // a developer could react to change on an action basis or
         // examine the state as a whole and do whatever they want
 
         switch (action) {
           case 'changePage':
-            this.changePage(tableState.page);
+            this.changePage(tableState.page, tableState.sortOrder);
             break;
+          case 'sort':
+            this.sort(tableState.page, tableState.sortOrder);
+            break;
+          default:
+            console.log('action not handled.');
         }
       }
     };
+
+    console.log('COLUMNS');
+    console.dir( JSON.parse(JSON.stringify(this.state.columns)) );
+
     return (
       <div>
-        <MUIDataTable title={<Typography variant="title">
+        <MUIDataTable title={<Typography variant="h6">
           ACME Employee list
           {isLoading && <CircularProgress size={24} style={{marginLeft: 15, position: 'relative', top: 4}} />}
           </Typography>
-          } data={data} columns={columns} options={options} />
+          } data={data} columns={this.state.columns} options={options} />
       </div>
     );
 
   }
 }
 
-export default Example;
+export default Example;