created a better dataset for example demo. updated README

gregnb · Dec 23, 2017 · edf4ce1 · edf4ce1
1 parent f6ba65e
commit edf4ce1
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 61 deletions.
diff --git a/README.md b/README.md
@@ -11,6 +11,10 @@
 
 MUI-Datatables is a data tables component built on [Material-UI V1](https://www.material-ui-next.com).  It comes with features like filtering, view/hide columns, search, export to CSV download, printing, pagination, and sorting. On top of the ability to customize styling on most views, there is a responsive data stacking mode for mobile/tablet devices.
 
+<div align="center">
+	<img src="https://user-images.githubusercontent.com/19170080/34319732-406ab3e6-e7b7-11e7-97b6-eefc330f8cf7.gif" />
+</div>
+
 ## Install
 
 `npm install mui-datatables --save-dev `

diff --git a/example/index.js b/example/index.js
@@ -4,53 +4,41 @@ import MUIDataTable from "../src/";
 
 class Example extends React.Component {
 
-  state = {
-    timer: 1
-  };
-
-  componentDidMount() {
-
-    // setTimeout(() => {
-    //   this.setState({ timer: this.state.timer + 1 });
-    // }, 10000);
-
-    // setTimeout(() => {
-    //   this.setState({ timer: this.state.timer + 1 });
-    // }, 20000);
-
-    // setTimeout(() => {
-    //   this.setState({ timer: this.state.timer + 1 });
-    // }, 30000);
-
-  }
-
   render() {
 
-    const columns = ["First Name", "Company", "City", "State"];
+    const columns = ["Name", "Title", "Location", "Age", "Salary"];
 
     const data = [
-     ["really long title to test", "row1-data2", "row1-data3", "row1-data4"],
-     ["b", "row2-data2", "row2-data3", "row2-data4"],
-     ["c", "row2-data2", "wwd-data3", "row2-data4"],
-     ["d", "row2-w", "row2-data3", "row2-data4"],
-     ["e", "row2-data2", "row2-w", "row2-data4"],
-     ["really long title to test f", "w-data2", "row2-data3", "row2-data4"],
-     ["g", "row2-data2", "wwd-data3", "row2-data4"],
-     ["h", "row2-w", "row2-data3", "row2-data4"],
-     ["i", "row2-data2", "row2-w", "row2-data4"],
-     ["j", "w-data2", "row2-data3", "row2-data4"],
-     ["k", "row2-data2", "wwd-data3", "row2-data4"],
-     ["really long title to test l", "row2-w", "row2-data3", "row2-data4"],
-     ["m", "row2-data2", "row2-w", "row2-data4"],
-     ["n", "w-data2", "row2-data3", "row2-data4"],
-     ["o", "row2-data2", "wwd-data3", "row2-data4"],
-     ["p", "row2-w", "row2-data3", "row2-data4"],
-     ["q", "row2-data2", "row2-w", "row2-data4"],
-     ["r", "w-data2", "row2-data3", "really long title to test row2-data4"],
-     ["s", "row2-data2", "wwd-data3", "row2-data4"],
-     ["t", "row2-w", "row2-data3 really long title to test", "row2-data4"],
-     ["u", "row2-data2", "row2-w", "row2-data4"],
-     ["v", "w-data2", "row2-data3", "row2-data4"]
+      ["Gabby George", "Business Analyst", "Minneapolis", 30, "$100,000"],
+      ["Aiden Lloyd", "Business Consultant", "Dallas",  55, "$200,000"],
+      ["Jaden Collins", "Attorney", "Santa Ana", 27, "$500,000"],
+      ["Franky Rees", "Business Analyst", "St. Petersburg", 22, "$50,000"],
+      ["Aaren Rose", "Business Consultant", "Toledo", 28, "$75,000"],
+      ["Blake Duncan", "Business Management Analyst", "San Diego", 65, "$94,000"],
+      ["Frankie Parry", "Agency Legal Counsel", "Jacksonville", 71, "$210,000"],
+      ["Lane Wilson", "Commercial Specialist", "Omaha", 19, "$65,000"],
+      ["Robin Duncan", "Business Analyst", "Los Angeles", 20, "$77,000"],
+      ["Mel Brooks", "Business Consultant", "Oklahoma City", 37, "$135,000"],
+      ["Harper White", "Attorney", "Pittsburgh", 52, "$420,000"],
+      ["Kris Humphrey", "Agency Legal Counsel", "Laredo", 30, "$150,000"],
+      ["Frankie Long", "Industrial Analyst", "Austin", 31, "$170,000"],
+      ["Brynn Robbins", "Business Analyst", "Norfolk", 22, "$90,000"],
+      ["Justice Mann", "Business Consultant", "Chicago", 24, "$133,000"],
+      ["Addison Navarro", "Business Management Analyst", "New York", 50, "$295,000"],
+      ["Jesse Welch", "Agency Legal Counsel", "Seattle", 28, "$200,000"],
+      ["Eli Mejia", "Commercial Specialist", "Long Beach", 65, "$400,000"],
+      ["Gene Leblanc", "Industrial Analyst", "Hartford", 34, "$110,000"],
+      ["Danny Leon", "Computer Scientist", "Newark", 60, "$220,000"],
+      ["Lane Lee", "Corporate Counselor", "Cincinnati", 52, "$180,000"],
+      ["Jesse Hall", "Business Analyst", "Baltimore", 44, "$99,000"],
+      ["Danni Hudson", "Agency Legal Counsel", "Tampa", 37, "$90,000"],
+      ["Terry Macdonald", "Commercial Specialist", "Miami", 39, "$140,000"],
+      ["Justice Mccarthy", "Attorney", "Tucson", 26, "$330,000"],
+      ["Silver Carey", "Computer Scientist", "Memphis", 47, "$250,000" ],
+      ["Franky Miles", "Industrial Analyst", "Buffalo", 49, "$190,000"],
+      ["Glen Nixon", "Corporate Counselor", "Arlington", 44, "$80,000"],
+      ["Gabby Strickland", "Business Process Consultant", "Scottsdale", 26, "$45,000"],
+      ["Mason Ray", "Computer Scientist", "San Francisco", 39, "$142,000"]
     ];
 
     // options: PropTypes.shape({
@@ -68,7 +56,7 @@ class Example extends React.Component {
 
     const options = {
       filter: true,
-      filterType: 'checkbox',
+      filterType: 'dropdown',
       responsive: 'stacked',
       styles: {
         table: {
@@ -165,12 +153,10 @@ class Example extends React.Component {
     };
 
     return (
-      <MUIDataTable data={data} columns={columns} timer={this.state.timer} options={options} />
+      <MUIDataTable title={"ACME Employee list"} data={data} columns={columns} options={options} />
     );
 
   }
 }
 
-export default Example;
-
 ReactDOM.render(<Example />, document.getElementById("app-root"));
diff --git a/src/DataStyles.js b/src/DataStyles.js
@@ -56,8 +56,6 @@ class DataStyles extends React.Component {
   buildComponent(props) {
     const defaultStyles = props.defaultStyles ? props.defaultStyles : {};
     const finalStyles = merge(defaultStyles, props.styles);
-    console.log("fin styles");
-    console.log(finalStyles);
 
     // just a pass-through
     this.component = withStyles(finalStyles)(stylePass(props.name, this.setStyleClass));

diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js
@@ -21,6 +21,8 @@ const defaultTableStyles = {
 
 class MUIDataTable extends React.Component {
   static propTypes = {
+    /** Title of the table */
+    title: PropTypes.string.isRequired,
     /** Data used to describe table */
     data: PropTypes.array.isRequired,
     /** Columns used to describe table */
@@ -184,7 +186,7 @@ class MUIDataTable extends React.Component {
       isSearchFound = false;
 
     for (let index = 0; index < row.length; index++) {
-      const column = row[index];
+      const column = typeof row[index] !== "string" ? row[index].toString() : row[index];
 
       if (filterList[index].length && filterList[index].indexOf(column) < 0) {
         isFiltered = true;
@@ -289,8 +291,8 @@ class MUIDataTable extends React.Component {
     return (colOne, colTwo) => {
       let comparison = 0;
 
-      const dataOne = colOne.data.toLowerCase();
-      const dataTwo = colTwo.data.toLowerCase();
+      const dataOne = typeof colOne.data === "string" ? colOne.data.toLowerCase() : colOne.data;
+      const dataTwo = typeof colTwo.data === "string" ? colTwo.data.toLowerCase() : colTwo.data;
 
       if (dataOne > dataTwo) {
         comparison = 1;
@@ -315,7 +317,7 @@ class MUIDataTable extends React.Component {
   }
 
   render() {
-    const { className, classes } = this.props;
+    const { className, classes, title } = this.props;
     const { data, displayData, columns, page, filterData, filterList, searchText } = this.state;
 
     const rowsPerPage = this.state.rowsPerPage ? this.state.rowsPerPage : this.options.rowsPerPage;
@@ -328,15 +330,16 @@ class MUIDataTable extends React.Component {
             ref={el => (this.tableContent = el)}
             className={this.options.responsive === "scroll" ? tableStyles.responsiveScroll : null}>
             <MUIDataTableToolbar
-              data={data}
               columns={columns}
-              options={this.options}
-              tableRef={() => this.tableRef}
-              filterUpdate={this.filterUpdate}
-              resetFilters={this.resetFilters}
+              data={data}
               filterData={filterData}
               filterList={filterList}
+              filterUpdate={this.filterUpdate}
+              options={this.options}
+              resetFilters={this.resetFilters}
               searchTextUpdate={this.searchTextUpdate}
+              tableRef={() => this.tableRef}
+              title={title}
               toggleViewColumn={this.toggleViewColumn}
             />
             <MUIDataTableFilterList options={this.options} filterList={filterList} filterUpdate={this.filterUpdate} />

diff --git a/src/MUIDataTableToolbar.js b/src/MUIDataTableToolbar.js
@@ -281,6 +281,7 @@ class MUIDataTableToolbar extends React.Component {
       resetFilters,
       searchTextUpdate,
       toggleViewColumn,
+      title,
     } = this.props;
 
     const { showSearch } = this.state;
@@ -298,7 +299,7 @@ class MUIDataTableToolbar extends React.Component {
               ) : (
                 <div className={toolbarStyles.titleRoot}>
                   <Typography type="title" className={toolbarStyles.titleText}>
-                    Title goes here and it should be really really long
+                    {title}
                   </Typography>
                 </div>
               )}
@@ -308,7 +309,6 @@ class MUIDataTableToolbar extends React.Component {
                 <IconButton
                   aria-label="Search"
                   buttonRef={el => (this.searchButton = el)}
-                  classes={{ root: toolbarStyles.icon }}
                   classes={{ root: this.getActiveIcon(toolbarStyles, "search") }}
                   onClick={this.setActiveIcon.bind(null, "search")}>
                   <SearchIcon />
@@ -367,7 +367,7 @@ class MUIDataTableToolbar extends React.Component {
                       <Tooltip title="Filter Table">
                         <IconButton
                           aria-label="Filter Table"
-                          classes={{ root: this.getActiveIcon("filter") }}
+                          classes={{ root: this.getActiveIcon(toolbarStyles, "filter") }}
                           onClick={this.setActiveIcon.bind(null, "filter")}>
                           <FilterIcon />
                         </IconButton>