Skip to content

Commit

Permalink
created a better dataset for example demo. updated README
Browse files Browse the repository at this point in the history
  • Loading branch information
gregnb committed Dec 23, 2017
1 parent f6ba65e commit edf4ce1
Show file tree
Hide file tree
Showing 5 changed files with 52 additions and 61 deletions.
4 changes: 4 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 `
Expand Down
80 changes: 33 additions & 47 deletions example/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -68,7 +56,7 @@ class Example extends React.Component {

const options = {
filter: true,
filterType: 'checkbox',
filterType: 'dropdown',
responsive: 'stacked',
styles: {
table: {
Expand Down Expand Up @@ -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"));
2 changes: 0 additions & 2 deletions src/DataStyles.js
Original file line number Diff line number Diff line change
Expand Up @@ -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));
Expand Down
21 changes: 12 additions & 9 deletions src/MUIDataTable.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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} />
Expand Down
6 changes: 3 additions & 3 deletions src/MUIDataTableToolbar.js
Original file line number Diff line number Diff line change
Expand Up @@ -281,6 +281,7 @@ class MUIDataTableToolbar extends React.Component {
resetFilters,
searchTextUpdate,
toggleViewColumn,
title,
} = this.props;

const { showSearch } = this.state;
Expand All @@ -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>
)}
Expand All @@ -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 />
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit edf4ce1

Please sign in to comment.