diff --git a/examples/Router/ExamplesGrid.js b/examples/Router/ExamplesGrid.js index f248a582f..231cab5f3 100644 --- a/examples/Router/ExamplesGrid.js +++ b/examples/Router/ExamplesGrid.js @@ -1,70 +1,88 @@ -import {Link} from "react-router-dom"; -import {Card, CardContent, Grid, Typography} from "@mui/material"; -import React from "react"; -import examples from "../examples"; -import { withStyles } from "tss-react/mui"; +import { Link } from 'react-router-dom'; +import { styled } from '@mui/material/styles'; +import { Card, CardContent, Grid, Typography } from '@mui/material'; +import React from 'react'; +import examples from '../examples'; import TextField from '@mui/material/TextField'; -const styles = { - container: { - flexGrow: 1, - justifyContent: 'center', - alignItems: 'center', - marginTop: 16, - }, - card: { - '&:hover': { - background: 'lightgrey', - fontWeight: 500, - } - }, - cardContent: { - '&:last-child': { - padding: 8, - } +const PREFIX = 'ExamplesGrid'; + +const classes = { + container: `${PREFIX}-container`, + card: `${PREFIX}-card`, + cardContent: `${PREFIX}-cardContent`, + link: `${PREFIX}-link`, + label: `${PREFIX}-label`, +}; + +// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. +const Root = styled('div')({ + [`& .${classes.container}`]: { + flexGrow: 1, + justifyContent: 'center', + alignItems: 'center', + marginTop: 16, + }, + [`& .${classes.card}`]: { + '&:hover': { + background: 'lightgrey', + fontWeight: 500, }, - link: { - textDecoration: 'none', + }, + [`& .${classes.cardContent}`]: { + '&:last-child': { + padding: 8, }, - label: { - fontWeight: 'inherit' - } -}; + }, + [`& .${classes.link}`]: { + textDecoration: 'none', + }, + [`& .${classes.label}`]: { + fontWeight: 'inherit', + }, +}); class ExamplesGrid extends React.Component { - state = { - searchVal: '' - } + searchVal: '', + }; - setSearchVal = (val) => { + setSearchVal = val => { this.setState({ - searchVal: val + searchVal: val, }); - } + }; render() { - const {classes} = this.props; - // Sort Examples alphabetically const examplesSorted = {}; - Object.keys(examples).sort().forEach(function (key) { + Object.keys(examples) + .sort() + .forEach(function(key) { examplesSorted[key] = examples[key]; - }); + }); - const examplesSortedKeys = Object.keys(examplesSorted).filter((item) => { + const examplesSortedKeys = Object.keys(examplesSorted).filter(item => { if (this.state.searchVal === '') return true; console.dir(item); - return item.toLowerCase().indexOf( this.state.searchVal.toLowerCase() ) !== -1 ? true : false; + return item.toLowerCase().indexOf(this.state.searchVal.toLowerCase()) !== -1 ? true : false; }); return ( - - Choose an Example - ({examplesSortedKeys.length}) Examples + + + Choose an Example + + + ({examplesSortedKeys.length}) Examples + - - this.setSearchVal(e.target.value)} /> + + this.setSearchVal(e.target.value)} + /> @@ -73,16 +91,18 @@ class ExamplesGrid extends React.Component { - {label} + + {label} + ))} - + ); } } -export default withStyles(ExamplesGrid, styles); +export default ExamplesGrid; diff --git a/examples/Router/index.js b/examples/Router/index.js index 5fa34760f..55af81e0f 100644 --- a/examples/Router/index.js +++ b/examples/Router/index.js @@ -1,23 +1,29 @@ import React from 'react'; +import { createTheme, styled, ThemeProvider } from '@mui/material/styles'; import ReactDOM from 'react-dom'; import { HashRouter as Router, Route, Switch, withRouter } from 'react-router-dom'; -import { withStyles } from 'tss-react/mui'; import ExamplesGrid from './ExamplesGrid'; import examples from '../examples'; import Button from '@mui/material/Button'; -import { createTheme, ThemeProvider } from '@mui/material/styles'; import { CacheProvider } from '@emotion/react'; import createCache from '@emotion/cache'; -const styles = { - root: { +const PREFIX = 'index'; + +const classes = { + root: `${PREFIX}-root`, + contentWrapper: `${PREFIX}-contentWrapper`, +}; + +const StyledApp = styled(App)({ + [`& .${classes.root}`]: { display: 'flex', justifyContent: 'center', }, - contentWrapper: { + [`& .${classes.contentWrapper}`]: { width: '100%', }, -}; +}); const muiCache = createCache({ key: 'mui-datatables', @@ -30,7 +36,7 @@ class Examples extends React.Component { }; render() { - const { classes } = this.props; + const {} = this.props; var returnHomeStyle = { padding: '0px', margin: '20px 0 20px 0' }; @@ -69,7 +75,7 @@ class Examples extends React.Component { } } -const StyledExamples = withRouter(withStyles(Examples, styles)); +const StyledExamples = withRouter(Examples); function App() { return ( @@ -79,4 +85,4 @@ function App() { ); } -ReactDOM.render(, document.getElementById('app-root')); +ReactDOM.render(, document.getElementById('app-root')); diff --git a/examples/column-filters/index.js b/examples/column-filters/index.js index 2cd3e8221..ff2126cbf 100644 --- a/examples/column-filters/index.js +++ b/examples/column-filters/index.js @@ -1,89 +1,86 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import MUIDataTable from "../../src/"; +import React from 'react'; +import MUIDataTable from '../../src/'; class Example extends React.Component { - render() { - const columns = [ { - name: "Name", + name: 'Name', options: { filter: true, filterList: ['Franky Miles'], customFilterListOptions: { render: v => `Name: ${v}` }, filterOptions: { - names: ['a', 'b', 'c', 'Business Analyst'] + names: ['a', 'b', 'c', 'Business Analyst'], }, - } + }, }, { - name: "Title", + name: 'Title', options: { filter: true, filterList: ['Business Analyst'], customFilterListOptions: { render: v => `Title: ${v}` }, - filterType: 'textField' // set filterType's at the column level - } + filterType: 'textField', // set filterType's at the column level + }, }, { - name: "Location", + name: 'Location', options: { filter: false, - } + }, }, { - name: "Age", + name: 'Age', options: { - customBodyRenderLite: (dataIndex) => { + customBodyRenderLite: dataIndex => { let val = data[dataIndex][3]; return val; }, filter: true, customFilterListOptions: { render: v => `Age: ${v}` }, - } + }, }, { - name: "Salary", + name: 'Salary', options: { filter: true, customFilterListOptions: { render: v => `Salary: ${v}` }, - sort: false - } - } + sort: false, + }, + }, ]; const data = [ - ["Gabby George", "Business Analyst", "Minneapolis", 30, 100000], - ["Business Analyst", "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, 142000] + ['Gabby George', 'Business Analyst', 'Minneapolis', 30, 100000], + ['Business Analyst', '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, 142000], ]; const options = { @@ -97,10 +94,7 @@ class Example extends React.Component { rowsPerPage: 10, }; - return ( - - ); - + return ; } } diff --git a/examples/column-options-update/index.js b/examples/column-options-update/index.js index 14b0e78c5..c9e29f048 100644 --- a/examples/column-options-update/index.js +++ b/examples/column-options-update/index.js @@ -1,96 +1,92 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import MUIDataTable from "../../src/"; +import React from 'react'; +import MUIDataTable from '../../src/'; class Example extends React.Component { - state = { - filterList: [ - ['Franky Miles'], - ['Business Analyst'], - [], - [], - [] - ], + filterList: [['Franky Miles'], ['Business Analyst'], [], [], []], filterOptions: ['Franky Miles', 'this', 'test', 'is', 'working'], display: ['true', 'true', 'true', 'true', 'true'], data: [ - ["Gabby George", "Business Analyst", "Minneapolis", 30, 100000], - ["Business Analyst", "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, 142000] - ] - } + ['Gabby George', 'Business Analyst', 'Minneapolis', 30, 100000], + ['Business Analyst', '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, 142000], + ], + }; - handleFilterNameChange = (event) => { - let string = prompt("Write a semicolon-separated string to change filter names in the first column!"); + handleFilterNameChange = event => { + let string = prompt('Write a semicolon-separated string to change filter names in the first column!'); if (string) this.setState({ filterOptions: string.split(';') }); - } + }; - handleAddData = (event) => { - const string = prompt("Write a semicolon-separated string with values for 'Name', 'Title', 'Location', 'Age' and 'Salary' to add a new row of data!"); + handleAddData = event => { + const string = prompt( + "Write a semicolon-separated string with values for 'Name', 'Title', 'Location', 'Age' and 'Salary' to add a new row of data!", + ); if (string) this.setState({ data: [string.split(';'), ...this.state.data] }); - } + }; - handleChangeDisplay = (event) => { - const string = prompt("Write a semicolon-separated string of display options for each of the 5 columns. Options are either 'true', 'false', or 'excluded'"); + handleChangeDisplay = event => { + const string = prompt( + "Write a semicolon-separated string of display options for each of the 5 columns. Options are either 'true', 'false', or 'excluded'", + ); if (string) this.setState({ display: string.split(';') }); - } + }; render() { const { data, filterList, filterOptions } = this.state; const columns = [ { - name: "Name", + name: 'Name', options: { filter: true, display: this.state.display[0], filterList: filterList[0].length ? filterList[0] : null, customFilterListOptions: { render: v => `Name: ${v}` }, filterOptions: { - names: filterOptions + names: filterOptions, }, - } + }, }, { - name: "Title", + name: 'Title', options: { display: this.state.display[1], filter: true, filterList: filterList[1].length ? filterList[1] : null, customFilterListOptions: { render: v => `Title: ${v}` }, - filterType: 'textField' // set filterType's at the column level - } + filterType: 'textField', // set filterType's at the column level + }, }, { - name: "Location", + name: 'Location', options: { display: this.state.display[2], filter: true, @@ -98,27 +94,27 @@ class Example extends React.Component { fullWidth: true, }, filterList: filterList[2].length ? filterList[2] : null, - } + }, }, { - name: "Age", + name: 'Age', options: { display: this.state.display[3], filter: true, filterList: filterList[3].length ? filterList[3] : null, customFilterListOptions: { render: v => `Age: ${v}` }, - } + }, }, { - name: "Salary", + name: 'Salary', options: { display: this.state.display[4], filter: true, filterList: filterList[4].length ? filterList[4] : null, customFilterListOptions: { render: v => `Salary: ${v}` }, - sort: false - } - } + sort: false, + }, + }, ]; const options = { @@ -134,17 +130,13 @@ class Example extends React.Component { return ( - - @@ -152,7 +144,6 @@ class Example extends React.Component { ); - } } diff --git a/examples/column-sort/index.js b/examples/column-sort/index.js index 9ae9f7754..4b0c690e4 100644 --- a/examples/column-sort/index.js +++ b/examples/column-sort/index.js @@ -1,21 +1,18 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import { Chip } from "@mui/material"; -import MUIDataTable from "../../src/"; +import React from 'react'; +import { Chip } from '@mui/material'; +import MUIDataTable from '../../src/'; class Example extends React.Component { - render() { - const columns = [ { - name: "Name", + name: 'Name', }, { - name: "Title", + name: 'Title', }, { - name: "Age", + name: 'Age', options: { /* In this case, age is a string, but we want to compare it as if it was a number. @@ -24,46 +21,45 @@ class Example extends React.Component { so we wouldn't need to write a function like this. But the sortCompare is available if you run into a situation like this. */ - sortCompare: (order) => { + sortCompare: order => { return (obj1, obj2) => { console.log(order); let val1 = parseInt(obj1.data, 10); let val2 = parseInt(obj2.data, 10); return (val1 - val2) * (order === 'asc' ? 1 : -1); }; - } - } + }, + }, }, { - name: "Hobbies", + name: 'Hobbies', options: { - sortCompare: (order) => - ({ data: hobbyList1 }, { data: hobbyList2 }) => - (hobbyList1.length - hobbyList2.length) * (order === 'asc' ? 1 : -1), + sortCompare: order => ({ data: hobbyList1 }, { data: hobbyList2 }) => + (hobbyList1.length - hobbyList2.length) * (order === 'asc' ? 1 : -1), hint: 'Sort by amount of hobbies', - customBodyRender: hobbies => hobbies.map((hobby, index) => ) - } - } + customBodyRender: hobbies => hobbies.map((hobby, index) => ), + }, + }, ]; const data = [ - ["Gabby George", "Business Analyst", "30", ["Sports"]], - ["Business Analyst", "Business Consultant", "55", ["Water Polo"]], - ["Jaden Collins", "Attorney", "27", ["Sports", "TV"]], - ["Franky Rees", "Business Analyst", "22", ["Baking", "Hiking"]], - ["Aaren Rose", "Business Consultant", "28", ["Hiking"]], - ["Blake Duncan", "Business Management Analyst", "65", ["Sprots", "Cooking", "Baking"]], - ["Frankie Parry", "Agency Legal Counsel", "71", []], - ["Lane Wilson", "Commercial Specialist", "19", ["Cooking"]], - ["Robin Duncan", "Business Analyst", "20", ["Acting"]], - ["Mel Brooks", "Business Consultant", "37", ["Puzzles", "Sewing"]], - ["Harper White", "Attorney", "52", ["Fising"]], - ["Kris Humphrey", "Agency Legal Counsel", "30", []], - ["Frankie Long", "Industrial Analyst", "31", []], - ["Brynn Robbins", "Business Analyst", "22", ["Fishing", "Hiking"]], - ["Justice Mann", "Business Consultant", "24", ["Footbal"]], - ["JoJo", "Business Consultant", "2", ["Sleeping"]], - ["Bobby Smith", "Business Consultant", "3", []], - ["Addison Navarro", "Business Management Analyst", "50", ["Photography"]] + ['Gabby George', 'Business Analyst', '30', ['Sports']], + ['Business Analyst', 'Business Consultant', '55', ['Water Polo']], + ['Jaden Collins', 'Attorney', '27', ['Sports', 'TV']], + ['Franky Rees', 'Business Analyst', '22', ['Baking', 'Hiking']], + ['Aaren Rose', 'Business Consultant', '28', ['Hiking']], + ['Blake Duncan', 'Business Management Analyst', '65', ['Sprots', 'Cooking', 'Baking']], + ['Frankie Parry', 'Agency Legal Counsel', '71', []], + ['Lane Wilson', 'Commercial Specialist', '19', ['Cooking']], + ['Robin Duncan', 'Business Analyst', '20', ['Acting']], + ['Mel Brooks', 'Business Consultant', '37', ['Puzzles', 'Sewing']], + ['Harper White', 'Attorney', '52', ['Fising']], + ['Kris Humphrey', 'Agency Legal Counsel', '30', []], + ['Frankie Long', 'Industrial Analyst', '31', []], + ['Brynn Robbins', 'Business Analyst', '22', ['Fishing', 'Hiking']], + ['Justice Mann', 'Business Consultant', '24', ['Footbal']], + ['JoJo', 'Business Consultant', '2', ['Sleeping']], + ['Bobby Smith', 'Business Consultant', '3', []], + ['Addison Navarro', 'Business Management Analyst', '50', ['Photography']], ]; const options = { @@ -74,10 +70,7 @@ class Example extends React.Component { rowsPerPageOptions: [50], }; - return ( - - ); - + return ; } } diff --git a/examples/component/cities.js b/examples/component/cities.js index 1903a489d..c6110094e 100644 --- a/examples/component/cities.js +++ b/examples/component/cities.js @@ -1,4 +1,4 @@ -import React from "react"; +import React from 'react'; import PropTypes from 'prop-types'; import MenuItem from '@mui/material/MenuItem'; import FormControl from '@mui/material/FormControl'; @@ -8,23 +8,412 @@ class Cities extends React.Component { static propTypes = { value: PropTypes.string.isRequired, index: PropTypes.number.isRequired, - change: PropTypes.func.isRequired + change: PropTypes.func.isRequired, }; render() { const { value, index, change } = this.props; - const cities = ["Aberdeen", "Abilene", "Akron", "Albany", "Albuquerque", "Alexandria", "Allentown", "Amarillo", "Anaheim", "Anchorage", "Ann Arbor", "Antioch", "Apple Valley", "Appleton", "Arlington", "Arvada", "Asheville", "Athens", "Atlanta", "Atlantic City", "Augusta", "Aurora", "Austin", "Bakersfield", "Baltimore", "Barnstable", "Baton Rouge", "Beaumont", "Bel Air", "Bellevue", "Berkeley", "Bethlehem", "Billings", "Birmingham", "Bloomington", "Boise", "Boise City", "Bonita Springs", "Boston", "Boulder", "Bradenton", "Bremerton", "Bridgeport", "Brighton", "Brownsville", "Bryan", "Buffalo", "Burbank", "Burlington", "Cambridge", "Canton", "Cape Coral", "Carrollton", "Cary", "Cathedral City", "Cedar Rapids", "Champaign", "Chandler", "Charleston", "Charlotte", "Chattanooga", "Chesapeake", "Chicago", "Chula Vista", "Cincinnati", "Clarke County", "Clarksville", "Clearwater", "Cleveland", "College Station", "Colorado Springs", "Columbia", "Columbus", "Concord", "Coral Springs", "Corona", "Corpus Christi", "Costa Mesa", "Dallas", "Daly City", "Danbury", "Davenport", "Davidson County", "Dayton", "Daytona Beach", "Deltona", "Denton", "Denver", "Des Moines", "Detroit", "Downey", "Duluth", "Durham", "El Monte", "El Paso", "Elizabeth", "Elk Grove", "Elkhart", "Erie", "Escondido", "Eugene", "Evansville", "Fairfield", "Fargo", "Fayetteville", "Fitchburg", "Flint", "Fontana", "Fort Collins", "Fort Lauderdale", "Fort Smith", "Fort Walton Beach", "Fort Wayne", "Fort Worth", "Frederick", "Fremont", "Fresno", "Fullerton", "Gainesville", "Garden Grove", "Garland", "Gastonia", "Gilbert", "Glendale", "Grand Prairie", "Grand Rapids", "Grayslake", "Green Bay", "GreenBay", "Greensboro", "Greenville", "Gulfport-Biloxi", "Hagerstown", "Hampton", "Harlingen", "Harrisburg", "Hartford", "Havre de Grace", "Hayward", "Hemet", "Henderson", "Hesperia", "Hialeah", "Hickory", "High Point", "Hollywood", "Honolulu", "Houma", "Houston", "Howell", "Huntington", "Huntington Beach", "Huntsville", "Independence", "Indianapolis", "Inglewood", "Irvine", "Irving", "Jackson", "Jacksonville", "Jefferson", "Jersey City", "Johnson City", "Joliet", "Kailua", "Kalamazoo", "Kaneohe", "Kansas City", "Kennewick", "Kenosha", "Killeen", "Kissimmee", "Knoxville", "Lacey", "Lafayette", "Lake Charles", "Lakeland", "Lakewood", "Lancaster", "Lansing", "Laredo", "Las Cruces", "Las Vegas", "Layton", "Leominster", "Lewisville", "Lexington", "Lincoln", "Little Rock", "Long Beach", "Lorain", "Los Angeles", "Louisville", "Lowell", "Lubbock", "Macon", "Madison", "Manchester", "Marina", "Marysville", "McAllen", "McHenry", "Medford", "Melbourne", "Memphis", "Merced", "Mesa", "Mesquite", "Miami", "Milwaukee", "Minneapolis", "Miramar", "Mission Viejo", "Mobile", "Modesto", "Monroe", "Monterey", "Montgomery", "Moreno Valley", "Murfreesboro", "Murrieta", "Muskegon", "Myrtle Beach", "Naperville", "Naples", "Nashua", "Nashville", "New Bedford", "New Haven", "New London", "New Orleans", "New York", "New York City", "Newark", "Newburgh", "Newport News", "Norfolk", "Normal", "Norman", "North Charleston", "North Las Vegas", "North Port", "Norwalk", "Norwich", "Oakland", "Ocala", "Oceanside", "Odessa", "Ogden", "Oklahoma City", "Olathe", "Olympia", "Omaha", "Ontario", "Orange", "Orem", "Orlando", "Overland Park", "Oxnard", "Palm Bay", "Palm Springs", "Palmdale", "Panama City", "Pasadena", "Paterson", "Pembroke Pines", "Pensacola", "Peoria", "Philadelphia", "Phoenix", "Pittsburgh", "Plano", "Pomona", "Pompano Beach", "Port Arthur", "Port Orange", "Port Saint Lucie", "Port St. Lucie", "Portland", "Portsmouth", "Poughkeepsie", "Providence", "Provo", "Pueblo", "Punta Gorda", "Racine", "Raleigh", "Rancho Cucamonga", "Reading", "Redding", "Reno", "Richland", "Richmond", "Richmond County", "Riverside", "Roanoke", "Rochester", "Rockford", "Roseville", "Round Lake Beach", "Sacramento", "Saginaw", "Saint Louis", "Saint Paul", "Saint Petersburg", "Salem", "Salinas", "Salt Lake City", "San Antonio", "San Bernardino", "San Buenaventura", "San Diego", "San Francisco", "San Jose", "Santa Ana", "Santa Barbara", "Santa Clara", "Santa Clarita", "Santa Cruz", "Santa Maria", "Santa Rosa", "Sarasota", "Savannah", "Scottsdale", "Scranton", "Seaside", "Seattle", "Sebastian", "Shreveport", "Simi Valley", "Sioux City", "Sioux Falls", "South Bend", "South Lyon", "Spartanburg", "Spokane", "Springdale", "Springfield", "St. Louis", "St. Paul", "St. Petersburg", "Stamford", "Sterling Heights", "Stockton", "Sunnyvale", "Syracuse", "Tacoma", "Tallahassee", "Tampa", "Temecula", "Tempe", "Thornton", "Thousand Oaks", "Toledo", "Topeka", "Torrance", "Trenton", "Tucson", "Tulsa", "Tuscaloosa", "Tyler", "Utica", "Vallejo", "Vancouver", "Vero Beach", "Victorville", "Virginia Beach", "Visalia", "Waco", "Warren", "Washington", "Waterbury", "Waterloo", "West Covina", "West Valley City", "Westminster", "Wichita", "Wilmington", "Winston", "Winter Haven", "Worcester", "Yakima", "Yonkers", "York", "Youngstown"]; - + const cities = [ + 'Aberdeen', + 'Abilene', + 'Akron', + 'Albany', + 'Albuquerque', + 'Alexandria', + 'Allentown', + 'Amarillo', + 'Anaheim', + 'Anchorage', + 'Ann Arbor', + 'Antioch', + 'Apple Valley', + 'Appleton', + 'Arlington', + 'Arvada', + 'Asheville', + 'Athens', + 'Atlanta', + 'Atlantic City', + 'Augusta', + 'Aurora', + 'Austin', + 'Bakersfield', + 'Baltimore', + 'Barnstable', + 'Baton Rouge', + 'Beaumont', + 'Bel Air', + 'Bellevue', + 'Berkeley', + 'Bethlehem', + 'Billings', + 'Birmingham', + 'Bloomington', + 'Boise', + 'Boise City', + 'Bonita Springs', + 'Boston', + 'Boulder', + 'Bradenton', + 'Bremerton', + 'Bridgeport', + 'Brighton', + 'Brownsville', + 'Bryan', + 'Buffalo', + 'Burbank', + 'Burlington', + 'Cambridge', + 'Canton', + 'Cape Coral', + 'Carrollton', + 'Cary', + 'Cathedral City', + 'Cedar Rapids', + 'Champaign', + 'Chandler', + 'Charleston', + 'Charlotte', + 'Chattanooga', + 'Chesapeake', + 'Chicago', + 'Chula Vista', + 'Cincinnati', + 'Clarke County', + 'Clarksville', + 'Clearwater', + 'Cleveland', + 'College Station', + 'Colorado Springs', + 'Columbia', + 'Columbus', + 'Concord', + 'Coral Springs', + 'Corona', + 'Corpus Christi', + 'Costa Mesa', + 'Dallas', + 'Daly City', + 'Danbury', + 'Davenport', + 'Davidson County', + 'Dayton', + 'Daytona Beach', + 'Deltona', + 'Denton', + 'Denver', + 'Des Moines', + 'Detroit', + 'Downey', + 'Duluth', + 'Durham', + 'El Monte', + 'El Paso', + 'Elizabeth', + 'Elk Grove', + 'Elkhart', + 'Erie', + 'Escondido', + 'Eugene', + 'Evansville', + 'Fairfield', + 'Fargo', + 'Fayetteville', + 'Fitchburg', + 'Flint', + 'Fontana', + 'Fort Collins', + 'Fort Lauderdale', + 'Fort Smith', + 'Fort Walton Beach', + 'Fort Wayne', + 'Fort Worth', + 'Frederick', + 'Fremont', + 'Fresno', + 'Fullerton', + 'Gainesville', + 'Garden Grove', + 'Garland', + 'Gastonia', + 'Gilbert', + 'Glendale', + 'Grand Prairie', + 'Grand Rapids', + 'Grayslake', + 'Green Bay', + 'GreenBay', + 'Greensboro', + 'Greenville', + 'Gulfport-Biloxi', + 'Hagerstown', + 'Hampton', + 'Harlingen', + 'Harrisburg', + 'Hartford', + 'Havre de Grace', + 'Hayward', + 'Hemet', + 'Henderson', + 'Hesperia', + 'Hialeah', + 'Hickory', + 'High Point', + 'Hollywood', + 'Honolulu', + 'Houma', + 'Houston', + 'Howell', + 'Huntington', + 'Huntington Beach', + 'Huntsville', + 'Independence', + 'Indianapolis', + 'Inglewood', + 'Irvine', + 'Irving', + 'Jackson', + 'Jacksonville', + 'Jefferson', + 'Jersey City', + 'Johnson City', + 'Joliet', + 'Kailua', + 'Kalamazoo', + 'Kaneohe', + 'Kansas City', + 'Kennewick', + 'Kenosha', + 'Killeen', + 'Kissimmee', + 'Knoxville', + 'Lacey', + 'Lafayette', + 'Lake Charles', + 'Lakeland', + 'Lakewood', + 'Lancaster', + 'Lansing', + 'Laredo', + 'Las Cruces', + 'Las Vegas', + 'Layton', + 'Leominster', + 'Lewisville', + 'Lexington', + 'Lincoln', + 'Little Rock', + 'Long Beach', + 'Lorain', + 'Los Angeles', + 'Louisville', + 'Lowell', + 'Lubbock', + 'Macon', + 'Madison', + 'Manchester', + 'Marina', + 'Marysville', + 'McAllen', + 'McHenry', + 'Medford', + 'Melbourne', + 'Memphis', + 'Merced', + 'Mesa', + 'Mesquite', + 'Miami', + 'Milwaukee', + 'Minneapolis', + 'Miramar', + 'Mission Viejo', + 'Mobile', + 'Modesto', + 'Monroe', + 'Monterey', + 'Montgomery', + 'Moreno Valley', + 'Murfreesboro', + 'Murrieta', + 'Muskegon', + 'Myrtle Beach', + 'Naperville', + 'Naples', + 'Nashua', + 'Nashville', + 'New Bedford', + 'New Haven', + 'New London', + 'New Orleans', + 'New York', + 'New York City', + 'Newark', + 'Newburgh', + 'Newport News', + 'Norfolk', + 'Normal', + 'Norman', + 'North Charleston', + 'North Las Vegas', + 'North Port', + 'Norwalk', + 'Norwich', + 'Oakland', + 'Ocala', + 'Oceanside', + 'Odessa', + 'Ogden', + 'Oklahoma City', + 'Olathe', + 'Olympia', + 'Omaha', + 'Ontario', + 'Orange', + 'Orem', + 'Orlando', + 'Overland Park', + 'Oxnard', + 'Palm Bay', + 'Palm Springs', + 'Palmdale', + 'Panama City', + 'Pasadena', + 'Paterson', + 'Pembroke Pines', + 'Pensacola', + 'Peoria', + 'Philadelphia', + 'Phoenix', + 'Pittsburgh', + 'Plano', + 'Pomona', + 'Pompano Beach', + 'Port Arthur', + 'Port Orange', + 'Port Saint Lucie', + 'Port St. Lucie', + 'Portland', + 'Portsmouth', + 'Poughkeepsie', + 'Providence', + 'Provo', + 'Pueblo', + 'Punta Gorda', + 'Racine', + 'Raleigh', + 'Rancho Cucamonga', + 'Reading', + 'Redding', + 'Reno', + 'Richland', + 'Richmond', + 'Richmond County', + 'Riverside', + 'Roanoke', + 'Rochester', + 'Rockford', + 'Roseville', + 'Round Lake Beach', + 'Sacramento', + 'Saginaw', + 'Saint Louis', + 'Saint Paul', + 'Saint Petersburg', + 'Salem', + 'Salinas', + 'Salt Lake City', + 'San Antonio', + 'San Bernardino', + 'San Buenaventura', + 'San Diego', + 'San Francisco', + 'San Jose', + 'Santa Ana', + 'Santa Barbara', + 'Santa Clara', + 'Santa Clarita', + 'Santa Cruz', + 'Santa Maria', + 'Santa Rosa', + 'Sarasota', + 'Savannah', + 'Scottsdale', + 'Scranton', + 'Seaside', + 'Seattle', + 'Sebastian', + 'Shreveport', + 'Simi Valley', + 'Sioux City', + 'Sioux Falls', + 'South Bend', + 'South Lyon', + 'Spartanburg', + 'Spokane', + 'Springdale', + 'Springfield', + 'St. Louis', + 'St. Paul', + 'St. Petersburg', + 'Stamford', + 'Sterling Heights', + 'Stockton', + 'Sunnyvale', + 'Syracuse', + 'Tacoma', + 'Tallahassee', + 'Tampa', + 'Temecula', + 'Tempe', + 'Thornton', + 'Thousand Oaks', + 'Toledo', + 'Topeka', + 'Torrance', + 'Trenton', + 'Tucson', + 'Tulsa', + 'Tuscaloosa', + 'Tyler', + 'Utica', + 'Vallejo', + 'Vancouver', + 'Vero Beach', + 'Victorville', + 'Virginia Beach', + 'Visalia', + 'Waco', + 'Warren', + 'Washington', + 'Waterbury', + 'Waterloo', + 'West Covina', + 'West Valley City', + 'Westminster', + 'Wichita', + 'Wilmington', + 'Winston', + 'Winter Haven', + 'Worcester', + 'Yakima', + 'Yonkers', + 'York', + + 'Youngstown', + ]; + return ( - change(event.target.value, index)} style={{ fontSize: 'inherit' }}> + {cities.map((city, index) => ( + + {city} + + ))} ); } } -export default Cities; \ No newline at end of file +export default Cities; diff --git a/examples/component/index.js b/examples/component/index.js index 8f2306fce..9ee1e5b4e 100644 --- a/examples/component/index.js +++ b/examples/component/index.js @@ -1,18 +1,15 @@ -import React from "react"; -import ReactDOM from "react-dom"; +import React from 'react'; import FormControlLabel from '@mui/material/FormControlLabel'; import TextField from '@mui/material/TextField'; import Switch from '@mui/material/Switch'; -import MUIDataTable from "../../src/"; -import Cities from "./cities"; +import MUIDataTable from '../../src/'; +import Cities from './cities'; class Example extends React.Component { - render() { - const columns = [ { - name: "Name", + name: 'Name', options: { filter: false, customBodyRender: (value, tableMeta, updateValue) => ( @@ -22,119 +19,105 @@ class Example extends React.Component { control={} onChange={event => updateValue(event.target.value)} /> - ) - } + ), + }, }, { - name: "Title", + name: 'Title', options: { filter: true, - } + }, }, { - name: "Location", + name: 'Location', options: { filter: true, customBodyRender: (value, tableMeta, updateValue) => { - return ( - updateValue(event)} - /> - ); + return updateValue(event)} />; }, - } + }, }, { - name: "Age", + name: 'Age', options: { filter: false, customBodyRender: (value, tableMeta, updateValue) => ( } + control={} onChange={event => updateValue(event.target.value)} /> - ) - } + ), + }, }, { - name: "Salary", + name: 'Salary', options: { filter: true, customBodyRender: (value, tableMeta, updateValue) => { - const nf = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 2, - maximumFractionDigits: 2 + maximumFractionDigits: 2, }); return nf.format(value); - } - } + }, + }, }, { - name: "Active", + name: 'Active', options: { filter: true, customBodyRender: (value, tableMeta, updateValue) => { - return ( - } + label={value ? 'Yes' : 'No'} + value={value ? 'Yes' : 'No'} + control={} onChange={event => { - updateValue(event.target.value === "Yes" ? false : true); + updateValue(event.target.value === 'Yes' ? false : true); }} /> ); - - } - } - } + }, + }, + }, ]; const data = [ - ["Robin Duncan", "Business Analyst", "Los Angeles", null, 77000, false], - ["Mel Brooks", "Business Consultant", "Oklahoma City", 37, null, true], - ["Harper White", "Attorney", "Pittsburgh", 52, 420000, false], - ["Kris Humphrey", "Agency Legal Counsel", "Laredo", 30, 150000, true], - ["Frankie Long", "Industrial Analyst", "Austin", 31, 170000, false], - ["Brynn Robbins", "Business Analyst", "Norfolk", 22, 90000, true], - ["Justice Mann", "Business Consultant", "Chicago", 24, 133000, false], - ["Addison Navarro", "Business Management Analyst", "New York", 50, 295000, true], - ["Jesse Welch", "Agency Legal Counsel", "Seattle", 28, 200000, false], - ["Eli Mejia", "Commercial Specialist", "Long Beach", 65, 400000, true], - ["Gene Leblanc", "Industrial Analyst", "Hartford", 34, 110000, false], - ["Danny Leon", "Computer Scientist", "Newark", 60, 220000, true], - ["Lane Lee", "Corporate Counselor", "Cincinnati", 52, 180000, false], - ["Jesse Hall", "Business Analyst", "Baltimore", 44, 99000, true], - ["Danni Hudson", "Agency Legal Counsel", "Tampa", 37, 90000, false], - ["Terry Macdonald", "Commercial Specialist", "Miami", 39, 140000, true], - ["Justice Mccarthy", "Attorney", "Tucson", 26, 330000, false], - ["Silver Carey", "Computer Scientist", "Memphis", 47, 250000, true], - ["Franky Miles", "Industrial Analyst", "Buffalo", 49, 190000, false], - ["Glen Nixon", "Corporate Counselor", "Arlington", 44, 80000, true], - ["Gabby Strickland", "Business Process Consultant", "Scottsdale", 26, 45000, false], - ["Mason Ray", "Computer Scientist", "San Francisco", 39, 142000, true] + ['Robin Duncan', 'Business Analyst', 'Los Angeles', null, 77000, false], + ['Mel Brooks', 'Business Consultant', 'Oklahoma City', 37, null, true], + ['Harper White', 'Attorney', 'Pittsburgh', 52, 420000, false], + ['Kris Humphrey', 'Agency Legal Counsel', 'Laredo', 30, 150000, true], + ['Frankie Long', 'Industrial Analyst', 'Austin', 31, 170000, false], + ['Brynn Robbins', 'Business Analyst', 'Norfolk', 22, 90000, true], + ['Justice Mann', 'Business Consultant', 'Chicago', 24, 133000, false], + ['Addison Navarro', 'Business Management Analyst', 'New York', 50, 295000, true], + ['Jesse Welch', 'Agency Legal Counsel', 'Seattle', 28, 200000, false], + ['Eli Mejia', 'Commercial Specialist', 'Long Beach', 65, 400000, true], + ['Gene Leblanc', 'Industrial Analyst', 'Hartford', 34, 110000, false], + ['Danny Leon', 'Computer Scientist', 'Newark', 60, 220000, true], + ['Lane Lee', 'Corporate Counselor', 'Cincinnati', 52, 180000, false], + ['Jesse Hall', 'Business Analyst', 'Baltimore', 44, 99000, true], + ['Danni Hudson', 'Agency Legal Counsel', 'Tampa', 37, 90000, false], + ['Terry Macdonald', 'Commercial Specialist', 'Miami', 39, 140000, true], + ['Justice Mccarthy', 'Attorney', 'Tucson', 26, 330000, false], + ['Silver Carey', 'Computer Scientist', 'Memphis', 47, 250000, true], + ['Franky Miles', 'Industrial Analyst', 'Buffalo', 49, 190000, false], + ['Glen Nixon', 'Corporate Counselor', 'Arlington', 44, 80000, true], + ['Gabby Strickland', 'Business Process Consultant', 'Scottsdale', 26, 45000, false], + ['Mason Ray', 'Computer Scientist', 'San Francisco', 39, 142000, true], ]; const options = { filter: true, filterType: 'dropdown', - responsive: 'standard' + responsive: 'standard', }; - return ( - - ); - + return ; } } diff --git a/examples/csv-export/index.js b/examples/csv-export/index.js index af099d224..37fdcb52e 100644 --- a/examples/csv-export/index.js +++ b/examples/csv-export/index.js @@ -1,6 +1,5 @@ import Button from '@mui/material/Button'; import React from 'react'; -import ReactDOM from 'react-dom'; import MUIDataTable from '../../src/'; class Example extends React.Component { @@ -15,17 +14,21 @@ class Example extends React.Component { { name: 'Location', options: { - display: 'false' - } + display: 'false', + }, }, { name: 'Age', options: { - customBodyRenderLite: (dataIndex) => { + customBodyRenderLite: dataIndex => { let value = data[dataIndex][3]; - return
{value}
; - } - } + return ( +
+ {value} +
+ ); + }, + }, }, { name: 'Salary', @@ -74,20 +77,20 @@ class Example extends React.Component { filterType: 'dropdown', responsive: 'vertical', draggableColumns: { - enabled: true + enabled: true, }, rowsPerPage: 10, downloadOptions: { - filename: 'excel-format.csv', - separator: ';', - filterOptions: { - useDisplayedColumnsOnly: true, - useDisplayedRowsOnly: true, - } + filename: 'excel-format.csv', + separator: ';', + filterOptions: { + useDisplayedColumnsOnly: true, + useDisplayedRowsOnly: true, + }, }, onDownload: (buildHead, buildBody, columns, data) => { if (this.state.downloadFile) { - let val= `${buildHead(columns)}${buildBody(data)}`.trim(); + let val = `${buildHead(columns)}${buildBody(data)}`.trim(); return val; } diff --git a/examples/custom-action-columns/index.js b/examples/custom-action-columns/index.js index 0d0e234c2..b78b57ac8 100644 --- a/examples/custom-action-columns/index.js +++ b/examples/custom-action-columns/index.js @@ -1,6 +1,5 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import MUIDataTable from "../../src/"; +import React from 'react'; +import MUIDataTable from '../../src/'; class Example extends React.Component { constructor(props) { @@ -8,63 +7,64 @@ class Example extends React.Component { this.state = { data: [ - ["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"] - ] + ['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'], + ], }; } render() { const columns = [ { - name: "Delete", + name: 'Delete', options: { filter: false, sort: false, empty: true, - customBodyRenderLite: (dataIndex) => { + customBodyRenderLite: dataIndex => { return ( - ); - } - } + }, + }, }, { - name: "Edit", + name: 'Edit', options: { filter: false, sort: false, @@ -75,108 +75,119 @@ class Example extends React.Component { Edit ); - } - } + }, + }, }, { - name: "Name", + name: 'Name', options: { filter: true, - } + }, }, { - label: "Modified Title Label", - name: "Title", + label: 'Modified Title Label', + name: 'Title', options: { filter: true, - } + }, }, { - name: "Location", + name: 'Location', options: { filter: false, - } + }, }, { - name: "Age", + name: 'Age', options: { filter: true, - } + }, }, { - name: "Salary", + name: 'Salary', options: { filter: true, sort: false, - } + }, }, { - name: "Add", + name: 'Add', options: { filter: false, sort: false, empty: true, - customBodyRenderLite: (dataIndex) => { + customBodyRenderLite: dataIndex => { return ( - ); - } - } + }, + }, }, ]; const data1 = [ - {Name: "Gabby George", Title: "Business Analyst", Location: "Minneapolis", Age: 30, Salary: "$100,000"}, - {Name: "Aiden Lloyd", Title: "Business Consultant", Location: "Dallas", Age: 55, Salary: "$200,000"}, - {Name: "Jaden Collins", Title: "Attorney", Location: "Santa Ana", Age: 27, Salary: "$500,000"}, - {Name: "Franky Rees", Title: "Business Analyst", Location: "St. Petersburg", Age: 22, Salary: "$50,000"}, - {Name: "Aaren Rose", Title: "Business Consultant", Location: "Toledo", Age: 28, Salary: "$75,000"}, - {Name: "Blake Duncan", Title: "Business Management Analyst", Location: "San Diego", Age: 65, Salary: "$94,000"}, - {Name: "Frankie Parry", Title: "Agency Legal Counsel", Location: "Jacksonville", Age: 71, Salary: "$210,000"}, - {Name: "Lane Wilson", Title: "Commercial Specialist", Location: "Omaha", Age: 19, Salary: "$65,000"}, - {Name: "Robin Duncan", Title: "Business Analyst", Location: "Los Angeles", Age: 20, Salary: "$77,000"}, - {Name: "Mel Brooks", Title: "Business Consultant", Location: "Oklahoma City", Age: 37, Salary: "$135,000"}, - {Name: "Harper White", Title: "Attorney", Location: "Pittsburgh", Age: 52, Salary: "$420,000"}, - {Name: "Kris Humphrey", Title: "Agency Legal Counsel", Location: "Laredo", Age: 30, Salary: "$150,000"}, - {Name: "Frankie Long", Title: "Industrial Analyst", Location: "Austin", Age: 31, Salary: "$170,000"}, - {Name: "Brynn Robbins", Title: "Business Analyst", Location: "Norfolk", Age: 22, Salary: "$90,000"}, - {Name: "Justice Mann", Title: "Business Consultant", Location: "Chicago", Age: 24, Salary: "$133,000"}, - {Name: "Addison Navarro", Title: "Business Management Analyst", Location: "New York", Age: 50, Salary: "$295,000"}, - {Name: "Jesse Welch", Title: "Agency Legal Counsel", Location: "Seattle", Age: 28, Salary: "$200,000"}, - {Name: "Eli Mejia", Title: "Commercial Specialist", Location: "Long Beach", Age: 65, Salary: "$400,000"}, - {Name: "Gene Leblanc", Title: "Industrial Analyst", Location: "Hartford", Age: 34, Salary: "$110,000"}, - {Name: "Danny Leon", Title: "Computer Scientist", Location: "Newark", Age: 60, Salary: "$220,000"}, - {Name: "Lane Lee", Title: "Corporate Counselor", Location: "Cincinnati", Age: 52, Salary: "$180,000"}, - {Name: "Jesse Hall", Title: "Business Analyst", Location: "Baltimore", Age: 44, Salary: "$99,000"}, - {Name: "Danni Hudson", Title: "Agency Legal Counsel", Location: "Tampa", Age: 37, Salary: "$90,000"}, - {Name: "Terry Macdonald", Title: "Commercial Specialist", Location: "Miami", Age: 39, Salary: "$140,000"}, - {Name: "Justice Mccarthy", Title: "Attorney", Location: "Tucson", Age: 26, Salary: "$330,000"}, - {Name: "Silver Carey", Title: "Computer Scientist", Location: "Memphis", Age: 47, Salary: "$250,000" }, - {Name: "Franky Miles", Title: "Industrial Analyst", Location: "Buffalo", Age: 49, Salary: "$190,000"}, - {Name: "Glen Nixon", Title: "Corporate Counselor", Location: "Arlington", Age: 44, Salary: "$80,000"}, - {Name: "Gabby Strickland", Title: "Business Process Consultant", Location: "Scottsdale", Age: 26, Salary: "$45,000"}, - {Name: "Mason Ray", Title: "Computer Scientist", Location: "San Francisco", Age: 39, Salary: "$142,000"} + { Name: 'Gabby George', Title: 'Business Analyst', Location: 'Minneapolis', Age: 30, Salary: '$100,000' }, + { Name: 'Aiden Lloyd', Title: 'Business Consultant', Location: 'Dallas', Age: 55, Salary: '$200,000' }, + { Name: 'Jaden Collins', Title: 'Attorney', Location: 'Santa Ana', Age: 27, Salary: '$500,000' }, + { Name: 'Franky Rees', Title: 'Business Analyst', Location: 'St. Petersburg', Age: 22, Salary: '$50,000' }, + { Name: 'Aaren Rose', Title: 'Business Consultant', Location: 'Toledo', Age: 28, Salary: '$75,000' }, + { Name: 'Blake Duncan', Title: 'Business Management Analyst', Location: 'San Diego', Age: 65, Salary: '$94,000' }, + { Name: 'Frankie Parry', Title: 'Agency Legal Counsel', Location: 'Jacksonville', Age: 71, Salary: '$210,000' }, + { Name: 'Lane Wilson', Title: 'Commercial Specialist', Location: 'Omaha', Age: 19, Salary: '$65,000' }, + { Name: 'Robin Duncan', Title: 'Business Analyst', Location: 'Los Angeles', Age: 20, Salary: '$77,000' }, + { Name: 'Mel Brooks', Title: 'Business Consultant', Location: 'Oklahoma City', Age: 37, Salary: '$135,000' }, + { Name: 'Harper White', Title: 'Attorney', Location: 'Pittsburgh', Age: 52, Salary: '$420,000' }, + { Name: 'Kris Humphrey', Title: 'Agency Legal Counsel', Location: 'Laredo', Age: 30, Salary: '$150,000' }, + { Name: 'Frankie Long', Title: 'Industrial Analyst', Location: 'Austin', Age: 31, Salary: '$170,000' }, + { Name: 'Brynn Robbins', Title: 'Business Analyst', Location: 'Norfolk', Age: 22, Salary: '$90,000' }, + { Name: 'Justice Mann', Title: 'Business Consultant', Location: 'Chicago', Age: 24, Salary: '$133,000' }, + { + Name: 'Addison Navarro', + Title: 'Business Management Analyst', + Location: 'New York', + Age: 50, + Salary: '$295,000', + }, + { Name: 'Jesse Welch', Title: 'Agency Legal Counsel', Location: 'Seattle', Age: 28, Salary: '$200,000' }, + { Name: 'Eli Mejia', Title: 'Commercial Specialist', Location: 'Long Beach', Age: 65, Salary: '$400,000' }, + { Name: 'Gene Leblanc', Title: 'Industrial Analyst', Location: 'Hartford', Age: 34, Salary: '$110,000' }, + { Name: 'Danny Leon', Title: 'Computer Scientist', Location: 'Newark', Age: 60, Salary: '$220,000' }, + { Name: 'Lane Lee', Title: 'Corporate Counselor', Location: 'Cincinnati', Age: 52, Salary: '$180,000' }, + { Name: 'Jesse Hall', Title: 'Business Analyst', Location: 'Baltimore', Age: 44, Salary: '$99,000' }, + { Name: 'Danni Hudson', Title: 'Agency Legal Counsel', Location: 'Tampa', Age: 37, Salary: '$90,000' }, + { Name: 'Terry Macdonald', Title: 'Commercial Specialist', Location: 'Miami', Age: 39, Salary: '$140,000' }, + { Name: 'Justice Mccarthy', Title: 'Attorney', Location: 'Tucson', Age: 26, Salary: '$330,000' }, + { Name: 'Silver Carey', Title: 'Computer Scientist', Location: 'Memphis', Age: 47, Salary: '$250,000' }, + { Name: 'Franky Miles', Title: 'Industrial Analyst', Location: 'Buffalo', Age: 49, Salary: '$190,000' }, + { Name: 'Glen Nixon', Title: 'Corporate Counselor', Location: 'Arlington', Age: 44, Salary: '$80,000' }, + { + Name: 'Gabby Strickland', + Title: 'Business Process Consultant', + Location: 'Scottsdale', + Age: 26, + Salary: '$45,000', + }, + { Name: 'Mason Ray', Title: 'Computer Scientist', Location: 'San Francisco', Age: 39, Salary: '$142,000' }, ]; const options = { filter: true, filterType: 'dropdown', responsive: 'vertical', - onColumnSortChange: (changedColumn, direction) => console.log('changedColumn: ', changedColumn, 'direction: ', direction), + onColumnSortChange: (changedColumn, direction) => + console.log('changedColumn: ', changedColumn, 'direction: ', direction), onChangeRowsPerPage: numberOfRows => console.log('numberOfRows: ', numberOfRows), - onChangePage: currentPage => console.log('currentPage: ', currentPage) + onChangePage: currentPage => console.log('currentPage: ', currentPage), }; - return ( - - ); - + return ; } } diff --git a/examples/custom-components/TableViewCol.js b/examples/custom-components/TableViewCol.js index bcb9723a0..a1f9508a7 100644 --- a/examples/custom-components/TableViewCol.js +++ b/examples/custom-components/TableViewCol.js @@ -1,4 +1,5 @@ import React from 'react'; +import { styled } from '@mui/material/styles'; import PropTypes from 'prop-types'; import Checkbox from '@mui/material/Checkbox'; import Typography from '@mui/material/Typography'; @@ -6,14 +7,27 @@ import Button from '@mui/material/Button'; import FormControl from '@mui/material/FormControl'; import FormGroup from '@mui/material/FormGroup'; import FormControlLabel from '@mui/material/FormControlLabel'; -import { makeStyles } from 'tss-react/mui'; -const useStyles = makeStyles({ name: 'MUIDataTableViewCol' })(theme => ({ - root: { +const PREFIX = 'MUIDataTableViewCol'; + +const classes = { + root: `${PREFIX}-root`, + title: `${PREFIX}-title`, + formGroup: `${PREFIX}-formGroup`, + formControl: `${PREFIX}-formControl`, + checkbox: `${PREFIX}-checkbox`, + checkboxRoot: `${PREFIX}-checkboxRoot`, + checked: `${PREFIX}-checked`, + label: `${PREFIX}-label`, +}; + +const StyledFormControl = styled(FormControl)(({ theme }) => ({ + [`&.${classes.root}`]: { padding: '16px 24px 16px 24px', fontFamily: 'Roboto', }, - title: { + + [`& .${classes.title}`]: { marginLeft: '-7px', marginRight: '24px', fontSize: '14px', @@ -21,18 +35,23 @@ const useStyles = makeStyles({ name: 'MUIDataTableViewCol' })(theme => ({ textAlign: 'left', fontWeight: 500, }, - formGroup: { + + [`& .${classes.formGroup}`]: { marginTop: '8px', }, - formControl: {}, - checkbox: { + + [`& .${classes.formControl}`]: {}, + + [`& .${classes.checkbox}`]: { padding: '0px', width: '32px', height: '32px', }, - checkboxRoot: {}, - checked: {}, - label: { + + [`& .${classes.checkboxRoot}`]: {}, + [`& .${classes.checked}`]: {}, + + [`& .${classes.label}`]: { fontSize: '15px', marginLeft: '8px', color: theme.palette.text.primary, @@ -40,7 +59,6 @@ const useStyles = makeStyles({ name: 'MUIDataTableViewCol' })(theme => ({ })); const TableViewCol = ({ columns, options, components = {}, onColumnUpdate, updateColumns }) => { - const { classes } = useStyles(); const textLabels = options.textLabels.viewColumns; const CheckboxComponent = components.Checkbox || Checkbox; @@ -58,7 +76,7 @@ const TableViewCol = ({ columns, options, components = {}, onColumnUpdate, updat }; return ( - + {textLabels.title} @@ -93,7 +111,7 @@ const TableViewCol = ({ columns, options, components = {}, onColumnUpdate, updat ); })} - + ); }; diff --git a/examples/custom-components/index.js b/examples/custom-components/index.js index d09a826dc..d27395bb1 100644 --- a/examples/custom-components/index.js +++ b/examples/custom-components/index.js @@ -1,54 +1,57 @@ -import React from "react"; -import MUIDataTable from "../../src/"; +import React from 'react'; +import MUIDataTable from '../../src/'; import Chip from '@mui/material/Chip'; import Select from '@mui/material/Select'; import MenuItem from '@mui/material/MenuItem'; import TableFilterList from '../../src/components/TableFilterList'; import MuiTooltip from '@mui/material/Tooltip'; -import Fade from "@mui/material/Fade"; +import Fade from '@mui/material/Fade'; import Checkbox from '@mui/material/Checkbox'; import Radio from '@mui/material/Radio'; import TableViewCol from './TableViewCol'; -const CustomChip = (props) => { +const CustomChip = props => { const { label, onDelete, columnNames, className, index } = props; - return (); + /> + ); }; -const CustomTooltip = (props) => { +const CustomTooltip = props => { return ( - {props.children} + leaveDelay={250}> + {props.children} + ); }; -const CustomCheckbox = (props) => { +const CustomCheckbox = props => { let newProps = Object.assign({}, props); newProps.color = props['data-description'] === 'row-select' ? 'secondary' : 'primary'; if (props['data-description'] === 'row-select') { - return (); + return ; } else { - return (); + return ; } }; -const CustomFilterList = (props) => { +const CustomFilterList = props => { return ; }; class Example extends React.Component { - render() { const columns = [ { name: 'Name' }, @@ -65,7 +68,7 @@ class Example extends React.Component { } return false; }, - update: (filterList) => filterList, + update: filterList => filterList, }, filterOptions: { names: [], @@ -76,31 +79,30 @@ class Example extends React.Component { return false; }, display: (filterList, onChange, index, column) => ( - - ) + + ), }, }, }, { name: 'City', label: 'City Label', options: { filterList: ['Dallas'] } }, { name: 'State' }, - { - name: 'Empty', - options: { - empty: true, - filterType: 'checkbox', + { + name: 'Empty', + options: { + empty: true, + filterType: 'checkbox', filterOptions: { - renderValue: (val) => (val ? val : '(Empty)') - } - } + renderValue: val => (val ? val : '(Empty)'), + }, + }, }, ]; const data = [ @@ -120,19 +122,18 @@ class Example extends React.Component { return ( ); - } } diff --git a/examples/customize-columns/index.js b/examples/customize-columns/index.js index 984854e86..c00ad8bdd 100644 --- a/examples/customize-columns/index.js +++ b/examples/customize-columns/index.js @@ -1,31 +1,28 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import MUIDataTable from "../../src/"; +import React from 'react'; +import MUIDataTable from '../../src/'; class Example extends React.Component { - render() { - const columns = [ { - name: "Name", + name: 'Name', options: { filter: true, //display: 'excluded', sortThirdClickReset: true, sortDescFirst: true, - } - }, + }, + }, { - label: "Modified Title Label", - name: "Title", + label: 'Modified Title Label', + name: 'Title', options: { filter: true, sortThirdClickReset: true, - } + }, }, { - name: "Location", + name: 'Location', options: { filter: false, sortThirdClickReset: true, @@ -33,66 +30,65 @@ class Example extends React.Component { updateDirection(2)} style={{ cursor: 'pointer' }}> {columnMeta.name} - ) - } + ), + }, }, { - name: "Age", + name: 'Age', options: { filter: true, sortThirdClickReset: true, - } + }, }, { - name: "Salary", + name: 'Salary', options: { filter: true, sort: true, sortThirdClickReset: true, sortDescFirst: true, - sortCompare: (order) => { + sortCompare: order => { return (obj1, obj2) => { - var val1 = parseInt(obj1.data.substr(1).replace(/,/g,''), 10); - var val2 = parseInt(obj2.data.substr(1).replace(/,/g,''), 10); + var val1 = parseInt(obj1.data.substr(1).replace(/,/g, ''), 10); + var val2 = parseInt(obj2.data.substr(1).replace(/,/g, ''), 10); return (val1 - val2) * (order === 'asc' ? 1 : -1); }; - } - } - } + }, + }, + }, ]; - const data = [ - ["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"] + ['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'], ]; const options = { @@ -101,14 +97,11 @@ class Example extends React.Component { responsive: 'vertical', sortOrder: { name: 'Title', - direction: 'asc' - } + direction: 'asc', + }, }; - return ( - - ); - + return ; } } diff --git a/examples/customize-filter/index.js b/examples/customize-filter/index.js index 08e40f02c..15c964662 100644 --- a/examples/customize-filter/index.js +++ b/examples/customize-filter/index.js @@ -1,22 +1,21 @@ import { + Checkbox, + FormControl, + FormControlLabel, FormGroup, FormLabel, - FormControl, + InputLabel, ListItemText, - TextField, - Checkbox, - FormControlLabel, - Grid, + MenuItem, Select, - InputLabel, - MenuItem + TextField, } from '@mui/material'; import React from 'react'; import MUIDataTable from '../../src'; class Example extends React.Component { state = { - ageFilterChecked: false + ageFilterChecked: false, }; render() { @@ -26,10 +25,10 @@ class Example extends React.Component { options: { filter: true, filterOptions: { - renderValue: v => v ? v.replace(/^(\w).* (.*)$/, '$1. $2') : '' + renderValue: v => (v ? v.replace(/^(\w).* (.*)$/, '$1. $2') : ''), }, //display: 'excluded', - filterType: 'dropdown' + filterType: 'dropdown', }, }, { @@ -38,7 +37,7 @@ class Example extends React.Component { options: { filter: true, customFilterListOptions: { - render: v => v.toLowerCase() + render: v => v.toLowerCase(), }, }, }, @@ -56,7 +55,7 @@ class Example extends React.Component { console.log(filterList, filterPos, index); filterList[index].splice(filterPos, 1); return filterList; - } + }, }, filterOptions: { logic: (location, filters, row) => { @@ -67,9 +66,7 @@ class Example extends React.Component { const optionValues = ['Minneapolis', 'New York', 'Seattle']; return ( - - Location - + Location ); - } - } - } + }, + }, + }, }, { name: 'Age', @@ -104,7 +97,7 @@ class Example extends React.Component { // if the below value is set, these values will be used every time the table is rendered. // it's best to let the table internally manage the filterList //filterList: [25, 50], - + customFilterListOptions: { render: v => { if (v[0] && v[1] && this.state.ageFilterChecked) { @@ -149,7 +142,7 @@ class Example extends React.Component { Age { filterList[index][0] = event.target.value; @@ -158,7 +151,7 @@ class Example extends React.Component { style={{ width: '45%', marginRight: '5%' }} /> { filterList[index][1] = event.target.value; @@ -173,7 +166,7 @@ class Example extends React.Component { onChange={event => this.setState({ ageFilterChecked: event.target.checked })} /> } - label='Separate Values' + label="Separate Values" style={{ marginLeft: '0px' }} /> @@ -248,9 +241,9 @@ class Example extends React.Component { variant: 'outlined', className: 'testClass123', }; - } + }, }; - + return ( ); diff --git a/examples/customize-footer/CustomFooter.js b/examples/customize-footer/CustomFooter.js index ae02eb859..6fc6d6d95 100644 --- a/examples/customize-footer/CustomFooter.js +++ b/examples/customize-footer/CustomFooter.js @@ -1,15 +1,16 @@ -import React from "react"; -import TableFooter from "@mui/material/TableFooter"; -import TableRow from "@mui/material/TableRow"; -import TableCell from "@mui/material/TableCell"; -import MuiTablePagination from "@mui/material/TablePagination"; -import { withStyles } from "tss-react/mui"; +import React from 'react'; +import { styled } from '@mui/material/styles'; +import TableFooter from '@mui/material/TableFooter'; +import TableRow from '@mui/material/TableRow'; +import TableCell from '@mui/material/TableCell'; +import MuiTablePagination from '@mui/material/TablePagination'; -const defaultFooterStyles = { -}; +const PREFIX = 'CustomFooter'; +const classes = {}; -class CustomFooter extends React.Component { +const StyledTableFooter = styled(TableFooter)({}); +class CustomFooter extends React.Component { handleRowChange = event => { this.props.changeRowsPerPage(event.target.value); }; @@ -19,20 +20,20 @@ class CustomFooter extends React.Component { }; render() { - const { count, classes, textLabels, rowsPerPage, page } = this.props; + const { count, textLabels, rowsPerPage, page } = this.props; const footerStyle = { - display:'flex', + display: 'flex', justifyContent: 'flex-end', - padding: '0px 24px 0px 24px' + padding: '0px 24px 0px 24px', }; return ( - + - + - + ); } - } -export default withStyles(CustomFooter, defaultFooterStyles, { name: "CustomFooter" }); \ No newline at end of file +export default CustomFooter; diff --git a/examples/customize-footer/index.js b/examples/customize-footer/index.js index 025c973d1..52a3e07fc 100644 --- a/examples/customize-footer/index.js +++ b/examples/customize-footer/index.js @@ -1,8 +1,7 @@ import React, { useState } from 'react'; +import { styled } from '@mui/material/styles'; import MUIDataTable from '../../src/'; import CustomFooter from './CustomFooter'; -import { makeStyles } from "tss-react/mui"; - import TableFooter from '@mui/material/TableFooter'; import TableRow from '@mui/material/TableRow'; import TableCell from '@mui/material/TableCell'; @@ -11,12 +10,21 @@ import FormGroup from '@mui/material/FormGroup'; import FormControlLabel from '@mui/material/FormControlLabel'; import clsx from 'clsx'; -const useStyles = makeStyles()(theme => ({ - footerCell: { +const PREFIX = 'Example'; + +const classes = { + footerCell: `${PREFIX}-footerCell`, + stickyFooterCell: `${PREFIX}-stickyFooterCell`, +}; + +// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. +const Root = styled('div')(({ theme }) => ({ + [`& .${classes.footerCell}`]: { backgroundColor: theme.palette.background.paper, borderBottom: 'none', }, - stickyFooterCell: { + + [`& .${classes.stickyFooterCell}`]: { position: 'sticky', bottom: 0, zIndex: 100, @@ -26,7 +34,6 @@ const useStyles = makeStyles()(theme => ({ function Example() { const [resizableColumns, setResizableColumns] = useState(false); const [stickyFooter, setStickyFooter] = useState(true); - const { classes } = useStyles(); const columns = ['Name', 'Title', 'Location', 'Age', 'Salary']; @@ -134,7 +141,7 @@ function Example() { }; return ( - <> + - + ); } diff --git a/examples/customize-rows/index.js b/examples/customize-rows/index.js index 8e2e31f6e..c6cf50bc5 100644 --- a/examples/customize-rows/index.js +++ b/examples/customize-rows/index.js @@ -5,20 +5,17 @@ */ import React from 'react'; -import ReactDOM from "react-dom"; -import MuiDataTable from "../../src/"; +import MuiDataTable from '../../src/'; function YourCustomRowComponent(props) { const { name, cardNumber, cvc, expiry } = props; return (
-

- {name} -

+

{name}

- Number: {cardNumber}
- CVC: {cvc}
+ Number: {cardNumber}
+ CVC: {cvc}
expiry: {expiry}

@@ -27,23 +24,23 @@ function YourCustomRowComponent(props) { const creditCards = [ { - name: "Tom Tallis", - cardNumber: "5500005555555559", - cvc: "582", - expiry: "02/24" + name: 'Tom Tallis', + cardNumber: '5500005555555559', + cvc: '582', + expiry: '02/24', }, { - name: "Rich Harris", - cardNumber: "4444444444444448", - cvc: "172", - expiry: "03/22" + name: 'Rich Harris', + cardNumber: '4444444444444448', + cvc: '172', + expiry: '03/22', }, { - name: "Moby Dixon", - cardNumber: "3566003566003566", - cvc: "230", - expiry: "12/25" - } + name: 'Moby Dixon', + cardNumber: '3566003566003566', + cvc: '230', + expiry: '12/25', + }, ]; function Example() { @@ -53,37 +50,32 @@ function Example() { data={creditCards} columns={[ { - name: "name", - label: "Name", + name: 'name', + label: 'Name', }, { - name: "cardNumber", - label: "Card Number" + name: 'cardNumber', + label: 'Card Number', }, { - name: "cvc", - label: "CVC" + name: 'cvc', + label: 'CVC', }, { - name: "expiry", - label: "Expiry" + name: 'expiry', + label: 'Expiry', }, ]} options={{ - selectableRows: "none", - responsive: "standard", + selectableRows: 'none', + responsive: 'standard', customRowRender: data => { - const [ name, cardNumber, cvc, expiry ] = data; - + const [name, cardNumber, cvc, expiry] = data; + return ( - - + + ); diff --git a/examples/customize-search-render/CustomSearchRender.js b/examples/customize-search-render/CustomSearchRender.js index 630bc1d55..2741ac629 100644 --- a/examples/customize-search-render/CustomSearchRender.js +++ b/examples/customize-search-render/CustomSearchRender.js @@ -1,24 +1,34 @@ import React from 'react'; +import { styled } from '@mui/material/styles'; import Grow from '@mui/material/Grow'; import TextField from '@mui/material/TextField'; import IconButton from '@mui/material/IconButton'; import ClearIcon from '@mui/icons-material/Clear'; -import { withStyles } from "tss-react/mui"; -const defaultSearchStyles = theme => ({ - main: { +const PREFIX = 'CustomSearchRender'; + +const classes = { + main: `${PREFIX}-main`, + searchText: `${PREFIX}-searchText`, + clearIcon: `${PREFIX}-clearIcon`, +}; + +const StyledGrow = styled(Grow)(({ theme }) => ({ + [`& .${classes.main}`]: { display: 'flex', flex: '1 0 auto', }, - searchText: { + + [`& .${classes.searchText}`]: { flex: '0.8 0', }, - clearIcon: { + + [`& .${classes.clearIcon}`]: { '&:hover': { color: theme.palette.error.main, }, }, -}); +})); class CustomSearchRender extends React.Component { handleTextChange = event => { @@ -40,10 +50,10 @@ class CustomSearchRender extends React.Component { }; render() { - const { classes, options, onHide, searchText } = this.props; + const { options, onHide, searchText } = this.props; return ( - +
(this.rootRef = el)}>
- + ); } } -export default withStyles(CustomSearchRender, defaultSearchStyles, { name: 'CustomSearchRender' }); +export default CustomSearchRender; diff --git a/examples/customize-search-render/index.js b/examples/customize-search-render/index.js index bb28072b4..90c980257 100644 --- a/examples/customize-search-render/index.js +++ b/examples/customize-search-render/index.js @@ -1,12 +1,9 @@ import React from 'react'; -import ReactDOM from 'react-dom'; import MUIDataTable from '../../src/'; import CustomSearchRender from './CustomSearchRender'; class Example extends React.Component { - - render () { - + render() { const columns = ['Name', 'Title', 'Location', 'Age', 'Salary']; let data = [ @@ -39,7 +36,7 @@ class Example extends React.Component { ['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, 142000] + ['Mason Ray', 'Computer Scientist', 'San Francisco', 39, 142000], ]; const options = { @@ -50,20 +47,12 @@ class Example extends React.Component { rowsPerPage: 10, customSearchRender: (searchText, handleSearch, hideSearch, options) => { return ( - + ); - } + }, }; - return ( - - ); - + return ; } } diff --git a/examples/customize-search/index.js b/examples/customize-search/index.js index 717cb3b79..d6009049b 100644 --- a/examples/customize-search/index.js +++ b/examples/customize-search/index.js @@ -1,10 +1,9 @@ import React, { Fragment } from 'react'; -import ReactDOM from 'react-dom'; import MUIDataTable from '../../src/'; class Example extends React.Component { state = { - searchText: 'Computer' + searchText: 'Computer', }; render() { @@ -84,12 +83,12 @@ class Example extends React.Component { page: 0, searchText: this.state.searchText, searchProps: { - onBlur: (e) => { + onBlur: e => { console.log('onBlur!'); }, - onKeyUp:(e) => { + onKeyUp: e => { console.log('onKeyUp!'); - } + }, }, searchPlaceholder: 'Your Custom Search Placeholder', customSearch: (searchQuery, currentRow, columns) => { diff --git a/examples/customize-sorting/index.js b/examples/customize-sorting/index.js index cb1b48c2d..a09055e9d 100644 --- a/examples/customize-sorting/index.js +++ b/examples/customize-sorting/index.js @@ -1,19 +1,16 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import MUIDataTable from "../../src/"; +import React from 'react'; +import MUIDataTable from '../../src/'; class Example extends React.Component { - render() { - - const columns = ["Name", "SurveyScore", "Date"]; + const columns = ['Name', 'SurveyScore', 'Date']; const data = [ - ["Gabby George", 3, "2018-07-06T23:58:59.000Z"], - ["Aiden Lloyd", 10, "2018-07-06T23:58:53.000Z"], - ["Jaden Collins", 3, "2018-07-06T23:55:51.000Z"], - ["Franky Rees", 3, "2018-07-06T22:47:56.000Z"], - ["Aaren Rose", 8, "2018-07-06T21:59:20.000Z"] + ['Gabby George', 3, '2018-07-06T23:58:59.000Z'], + ['Aiden Lloyd', 10, '2018-07-06T23:58:53.000Z'], + ['Jaden Collins', 3, '2018-07-06T23:55:51.000Z'], + ['Franky Rees', 3, '2018-07-06T22:47:56.000Z'], + ['Aaren Rose', 8, '2018-07-06T21:59:20.000Z'], ]; const options = { @@ -22,15 +19,12 @@ class Example extends React.Component { responsive: 'vertical', customSort: (data, colIndex, order, meta) => { return data.sort((a, b) => { - return (a.data[colIndex].length < b.data[colIndex].length ? -1: 1 ) * (order === 'desc' ? 1 : -1); + return (a.data[colIndex].length < b.data[colIndex].length ? -1 : 1) * (order === 'desc' ? 1 : -1); }); - } + }, }; - return ( - - ); - + return ; } } diff --git a/examples/customize-styling/index.js b/examples/customize-styling/index.js index 6f25fb05b..d653cee47 100644 --- a/examples/customize-styling/index.js +++ b/examples/customize-styling/index.js @@ -1,8 +1,6 @@ import React from 'react'; +import { createTheme, styled, ThemeProvider } from '@mui/material/styles'; import MUIDataTable from '../../src/'; -import { ThemeProvider } from '@mui/material/styles'; -import { withStyles } from 'tss-react/mui'; -import { createTheme } from '@mui/material/styles'; import Switch from '@mui/material/Switch'; import FormGroup from '@mui/material/FormGroup'; import FormControlLabel from '@mui/material/FormControlLabel'; @@ -15,17 +13,27 @@ const muiCache = createCache({ prepend: true, }); -const customStyles = theme => ({ - BusinessAnalystRow: { +const PREFIX = 'customize-styling'; + +const classes = { + BusinessAnalystRow: `${PREFIX}-BusinessAnalystRow`, + GreyLine: `${PREFIX}-GreyLine`, + NameCell: `${PREFIX}-NameCell`, +}; + +const StyledThemeProvider = styled(`div`)(({ theme }) => ({ + [`& .${classes.BusinessAnalystRow}`]: { '& td': { backgroundColor: '#FAA' }, }, - GreyLine: { + + [`& .${classes.GreyLine}`]: { '& td': { backgroundColor: theme.palette.grey[200] }, }, - NameCell: { + + [`& .${classes.NameCell}`]: { fontWeight: 900, }, -}); +})); class Example extends React.Component { constructor(props) { @@ -36,8 +44,20 @@ class Example extends React.Component { }; } - getMuiTheme = () => - createTheme({ + toggleDenseTable = event => { + this.setState({ + denseTable: event.target.checked, + }); + }; + + toggleResponsive = event => { + this.setState({ + vertical: !!event.target.checked, + }); + }; + + render() { + const theme = createTheme({ components: { MUIDataTable: { styleOverrides: { @@ -82,19 +102,6 @@ class Example extends React.Component { }, }); - toggleDenseTable = event => { - this.setState({ - denseTable: event.target.checked, - }); - }; - - toggleResponsive = event => { - this.setState({ - vertical: !!event.target.checked, - }); - }; - - render() { const columns = [ { name: 'Name', @@ -103,17 +110,17 @@ class Example extends React.Component { setCellProps: value => { return { className: clsx({ - [this.props.classes.NameCell]: value === 'Mel Brooks', + [classes.NameCell]: value === 'Mel Brooks', }), style: { - borderRight: '2px solid blue', + // borderRight: '2px solid blue', }, }; }, setCellHeaderProps: value => { return { className: clsx({ - [this.props.classes.NameCell]: true, + [classes.NameCell]: true, }), style: { textDecoration: 'underline', @@ -193,8 +200,8 @@ class Example extends React.Component { setRowProps: (row, dataIndex, rowIndex) => { return { className: clsx({ - [this.props.classes.BusinessAnalystRow]: row[1] === 'Business Analyst', - [this.props.classes.GreyLine]: rowIndex % 2 === 0 && row[1] !== 'Business Analyst', + [classes.BusinessAnalystRow]: row[1] === 'Business Analyst', + [classes.GreyLine]: rowIndex % 2 === 0 && row[1] !== 'Business Analyst', }), style: { border: '3px solid blue' }, }; @@ -211,7 +218,7 @@ class Example extends React.Component { return ( - + - + ); } } -export default withStyles(Example, customStyles, { name: 'ExampleCardjs' }); +export default Example; diff --git a/examples/customize-toolbar-icons/index.js b/examples/customize-toolbar-icons/index.js index ea75dd673..da42723e2 100644 --- a/examples/customize-toolbar-icons/index.js +++ b/examples/customize-toolbar-icons/index.js @@ -1,6 +1,5 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import MUIDataTable from "../../src/"; +import React from 'react'; +import MUIDataTable from '../../src/'; import SearchIcon from '@mui/icons-material/YoutubeSearchedFor'; import PrintIcon from '@mui/icons-material/Receipt'; import DownloadIcon from '@mui/icons-material/GetApp'; @@ -8,42 +7,40 @@ import ViewColumnIcon from '@mui/icons-material/DynamicFeed'; import FilterIcon from '@mui/icons-material/GroupWork'; class Example extends React.Component { - render() { - - const columns = ["Name", "Title", "Location", "Age", "Salary"]; + const columns = ['Name', 'Title', 'Location', 'Age', 'Salary']; let data = [ - ["Gabby George", "Business Analyst", "Minneapolis", 30, 100000], - ["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, 142000] + ['Gabby George', 'Business Analyst', 'Minneapolis', 30, 100000], + ['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, 142000], ]; const options = { @@ -61,13 +58,10 @@ class Example extends React.Component { DownloadIcon, ViewColumnIcon, FilterIcon, - } + }, }; - return ( - - ); - + return ; } } diff --git a/examples/customize-toolbar/CustomToolbar.js b/examples/customize-toolbar/CustomToolbar.js index 2903d43c5..d624ed354 100644 --- a/examples/customize-toolbar/CustomToolbar.js +++ b/examples/customize-toolbar/CustomToolbar.js @@ -1,33 +1,35 @@ -import React from "react"; -import IconButton from "@mui/material/IconButton"; -import Tooltip from "@mui/material/Tooltip"; -import AddIcon from "@mui/icons-material/Add"; -import { withStyles } from "tss-react/mui"; -const defaultToolbarStyles = { - iconButton: { - }, +import React from 'react'; +import { styled } from '@mui/material/styles'; +import IconButton from '@mui/material/IconButton'; +import Tooltip from '@mui/material/Tooltip'; +import AddIcon from '@mui/icons-material/Add'; + +const PREFIX = 'CustomToolbar'; + +const classes = { + iconButton: `${PREFIX}-iconButton`, }; +const StyledTooltip = styled(Tooltip)({ + [`& .${classes.iconButton}`]: {}, +}); + class CustomToolbar extends React.Component { - handleClick = () => { - console.log("clicked on icon!"); - } + console.log('clicked on icon!'); + }; render() { - const { classes } = this.props; + const {} = this.props; return ( - - - - - - - + + + + + ); } - } -export default withStyles(CustomToolbar, defaultToolbarStyles, { name: "CustomToolbar" }); +export default CustomToolbar; diff --git a/examples/customize-toolbar/index.js b/examples/customize-toolbar/index.js index 58f98ab09..3d0d31d82 100644 --- a/examples/customize-toolbar/index.js +++ b/examples/customize-toolbar/index.js @@ -1,45 +1,42 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import MUIDataTable from "../../src/"; -import CustomToolbar from "./CustomToolbar"; +import React from 'react'; +import MUIDataTable from '../../src/'; +import CustomToolbar from './CustomToolbar'; class Example extends React.Component { - render() { - - const columns = ["Name", "Title", "Location", "Age", "Salary"]; + const columns = ['Name', 'Title', 'Location', 'Age', 'Salary']; let data = [ - ["Gabby George", "Business Analyst", "Minneapolis", 30, 100000], - ["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, 142000] + ['Gabby George', 'Business Analyst', 'Minneapolis', 30, 100000], + ['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, 142000], ]; const options = { @@ -49,16 +46,11 @@ class Example extends React.Component { responsive: 'vertical', rowsPerPage: 10, customToolbar: () => { - return ( - - ); - } + return ; + }, }; - return ( - - ); - + return ; } } diff --git a/examples/customize-toolbarselect/CustomToolbarSelect.js b/examples/customize-toolbarselect/CustomToolbarSelect.js index 9f53dbcfb..6f829ba11 100644 --- a/examples/customize-toolbarselect/CustomToolbarSelect.js +++ b/examples/customize-toolbarselect/CustomToolbarSelect.js @@ -1,21 +1,28 @@ -import React from "react"; -import IconButton from "@mui/material/IconButton"; -import Tooltip from "@mui/material/Tooltip"; -import CompareArrowsIcon from "@mui/icons-material/CompareArrows"; -import IndeterminateCheckBoxIcon from "@mui/icons-material/IndeterminateCheckBox"; -import BlockIcon from "@mui/icons-material/Block"; -import { withStyles } from "tss-react/mui"; +import React from 'react'; +import { styled } from '@mui/material/styles'; +import IconButton from '@mui/material/IconButton'; +import Tooltip from '@mui/material/Tooltip'; +import CompareArrowsIcon from '@mui/icons-material/CompareArrows'; +import IndeterminateCheckBoxIcon from '@mui/icons-material/IndeterminateCheckBox'; +import BlockIcon from '@mui/icons-material/Block'; -const defaultToolbarSelectStyles = { - iconButton: { - }, - iconContainer: { - marginRight: "24px", +const PREFIX = 'CustomToolbarSelect'; + +const classes = { + iconButton: `${PREFIX}-iconButton`, + iconContainer: `${PREFIX}-iconContainer`, + inverseIcon: `${PREFIX}-inverseIcon`, +}; + +const Root = styled('div')({ + [`& .${classes.iconButton}`]: {}, + [`&.${classes.iconContainer}`]: { + marginRight: '24px', }, - inverseIcon: { - transform: "rotate(90deg)", + [`& .${classes.inverseIcon}`]: { + transform: 'rotate(90deg)', }, -}; +}); class CustomToolbarSelect extends React.Component { handleClickInverseSelection = () => { @@ -39,28 +46,28 @@ class CustomToolbarSelect extends React.Component { }; render() { - const { classes } = this.props; + const {} = this.props; return ( -
- + + - + - + - + -
+ ); } } -export default withStyles(CustomToolbarSelect, defaultToolbarSelectStyles, { name: "CustomToolbarSelect" }); +export default CustomToolbarSelect; diff --git a/examples/customize-toolbarselect/index.js b/examples/customize-toolbarselect/index.js index d803c3786..d9e547516 100644 --- a/examples/customize-toolbarselect/index.js +++ b/examples/customize-toolbarselect/index.js @@ -1,58 +1,55 @@ -import React, {useState} from "react"; -import ReactDOM from "react-dom"; -import MUIDataTable from "../../src/"; -import CustomToolbarSelect from "./CustomToolbarSelect"; +import React, { useState } from 'react'; +import MUIDataTable from '../../src/'; +import CustomToolbarSelect from './CustomToolbarSelect'; import InputLabel from '@mui/material/InputLabel'; import MenuItem from '@mui/material/MenuItem'; -import FormHelperText from '@mui/material/FormHelperText'; import FormControl from '@mui/material/FormControl'; import Select from '@mui/material/Select'; function Example() { + const [stp, setStp] = useState('replace'); - const [stp, setStp] = useState("replace"); - - const columns = ["Name", "Title", "Location", "Age", "Salary"]; + const columns = ['Name', 'Title', 'Location', 'Age', 'Salary']; let data = [ - ["Gabby George", "Business Analyst", "Minneapolis", 30, 100000], - ["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, 142000], + ['Gabby George', 'Business Analyst', 'Minneapolis', 30, 100000], + ['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, 142000], ]; const options = { filter: true, selectableRows: 'multiple', - filterType: "dropdown", - responsive: "vertical", + filterType: 'dropdown', + responsive: 'vertical', rowsPerPage: 10, selectToolbarPlacement: stp, customToolbarSelect: (selectedRows, displayData, setSelectedRows) => ( @@ -62,21 +59,20 @@ function Example() { return ( <> - + Select Toolbar Placement - + ); } diff --git a/examples/data-as-objects/index.js b/examples/data-as-objects/index.js index c94fe7838..a428fd31b 100644 --- a/examples/data-as-objects/index.js +++ b/examples/data-as-objects/index.js @@ -1,77 +1,102 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import MUIDataTable from "../../src/"; +import React from 'react'; +import MUIDataTable from '../../src/'; class Example extends React.Component { - state = { counter: 0, data: [ - { name: "Gabby George", title: "Business Analyst", location: "Minneapolis", age: 30, salary: "$100,000", phone: { home: '867-5309', cell: '123-4567' } }, - { name: "Aiden Lloyd", title: "Business Consultant", location: "Dallas",  age: 55, salary: "$200,000", phone: { home: '867-5310', cell: '123-4568' } }, - { name: "Jaden Collins", title: "Attorney", location: "Santa Ana", age: 27, salary: "$500,000", phone: { home: '867-5311', cell: '123-4569' } }, - { name: "Franky Rees", title: "Business Analyst", location: "St. Petersburg", age: 22, salary: "$50,000", phone: { home: '867-5312', cell: '123-4569' } } - ] - } + { + name: 'Gabby George', + title: 'Business Analyst', + location: 'Minneapolis', + age: 30, + salary: '$100,000', + phone: { home: '867-5309', cell: '123-4567' }, + }, + { + name: 'Aiden Lloyd', + title: 'Business Consultant', + location: 'Dallas', + age: 55, + salary: '$200,000', + phone: { home: '867-5310', cell: '123-4568' }, + }, + { + name: 'Jaden Collins', + title: 'Attorney', + location: 'Santa Ana', + age: 27, + salary: '$500,000', + phone: { home: '867-5311', cell: '123-4569' }, + }, + { + name: 'Franky Rees', + title: 'Business Analyst', + location: 'St. Petersburg', + age: 22, + salary: '$50,000', + phone: { home: '867-5312', cell: '123-4569' }, + }, + ], + }; rerender = () => { this.setState((prevState, props) => ({ - counter: prevState.counter + 1 - })); - } + counter: prevState.counter + 1, + })); + }; render() { - const columns = [ { - name: "name", - label: "Name", + name: 'name', + label: 'Name', options: { filter: true, display: 'excluded', - } - },   + }, + }, { - name: "title", - label: "Modified Title Label", + name: 'title', + label: 'Modified Title Label', options: { filter: true, - } + }, }, - {   - name: "location", - label: "Location", + { + name: 'location', + label: 'Location', options: { filter: false, - } + }, }, { - name: "age", - Label: "Age", + name: 'age', + Label: 'Age', options: { filter: true, - } + }, }, { - name: "salary", - label: "Salary", + name: 'salary', + label: 'Salary', options: { filter: true, - sort: false - } + sort: false, + }, }, { - name: "phone.home", - label: "Home Phone", + name: 'phone.home', + label: 'Home Phone', }, { - name: "phone.cell", - label: "Cell Phone #", + name: 'phone.cell', + label: 'Cell Phone #', }, { - name: "phone2.home", - label: "Not An Attribute", - } + name: 'phone2.home', + label: 'Not An Attribute', + }, ]; const options = { @@ -84,11 +109,10 @@ class Example extends React.Component { return ( - + ); - } } -export default Example; \ No newline at end of file +export default Example; diff --git a/examples/draggable-columns/index.js b/examples/draggable-columns/index.js index aecc251d7..64559039d 100644 --- a/examples/draggable-columns/index.js +++ b/examples/draggable-columns/index.js @@ -1,40 +1,41 @@ -import React, {useState} from "react"; -import ReactDOM from "react-dom"; -import MUIDataTable from "../../src/"; +import React, { useState } from 'react'; +import MUIDataTable from '../../src/'; import InputLabel from '@mui/material/InputLabel'; import MenuItem from '@mui/material/MenuItem'; -import FormHelperText from '@mui/material/FormHelperText'; import FormControl from '@mui/material/FormControl'; import Select from '@mui/material/Select'; import TextField from '@mui/material/TextField'; -import { DndProvider } from 'react-dnd'; -import { HTML5Backend } from 'react-dnd-html5-backend'; - function Example() { - - const [responsive, setResponsive] = useState("vertical"); - const [tableBodyHeight, setTableBodyHeight] = useState("400px"); - const [tableBodyMaxHeight, setTableBodyMaxHeight] = useState(""); + const [responsive, setResponsive] = useState('vertical'); + const [tableBodyHeight, setTableBodyHeight] = useState('400px'); + const [tableBodyMaxHeight, setTableBodyMaxHeight] = useState(''); const [transitionTime, setTransitionTime] = useState(300); const [selectableRows, setSelectableRows] = useState('none'); const [treeData, setTreeData] = useState([ - { title: 'Chicken', children: [{ title: 'Egg' }] }, - { title: 'Fish', children: [{ title: 'fingerline'}] } - ]); + { title: 'Chicken', children: [{ title: 'Egg' }] }, + { title: 'Fish', children: [{ title: 'fingerline' }] }, + ]); - const columns = [{ - name: 'hidden', - options: { - display: 'excluded' - } - },"Name", "Title", "Location", { - name: 'No Drag', - options: { - draggable: false, - } - }, "Phone"]; + const columns = [ + { + name: 'hidden', + options: { + display: 'excluded', + }, + }, + 'Name', + 'Title', + 'Location', + { + name: 'No Drag', + options: { + draggable: false, + }, + }, + 'Phone', + ]; const options = { filter: true, @@ -44,25 +45,31 @@ function Example() { tableBodyMaxHeight, draggableColumns: { enabled: true, - transitionTime + transitionTime, }, selectableRows: selectableRows, }; const data = [ - ["1","Gabby George", "Business Analyst", "Minneapolis","1","555-1234"], - ["1","Aiden Lloyd", "Business Consultant for an International Company and CEO of Tony's Burger Palace", "Dallas","2","555-1234"], - ["1","Jaden Collins", "Attorney", "Santa Ana","1","555-5555"], - ["1","Franky Rees", "Business Analyst", "St. Petersburg","1","555-3333"], - ["1","Aaren Rose", null, "Toledo","1","555-4444"], - ["1","Johnny Jones", "Business Analyst", "St. Petersburg","3","555-2468"], - ["1","Jimmy Johns", "Business Analyst", "Baltimore","1","555-1357"], - ["1","Jack Jackson", "Business Analyst", "El Paso","1","555-4321"], - ["1","Joe Jones", "Computer Programmer", "El Paso","1","555-4321"], - ["1","Jacky Jackson", "Business Consultant", "Baltimore","4","555-1234"], - ["1","Jo Jo", "Software Developer", "Washington DC","4","555-1122"], - ["1","Donna Marie", "Business Manager", "Annapolis","5","555-5555"], - + ['1', 'Gabby George', 'Business Analyst', 'Minneapolis', '1', '555-1234'], + [ + '1', + 'Aiden Lloyd', + "Business Consultant for an International Company and CEO of Tony's Burger Palace", + 'Dallas', + '2', + '555-1234', + ], + ['1', 'Jaden Collins', 'Attorney', 'Santa Ana', '1', '555-5555'], + ['1', 'Franky Rees', 'Business Analyst', 'St. Petersburg', '1', '555-3333'], + ['1', 'Aaren Rose', null, 'Toledo', '1', '555-4444'], + ['1', 'Johnny Jones', 'Business Analyst', 'St. Petersburg', '3', '555-2468'], + ['1', 'Jimmy Johns', 'Business Analyst', 'Baltimore', '1', '555-1357'], + ['1', 'Jack Jackson', 'Business Analyst', 'El Paso', '1', '555-4321'], + ['1', 'Joe Jones', 'Computer Programmer', 'El Paso', '1', '555-4321'], + ['1', 'Jacky Jackson', 'Business Consultant', 'Baltimore', '4', '555-1234'], + ['1', 'Jo Jo', 'Software Developer', 'Washington DC', '4', '555-1122'], + ['1', 'Donna Marie', 'Business Manager', 'Annapolis', '5', '555-5555'], ]; return ( @@ -73,16 +80,15 @@ function Example() { labelId="demo-simple-select-label" id="demo-simple-select" value={responsive} - style={{width:'200px', marginBottom:'10px', marginRight:10}} - onChange={(e) => setResponsive(e.target.value)} - > - vertical - standard - simple + style={{ width: '200px', marginBottom: '10px', marginRight: 10 }} + onChange={e => setResponsive(e.target.value)}> + vertical + standard + simple - scroll (deprecated) - scrollMaxHeight (deprecated) - stacked (deprecated) + scroll (deprecated) + scrollMaxHeight (deprecated) + stacked (deprecated) @@ -91,13 +97,12 @@ function Example() { labelId="demo-simple-select-label" id="demo-simple-select" value={tableBodyHeight} - style={{width:'200px', marginBottom:'10px', marginRight:10}} - onChange={(e) => setTableBodyHeight(e.target.value)} - > - [blank] - 400px - 800px - 100% + style={{ width: '200px', marginBottom: '10px', marginRight: 10 }} + onChange={e => setTableBodyHeight(e.target.value)}> + [blank] + 400px + 800px + 100% @@ -106,13 +111,12 @@ function Example() { labelId="demo-simple-select-label" id="demo-simple-select" value={tableBodyMaxHeight} - style={{width:'200px', marginBottom:'10px',marginRight:10}} - onChange={(e) => setTableBodyMaxHeight(e.target.value)} - > - [blank] - 400px - 800px - 100% + style={{ width: '200px', marginBottom: '10px', marginRight: 10 }} + onChange={e => setTableBodyMaxHeight(e.target.value)}> + [blank] + 400px + 800px + 100% @@ -121,20 +125,24 @@ function Example() { labelId="demo-simple-select-label" id="demo-simple-select" value={selectableRows} - style={{width:'200px', marginBottom:'10px',marginRight:10}} - onChange={(e) => setSelectableRows(e.target.value)} - > - none - single - multiple + style={{ width: '200px', marginBottom: '10px', marginRight: 10 }} + onChange={e => setSelectableRows(e.target.value)}> + none + single + multiple - setTransitionTime(e.target.value)} /> + setTransitionTime(e.target.value)} + /> - + ); } -export default Example; \ No newline at end of file +export default Example; diff --git a/examples/examples.js b/examples/examples.js index 342ad72bb..9f4fe893c 100644 --- a/examples/examples.js +++ b/examples/examples.js @@ -1,7 +1,7 @@ import ArrayValueColumns from './array-value-columns'; import ColumnFilters from './column-filters'; import ColumnOptionsUpdate from './column-options-update'; -import ColumnSort from "./column-sort"; +import ColumnSort from './column-sort'; import Component from './component'; import CSVExport from './csv-export'; import CustomActionColumns from './custom-action-columns'; @@ -65,14 +65,14 @@ export default { 'Hide Columns Print': HideColumnsPrint, 'Infinite Scrolling': InfiniteScrolling, 'Large Data Set': LargeDataSet, - 'OnDownload': OnDownload, - 'OnTableInit': OnTableInit, + OnDownload: OnDownload, + OnTableInit: OnTableInit, 'Resizable Columns': ResizableColumns, 'Selectable Rows': SelectableRows, 'ServerSide Filters': ServerSideFilters, 'ServerSide Pagination': ServerSidePagination, 'ServerSide Sorting': ServerSideSorting, - 'Simple': Simple, + Simple: Simple, 'Simple No Toolbar': SimpleNoToolbar, 'Text Localization': TextLocalization, 'Custom Components': CustomComponents, diff --git a/examples/expandable-rows/index.js b/examples/expandable-rows/index.js index c05cafacc..5c3d98617 100644 --- a/examples/expandable-rows/index.js +++ b/examples/expandable-rows/index.js @@ -91,9 +91,7 @@ class Example extends React.Component { if (dataIndex === 3 || dataIndex === 4) return false; // Prevent expand/collapse of any row if there are 4 rows expanded already (but allow those already expanded to be collapsed) - if (expandedRows.data.length > 4 && expandedRows.data.filter(d => d.dataIndex === dataIndex).length === 0) - return false; - return true; + return !(expandedRows.data.length > 4 && expandedRows.data.filter(d => d.dataIndex === dataIndex).length === 0); }, rowsExpanded: [0, 1], renderExpandableRow: (rowData, rowMeta) => { @@ -109,11 +107,13 @@ class Example extends React.Component { }; const theme = createTheme({ - overrides: { + components: { MUIDataTableSelectCell: { - expandDisabled: { - // Soft hide the button. - visibility: 'hidden', + styleOverrides: { + expandDisabled: { + // Soft hide the button. + visibility: 'hidden', + }, }, }, }, diff --git a/examples/fixed-header/index.js b/examples/fixed-header/index.js index 5c8b12257..49ffe4b9e 100644 --- a/examples/fixed-header/index.js +++ b/examples/fixed-header/index.js @@ -1,102 +1,116 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import MUIDataTable from "../../src/"; +import React from 'react'; +import MUIDataTable from '../../src/'; class Example extends React.Component { - render() { - const columns = [ { - name: "Name", + name: 'Name', options: { filter: true, - setCellProps: () => ({style: {whiteSpace:'nowrap'}}) - } + setCellProps: () => ({ style: { whiteSpace: 'nowrap' } }), + }, }, { - name: "Title", + name: 'Title', options: { filter: true, - setCellProps: () => ({style: {whiteSpace:'nowrap'}}) - } + setCellProps: () => ({ style: { whiteSpace: 'nowrap' } }), + }, }, { - name: "Location", + name: 'Location', options: { filter: false, - setCellProps: () => ({style: {whiteSpace:'nowrap'}}) - } + setCellProps: () => ({ style: { whiteSpace: 'nowrap' } }), + }, }, { - name: "Age", + name: 'Age', options: { filter: true, - } + }, }, { - name: "Salary", + name: 'Salary', options: { filter: true, - sort: false - } + sort: false, + }, }, { - name: "Salary1", + name: 'Salary1', options: { filter: true, - sort: false - } + sort: false, + }, }, { - name: "Salary2", + name: 'Salary2', options: { filter: true, - sort: false - } + sort: false, + }, }, { - name: "Phone Number", + name: 'Phone Number', options: { filter: true, sort: false, - setCellProps: () => ({style: {whiteSpace:'nowrap'}}) - } + setCellProps: () => ({ style: { whiteSpace: 'nowrap' } }), + }, }, ]; - const data = [ - ["Gabby George", "Business Analyst", "Minneapolis", 30, "$100,000", "$100,000", "$100,000", "555-5555"], - ["Aiden Lloyd", "Business Consultant", "Dallas", 55, "$200,000", "$200,000", "$200,000", ""], - ["Jaden Collins", "Attorney", "Santa Ana", 27, "$500,000", "$500,000", "$500,000", "555-5555"], - ["Franky Rees", "Business Analyst", "St. Petersburg", 22, "$50,000", "$50,000", "$50,000", "555-5555"], - ["Aaren Rose", "Business Consultant", "Toledo", 28, "$75,000", "$75,000", "$75,000", "555-5555"], - ["Blake Duncan", "Business Management Analyst", "San Diego", 65, "$94,000", "$94,000", "$94,000", "555-3333"], - ["Frankie Parry", "Agency Legal Counsel", "Jacksonville", 71, "$210,000", "$210,000", "$210,000", "555-5555"], - ["Lane Wilson", "Commercial Specialist", "Omaha", 19, "$65,000", "$65,000", "$65,000", "555-5555"], - ["Robin Duncan", "Business Analyst", "Los Angeles", 20, "$77,000", "$77,000", "$77,000", "555-3333"], - ["Mel Brooks", "Business Consultant", "Oklahoma City", 37, "$135,000", "$135,000", "$135,000", "555-5555"], - ["Harper White", "Attorney", "Pittsburgh", 52, "$420,000", "$420,000", "$420,000", "555-5555"], - ["Kris Humphrey", "Agency Legal Counsel", "Laredo", 30, "$150,000", "$150,000", "$150,000", "555-5555"], - ["Frankie Long", "Industrial Analyst", "Austin", 31, "$170,000", "$170,000", "$170,000", ""], - ["Brynn Robbins", "Business Analyst", "Norfolk", 22, "$90,000", "$90,000", "$90,000", "555-0000"], - ["Justice Mann", "Business Consultant", "Chicago", 24, "$133,000", "$133,000", "$133,000", "555-5555"], - ["Addison Navarro", "Business Management Analyst", "New York", 50, "$295,000", "$295,000", "$295,000", "555-5555"], - ["Jesse Welch", "Agency Legal Counsel", "Seattle", 28, "$200,000", "$200,000", "$200,000", "555-5555"], - ["Eli Mejia", "Commercial Specialist", "Long Beach", 65, "$400,000", "$400,000", "$400,000", "555-5555"], - ["Gene Leblanc", "Industrial Analyst", "Hartford", 34, "$110,000", "$110,000", "$110,000", "555-5555"], - ["Danny Leon", "Computer Scientist", "Newark", 60, "$220,000", "$220,000", "$220,000", "555-5555"], - ["Lane Lee", "Corporate Counselor", "Cincinnati", 52, "$180,000", "$180,000", "$180,000", "555-5555"], - ["Jesse Hall", "Business Analyst", "Baltimore", 44, "$99,000", "$99,000", "$99,000", "555-5555"], - ["Danni Hudson", "Agency Legal Counsel", "Tampa", 37, "$90,000", "$90,000", "$90,000", "555-5555"], - ["Terry Macdonald", "Commercial Specialist", "Miami", 39, "$140,000", "$140,000", "$140,000", "555-5555"], - ["Justice Mccarthy", "Attorney", "Tucson", 26, "$330,000", "$330,000", "$330,000", "555-5555"], - ["Silver Carey", "Computer Scientist", "Memphis", 47, "$250,000", "$250,000", "$250,000", "555-5555"], - ["Franky Miles", "Industrial Analyst", "Buffalo", 49, "$190,000", "$190,000", "$190,000", "555-5555"], - ["Glen Nixon", "Corporate Counselor", "Arlington", 44, "$80,000", "$80,000", "$80,000", "555-5555"], - ["Gabby Strickland", "Business Process Consultant", "Scottsdale", 26, "$45,000", "$45,000", "$45,000", "555-5555"], - ["Mason Ray", "Computer Scientist", "San Francisco", 39, "$142,000", "$142,000", "$142,000", "555-5555"] + ['Gabby George', 'Business Analyst', 'Minneapolis', 30, '$100,000', '$100,000', '$100,000', '555-5555'], + ['Aiden Lloyd', 'Business Consultant', 'Dallas', 55, '$200,000', '$200,000', '$200,000', ''], + ['Jaden Collins', 'Attorney', 'Santa Ana', 27, '$500,000', '$500,000', '$500,000', '555-5555'], + ['Franky Rees', 'Business Analyst', 'St. Petersburg', 22, '$50,000', '$50,000', '$50,000', '555-5555'], + ['Aaren Rose', 'Business Consultant', 'Toledo', 28, '$75,000', '$75,000', '$75,000', '555-5555'], + ['Blake Duncan', 'Business Management Analyst', 'San Diego', 65, '$94,000', '$94,000', '$94,000', '555-3333'], + ['Frankie Parry', 'Agency Legal Counsel', 'Jacksonville', 71, '$210,000', '$210,000', '$210,000', '555-5555'], + ['Lane Wilson', 'Commercial Specialist', 'Omaha', 19, '$65,000', '$65,000', '$65,000', '555-5555'], + ['Robin Duncan', 'Business Analyst', 'Los Angeles', 20, '$77,000', '$77,000', '$77,000', '555-3333'], + ['Mel Brooks', 'Business Consultant', 'Oklahoma City', 37, '$135,000', '$135,000', '$135,000', '555-5555'], + ['Harper White', 'Attorney', 'Pittsburgh', 52, '$420,000', '$420,000', '$420,000', '555-5555'], + ['Kris Humphrey', 'Agency Legal Counsel', 'Laredo', 30, '$150,000', '$150,000', '$150,000', '555-5555'], + ['Frankie Long', 'Industrial Analyst', 'Austin', 31, '$170,000', '$170,000', '$170,000', ''], + ['Brynn Robbins', 'Business Analyst', 'Norfolk', 22, '$90,000', '$90,000', '$90,000', '555-0000'], + ['Justice Mann', 'Business Consultant', 'Chicago', 24, '$133,000', '$133,000', '$133,000', '555-5555'], + [ + 'Addison Navarro', + 'Business Management Analyst', + 'New York', + 50, + '$295,000', + '$295,000', + '$295,000', + '555-5555', + ], + ['Jesse Welch', 'Agency Legal Counsel', 'Seattle', 28, '$200,000', '$200,000', '$200,000', '555-5555'], + ['Eli Mejia', 'Commercial Specialist', 'Long Beach', 65, '$400,000', '$400,000', '$400,000', '555-5555'], + ['Gene Leblanc', 'Industrial Analyst', 'Hartford', 34, '$110,000', '$110,000', '$110,000', '555-5555'], + ['Danny Leon', 'Computer Scientist', 'Newark', 60, '$220,000', '$220,000', '$220,000', '555-5555'], + ['Lane Lee', 'Corporate Counselor', 'Cincinnati', 52, '$180,000', '$180,000', '$180,000', '555-5555'], + ['Jesse Hall', 'Business Analyst', 'Baltimore', 44, '$99,000', '$99,000', '$99,000', '555-5555'], + ['Danni Hudson', 'Agency Legal Counsel', 'Tampa', 37, '$90,000', '$90,000', '$90,000', '555-5555'], + ['Terry Macdonald', 'Commercial Specialist', 'Miami', 39, '$140,000', '$140,000', '$140,000', '555-5555'], + ['Justice Mccarthy', 'Attorney', 'Tucson', 26, '$330,000', '$330,000', '$330,000', '555-5555'], + ['Silver Carey', 'Computer Scientist', 'Memphis', 47, '$250,000', '$250,000', '$250,000', '555-5555'], + ['Franky Miles', 'Industrial Analyst', 'Buffalo', 49, '$190,000', '$190,000', '$190,000', '555-5555'], + ['Glen Nixon', 'Corporate Counselor', 'Arlington', 44, '$80,000', '$80,000', '$80,000', '555-5555'], + [ + 'Gabby Strickland', + 'Business Process Consultant', + 'Scottsdale', + 26, + '$45,000', + '$45,000', + '$45,000', + '555-5555', + ], + ['Mason Ray', 'Computer Scientist', 'San Francisco', 39, '$142,000', '$142,000', '$142,000', '555-5555'], ]; const options = { @@ -105,13 +119,10 @@ class Example extends React.Component { responsive: 'standard', fixedHeader: true, fixedSelectColumn: true, - tableBodyHeight: '400px' + tableBodyHeight: '400px', }; - return ( - - ); - + return ; } } diff --git a/examples/hide-columns-print/index.js b/examples/hide-columns-print/index.js index 108e27e15..0d6a9c4ac 100644 --- a/examples/hide-columns-print/index.js +++ b/examples/hide-columns-print/index.js @@ -1,81 +1,77 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import MUIDataTable from "../../src/"; +import React from 'react'; +import MUIDataTable from '../../src/'; class Example extends React.Component { - render() { - const columns = [ { - name: "Name", + name: 'Name', options: { filter: true, display: 'excluded', - } - }, + }, + }, { - label: "Modified Title Label", - name: "Title", + label: 'Modified Title Label', + name: 'Title', options: { filter: true, - } + }, }, { - name: "Location", + name: 'Location', options: { print: false, filter: false, - } + }, }, { - name: "Age", + name: 'Age', options: { filter: true, print: false, - } + }, }, { - name: "Salary", + name: 'Salary', options: { filter: true, - sort: false - } - } + sort: false, + }, + }, ]; - const data = [ - ["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"] + ['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'], ]; const options = { @@ -84,10 +80,7 @@ class Example extends React.Component { responsive: 'standard', }; - return ( - - ); - + return ; } } diff --git a/examples/infinite-scrolling/index.js b/examples/infinite-scrolling/index.js index 0f8e430ee..39e2e0df8 100644 --- a/examples/infinite-scrolling/index.js +++ b/examples/infinite-scrolling/index.js @@ -1,40 +1,44 @@ -import React, { Fragment, Component } from "react"; -import { Waypoint } from "react-waypoint"; -import PropTypes from "prop-types"; -import MUIDataTable from "../../src/"; -import { createTheme } from "@mui/material/styles"; -import { - Table, - TableBody, - TableCell, - TableHead, - TableRow, - Paper -} from "@mui/material"; -import { withStyles } from "tss-react/mui"; - -const styles = theme => ({ - root: { - width: "100%", - overflowX: "auto", +import React, { Component, Fragment } from 'react'; +import { createTheme, styled } from '@mui/material/styles'; +import { Waypoint } from 'react-waypoint'; +import PropTypes from 'prop-types'; +import MUIDataTable from '../../src/'; + +const PREFIX = 'index'; + +const classes = { + root: `${PREFIX}-root`, + head: `${PREFIX}-head`, + table: `${PREFIX}-table`, + tableCell: `${PREFIX}-tableCell`, +}; + +// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. +const Root = styled('div')(({ theme }) => ({ + [`& .${classes.root}`]: { + width: '100%', + overflowX: 'auto', height: 300, - flexGrow: 1 + flexGrow: 1, }, - head: { + + [`& .${classes.head}`]: { backgroundColor: theme.palette.primary.main, - color: "#fff", - position: "sticky", - fontSize: ".6rem", - top: 0 + color: '#fff', + position: 'sticky', + fontSize: '.6rem', + top: 0, }, - table: { + + [`& .${classes.table}`]: { minWidth: 700, - height: 200 + height: 200, }, - tableCell: { - fontSize: ".6rem" - } -}); + + [`& .${classes.tableCell}`]: { + fontSize: '.6rem', + }, +})); class MessageManager extends Component { constructor(props) { @@ -42,7 +46,7 @@ class MessageManager extends Component { this.props = props; this.state = { - filteredMessages: [] + filteredMessages: [], }; } @@ -52,76 +56,73 @@ class MessageManager extends Component { columns = [ { - name: "Id", + name: 'Id', options: { filter: false, sort: false, customBodyRenderLite: (dataIndex, rowIndex) => { const { filteredMessages } = this.state; let value = filteredMessages[dataIndex][0]; - + if (rowIndex === filteredMessages.length - 10) { return ( - + { - console.log("WAYPOINT REACHED"); - const newData = this.buildTestData( - 30, - filteredMessages.length - ); - + console.log('WAYPOINT REACHED'); + const newData = this.buildTestData(30, filteredMessages.length); + this.setState({ - filteredMessages: [...filteredMessages, ...newData] + filteredMessages: [...filteredMessages, ...newData], }); }} /> {value}* - + ); } else { return {value}; } - } - } + }, + }, }, { - name: "Message", - options:{ + name: 'Message', + options: { sort: false, - } + }, }, { - name: "Requester", - options:{ + name: 'Requester', + options: { sort: false, - } - } + }, + }, ]; options = { filter: false, fixedHeader: true, - filterType: "dropdown", - responsive: "standard", - selectableRows: "none", + filterType: 'dropdown', + responsive: 'standard', + selectableRows: 'none', pagination: false, - tableBodyHeight:'500px', + tableBodyHeight: '500px', onRowClick(rowNode) { console.log(rowNode); - } + }, }; /*eslint-disable */ buildTestData(count, startingIndex) { const data = [ - ["Template 1", "Requester Jerry"], - ["Template 2", "Test user 1"], - ["Order66", "Test user 2"], - ["Live Message", "Another Person"], - ["Future Message", "John Doe"], - ["Expired Message", "Jane Doe"], - ["Retired Message", "Some Guy"] + ['Template 1', 'Requester Jerry'], + ['Template 2', 'Test user 1'], + ['Order66', 'Test user 2'], + ['Live Message', 'Another Person'], + ['Future Message', 'John Doe'], + ['Expired Message', 'Jane Doe'], + ['Retired Message', 'Some Guy'], ]; function createData(id, message, requester) { @@ -137,53 +138,51 @@ class MessageManager extends Component { } return rows; } + /* eslint-enable */ getMessages(pageNum) { const THIRTYROWS = 30; const messages = this.buildTestData(THIRTYROWS, 0); this.setState({ - filteredMessages: messages + filteredMessages: messages, }); } getMuiTheme = () => createTheme({ typography: { - useNextVariants: true + useNextVariants: true, }, overrides: { MUIDataTable: { - root: {} + root: {}, }, MUIDataTableBodyRow: { root: { - "&:nth-child(odd)": { - backgroundColor: "#f6f6f6" - } - } + '&:nth-child(odd)': { + backgroundColor: '#f6f6f6', + }, + }, }, - MUIDataTableBodyCell: {} - } + MUIDataTableBodyCell: {}, + }, }); // eslint-disable-next-line max-lines-per-function render() { - const { classes } = this.props; + const {} = this.props; const { filteredMessages } = this.state; return ( - + ); } } + MessageManager.propTypes = { - classes: PropTypes.object.isRequired + classes: PropTypes.object.isRequired, }; -export default withStyles(MessageManager, styles); \ No newline at end of file +export default MessageManager; diff --git a/examples/large-data-set/index.js b/examples/large-data-set/index.js index 90fa24dcd..2396ee396 100644 --- a/examples/large-data-set/index.js +++ b/examples/large-data-set/index.js @@ -1,40 +1,72 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import MUIDataTable from "../../src/"; -import { debounceSearchRender } from "../../src/"; +import React from 'react'; +import MUIDataTable, { debounceSearchRender } from '../../src/'; import { Button } from '@mui/material'; class Example extends React.Component { - constructor(props) { super(props); - const rand = (size) => { - return Math.floor( Math.random() * size ); + const rand = size => { + return Math.floor(Math.random() * size); }; - const firstNames = ['Adam', 'Jack', 'Edward', 'Donna', 'Sarah', 'Suzie', 'Sam', 'RJ', 'Henry', 'Ryan', 'Ricky', 'James']; - const lastNames = ['Ronson', 'Johnson', 'Jackson', 'Campo', 'Edwards', 'Brown', 'Green', 'White', 'Simmons', 'Gates', 'Jobs']; - const titles = ['Owner', 'Unemployed', 'Burger Flipper', 'Coder', 'Business Analyst', 'Attorney', 'Consultant', 'Singer','Painter']; - const locations = ['New York', 'El Paso', 'DC', 'Dallas', 'Santa Ana','St. Petersburg', 'London','Paris']; + const firstNames = [ + 'Adam', + 'Jack', + 'Edward', + 'Donna', + 'Sarah', + 'Suzie', + 'Sam', + 'RJ', + 'Henry', + 'Ryan', + 'Ricky', + 'James', + ]; + const lastNames = [ + 'Ronson', + 'Johnson', + 'Jackson', + 'Campo', + 'Edwards', + 'Brown', + 'Green', + 'White', + 'Simmons', + 'Gates', + 'Jobs', + ]; + const titles = [ + 'Owner', + 'Unemployed', + 'Burger Flipper', + 'Coder', + 'Business Analyst', + 'Attorney', + 'Consultant', + 'Singer', + 'Painter', + ]; + const locations = ['New York', 'El Paso', 'DC', 'Dallas', 'Santa Ana', 'St. Petersburg', 'London', 'Paris']; const salarys = ['$100,000', '$50,000', '$75,000', '$80,000']; var data = []; var name = ''; for (var ii = 0; ii < 5000; ii++) { - name = firstNames[ rand(firstNames.length)] + ' ' + lastNames[ rand(lastNames.length) ]; + name = firstNames[rand(firstNames.length)] + ' ' + lastNames[rand(lastNames.length)]; data.push({ name: name, - title: titles[ rand(titles.length)], - location: locations[ rand(locations.length) ], - salary: salarys[ rand(salarys.length )], + title: titles[rand(titles.length)], + location: locations[rand(locations.length)], + salary: salarys[rand(salarys.length)], phone: '555-5555', email: name.replace(/ /g, '_').toLowerCase() + '@example.com', }); } this.state = { - data: data + data: data, }; console.time('Render Time'); } @@ -44,80 +76,79 @@ class Example extends React.Component { } render() { - const columns = [ { - name: "name", - label: "Name", + name: 'name', + label: 'Name', options: { filter: true, - customBodyRenderLite: (dataIndex) => { + customBodyRenderLite: dataIndex => { let val = this.state.data[dataIndex].name; return val; - } - } - }, + }, + }, + }, { - name: "title", - label: "Modified Title Label", + name: 'title', + label: 'Modified Title Label', options: { filter: true, - customBodyRenderLite: (dataIndex) => { + customBodyRenderLite: dataIndex => { let val = this.state.data[dataIndex].title; return val; - } - } + }, + }, }, - { - name: "location", - label: "Location", + { + name: 'location', + label: 'Location', options: { filter: false, - } + }, }, { - name: "age", - label: "Age", + name: 'age', + label: 'Age', options: { filter: true, - } + }, }, { - name: "salary", - label: "Salary", + name: 'salary', + label: 'Salary', options: { filter: true, sort: false, - customBodyRenderLite: (dataIndex) => { + customBodyRenderLite: dataIndex => { let val = this.state.data[dataIndex].salary; return val; - } - } + }, + }, }, { - name: "phone", - label: "Phone", + name: 'phone', + label: 'Phone', options: { filter: true, sort: false, - customBodyRenderLite: (dataIndex) => { + customBodyRenderLite: dataIndex => { let val = this.state.data[dataIndex].phone; return val; - } - } + }, + }, }, { - name: "email", - label: "E-mail", + name: 'email', + label: 'E-mail', options: { filter: true, sort: false, - customBodyRenderLite: (dataIndex) => { + customBodyRenderLite: dataIndex => { let val = this.state.data[dataIndex].email; return val; - } - } - } + }, + }, + }, ]; const options = { @@ -126,7 +157,7 @@ class Example extends React.Component { filter: true, filterType: 'dropdown', responsive: 'vertical', - tableBodyHeight:'500px', + tableBodyHeight: '500px', customSearchRender: debounceSearchRender(500), jumpToPage: true, @@ -137,16 +168,15 @@ class Example extends React.Component { customFilterDialogFooter: (currentFilterList, applyNewFilters) => { return (
- +
); - } + }, }; - return ( - - ); - + return ; } } diff --git a/examples/on-download/index.js b/examples/on-download/index.js index 4a01eccfc..bcf46d430 100644 --- a/examples/on-download/index.js +++ b/examples/on-download/index.js @@ -1,5 +1,4 @@ import React from 'react'; -import ReactDOM from 'react-dom'; import MUIDataTable from '../../src'; class Example extends React.Component { diff --git a/examples/on-table-init/index.js b/examples/on-table-init/index.js index adfad7870..38017e9e5 100644 --- a/examples/on-table-init/index.js +++ b/examples/on-table-init/index.js @@ -1,5 +1,4 @@ import React from 'react'; -import ReactDOM from 'react-dom'; import MUIDataTable from '../../src'; class Example extends React.Component { @@ -7,7 +6,7 @@ class Example extends React.Component { super(props); this.state = { - table: {} + table: {}, }; this.handleTableInit = this.handleTableInit.bind(this); this.handleTableChange = this.handleTableChange.bind(this); diff --git a/examples/resizable-columns/index.js b/examples/resizable-columns/index.js index 7150526a7..35831bb90 100644 --- a/examples/resizable-columns/index.js +++ b/examples/resizable-columns/index.js @@ -1,6 +1,5 @@ -import React, { useState } from "react"; -import ReactDOM from "react-dom"; -import MUIDataTable from "../../src/"; +import React, { useState } from 'react'; +import MUIDataTable from '../../src/'; import FormControl from '@mui/material/FormControl'; import TextField from '@mui/material/TextField'; @@ -9,36 +8,36 @@ import FormGroup from '@mui/material/FormGroup'; import FormControlLabel from '@mui/material/FormControlLabel'; function Example(props) { - const [marginLeft, setMarginLeft] = useState(10); - const [selectableRows, setSelectableRows] = useState("multiple"); + const [selectableRows, setSelectableRows] = useState('multiple'); const [counter, setCounter] = useState(1); - const incrCount = () => { // We update an arbitrary value here to test table resizing on state updates + const incrCount = () => { + // We update an arbitrary value here to test table resizing on state updates setCounter(counter + 1); }; const columns = [ { - name: "Counter", + name: 'Counter', options: { sort: false, empty: true, - customBodyRender: value => - } + customBodyRender: value => , + }, }, { - name: "Name", + name: 'Name', options: { - hint: "?", - setCellProps: () => ({style: {whiteSpace:'nowrap'}}) - } + hint: '?', + setCellProps: () => ({ style: { whiteSpace: 'nowrap' } }), + }, }, { - name: "Business Title", + name: 'Business Title', options: { - hint: "?", - customBodyRender: (val) => { + hint: '?', + customBodyRender: val => { let parentStyle = { position: 'absolute', top: 0, @@ -56,26 +55,24 @@ function Example(props) { whiteSpace: 'nowrap', }; return ( -
+
-
- {val} -
+
{val}
); - } - } + }, + }, }, - "Location" + 'Location', ]; const data = [ - ["Gabby George ", "Business Analyst", "Minneapolis"], - ["Aiden Lloyd", "Business Consultant at Tony's Burger Palace and CEO of Johnny's Blueberry Sundaes", "Dallas"], - ["Jaden Collins", "Attorney", "Santa Ana"], - ["Franky Rees", "Business Analyst", "St. Petersburg"], - ["Aaren Rose", null, "Toledo"] + ['Gabby George ', 'Business Analyst', 'Minneapolis'], + ['Aiden Lloyd', "Business Consultant at Tony's Burger Palace and CEO of Johnny's Blueberry Sundaes", 'Dallas'], + ['Jaden Collins', 'Attorney', 'Santa Ana'], + ['Franky Rees', 'Business Analyst', 'St. Petersburg'], + ['Aaren Rose', null, 'Toledo'], ]; const options = { @@ -85,20 +82,25 @@ function Example(props) { selectableRows: selectableRows, draggableColumns: { enabled: true, - } + }, }; return ( <> - setMarginLeft(e.target.value)} /> + setMarginLeft(e.target.value)} + /> setSelectableRows(event.target.checked ? "multiple" : "none")} + checked={selectableRows === 'multiple'} + onChange={e => setSelectableRows(event.target.checked ? 'multiple' : 'none')} value="true" color="primary" /> @@ -106,12 +108,17 @@ function Example(props) { label="Selectable Rows" /> -
- +
+
- +
- +
); diff --git a/examples/selectable-rows/index.js b/examples/selectable-rows/index.js index 6041c67b5..b72940ff6 100644 --- a/examples/selectable-rows/index.js +++ b/examples/selectable-rows/index.js @@ -1,41 +1,40 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import MUIDataTable from "../../src/"; +import React from 'react'; +import MUIDataTable from '../../src/'; import Switch from '@mui/material/Switch'; import FormGroup from '@mui/material/FormGroup'; import FormControlLabel from '@mui/material/FormControlLabel'; const data = [ - ["Gabby George", "Business Analyst", "Minneapolis", 30, 100000], - ["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, 142000] + ['Gabby George', 'Business Analyst', 'Minneapolis', 30, 100000], + ['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, 142000], ]; class Example extends React.Component { @@ -44,27 +43,20 @@ class Example extends React.Component { data: data, }; - updateSelectableRowsHideCheckboxes = (event) => { + updateSelectableRowsHideCheckboxes = event => { this.setState({ - selectableRowsHideCheckboxes: event.target.checked + selectableRowsHideCheckboxes: event.target.checked, }); - } + }; render() { - - const columns = [ - "Name", - "Title", - "Location", - "Age", - { name: "Salary", options: { hint: "USD / year"}} - ]; + const columns = ['Name', 'Title', 'Location', 'Age', { name: 'Salary', options: { hint: 'USD / year' } }]; const options = { textLabels: { body: { noMatch: '', - } + }, }, filter: true, selectableRows: 'multiple', @@ -83,19 +75,19 @@ class Example extends React.Component { console.dir(rowsDeleted); console.dir(newData); if (rowsDeleted && rowsDeleted.data && rowsDeleted.data[0] && rowsDeleted.data[0].dataIndex === 0) { - window.alert('Can\'t delete this!'); + window.alert("Can't delete this!"); return false; - }; - this.setState({ + } + this.setState({ data: newData, - rowsSelected: [] + rowsSelected: [], }); - console.log(rowsDeleted, "were deleted!"); + console.log(rowsDeleted, 'were deleted!'); }, - onChangePage: (numberRows) => { + onChangePage: numberRows => { console.log(numberRows); }, - onSearchChange: (searchText) => { + onSearchChange: searchText => { console.log(searchText); }, onColumnSortChange: (column, direction) => { @@ -115,11 +107,12 @@ class Example extends React.Component { }, isRowSelectable: (dataIndex, selectedRows) => { //prevents selection of any additional row after the third - if (selectedRows.data.length > 2 && selectedRows.data.filter(d => d.dataIndex === dataIndex).length === 0) return false; + if (selectedRows.data.length > 2 && selectedRows.data.filter(d => d.dataIndex === dataIndex).length === 0) + return false; //prevents selection of row with title "Attorney" - return data[dataIndex][1] != "Attorney"; + return data[dataIndex][1] != 'Attorney'; }, - selectableRowsHeader: false + selectableRowsHeader: false, }; return ( @@ -138,10 +131,9 @@ class Example extends React.Component { label="Hide Checkboxes" /> - + ); - } } diff --git a/examples/serverside-filters/index.js b/examples/serverside-filters/index.js index 3e8e7819a..f2421f569 100644 --- a/examples/serverside-filters/index.js +++ b/examples/serverside-filters/index.js @@ -1,6 +1,5 @@ import { Button, CircularProgress } from '@mui/material'; import React from 'react'; -import ReactDOM from 'react-dom'; import MUIDataTable from '../../src'; const theData = [ @@ -39,45 +38,41 @@ const theData = [ class Example extends React.Component { state = { isLoading: false, - data: theData + data: theData, }; // mock async function xhrRequest = (url, filterList) => { return new Promise(resolve => { - window.setTimeout( - () => { - const data = theData; + window.setTimeout(() => { + const data = theData; - if ( - filterList.reduce( (accu, cur) => accu + cur.length, 0) === 0 - ) { - resolve({ data }); - } else { - - /* + if (filterList.reduce((accu, cur) => accu + cur.length, 0) === 0) { + resolve({ data }); + } else { + /* This code simulates filtering that would occur on the back-end */ - var filteredData = data.filter(row => { - var ret = true; - - for (var ii = 0; ii <= 4; ii++) { - if (filterList[ii] && filterList[ii].length) { - ret = ret && filterList[ii].filter(ff => { + var filteredData = data.filter(row => { + var ret = true; + + for (var ii = 0; ii <= 4; ii++) { + if (filterList[ii] && filterList[ii].length) { + ret = + ret && + filterList[ii].filter(ff => { return row[ii] == ff; }).length > 0; - } } - return ret; - }); + } + return ret; + }); - resolve({ data: filteredData }); - } - }, - 2000 - ); + resolve({ data: filteredData }); + } + }, 2000); }); - } + }; handleFilterSubmit = applyFilters => { let filterList = applyFilters(); @@ -133,21 +128,23 @@ class Example extends React.Component { rowsPerPage: 50, rowsPerPageOptions: [50], - // makes it so filters have to be "confirmed" before being applied to the + // makes it so filters have to be "confirmed" before being applied to the // table's internal filterList - confirmFilters: true, + confirmFilters: true, - // Calling the applyNewFilters parameter applies the selected filters to the table + // Calling the applyNewFilters parameter applies the selected filters to the table customFilterDialogFooter: (currentFilterList, applyNewFilters) => { return (
- +
); }, // callback that gets executed when filters are confirmed - onFilterConfirm: (filterList) => { + onFilterConfirm: filterList => { console.log('onFilterConfirm'); console.dir(filterList); }, @@ -160,7 +157,7 @@ class Example extends React.Component { }, onFilterChange: (column, filterList, type) => { if (type === 'chip') { - var newFilters = () => (filterList); + var newFilters = () => filterList; console.log('updating filters via chip'); this.handleFilterSubmit(newFilters); } diff --git a/examples/serverside-sorting/cities.js b/examples/serverside-sorting/cities.js index 0de7fbfaa..c6110094e 100644 --- a/examples/serverside-sorting/cities.js +++ b/examples/serverside-sorting/cities.js @@ -398,6 +398,7 @@ class Cities extends React.Component { 'Yakima', 'Yonkers', 'York', + 'Youngstown', ]; diff --git a/examples/serverside-sorting/index.js b/examples/serverside-sorting/index.js index 807132f56..b5dd34de6 100644 --- a/examples/serverside-sorting/index.js +++ b/examples/serverside-sorting/index.js @@ -1,5 +1,4 @@ import React from 'react'; -import ReactDOM from 'react-dom'; import MUIDataTable from '../../src'; import { CircularProgress, Typography } from '@mui/material'; import Cities from './cities'; @@ -76,8 +75,8 @@ class Example extends React.Component { if (order === 'asc') { var tempData = srcData.sort((a, b) => { - if ( a[sortCol] < b[sortCol] ) return -1; - if ( a[sortCol] > b[sortCol] ) return 1; + if (a[sortCol] < b[sortCol]) return -1; + if (a[sortCol] > b[sortCol]) return 1; return 0; }); @@ -87,8 +86,8 @@ class Example extends React.Component { : tempData.slice(offset, offset + 10); } else { tempData = srcData.sort((a, b) => { - if ( a[sortCol] < b[sortCol] ) return 1; - if ( a[sortCol] > b[sortCol] ) return -1; + if (a[sortCol] < b[sortCol]) return 1; + if (a[sortCol] > b[sortCol]) return -1; return 0; }); @@ -97,7 +96,6 @@ class Example extends React.Component { ? tempData.slice(offset, srcData.length) : tempData.slice(offset, offset + 10); } - } else { data = offset + 10 >= srcData.length ? srcData.slice(offset, srcData.length) : srcData.slice(offset, offset + 10); @@ -120,8 +118,8 @@ class Example extends React.Component { data, sortOrder: { name: column, - direction: order - } + direction: order, + }, }); }); }; @@ -133,7 +131,7 @@ class Example extends React.Component { options: { customFilterListOptions: { render: v => `Name: ${v}`, - } + }, }, }, { @@ -141,7 +139,7 @@ class Example extends React.Component { options: { customFilterListOptions: { render: v => `Title: ${v}`, - } + }, }, }, { @@ -179,11 +177,11 @@ class Example extends React.Component { this.sort(changedColumn, order); }, - onChangePage: (page) => { - this.setState({page}, () => { + onChangePage: page => { + this.setState({ page }, () => { this.sort(this.state.sortOrder.name, this.state.sortOrder.direction); }); - } + }, }; return ( diff --git a/examples/simple-no-toolbar/index.js b/examples/simple-no-toolbar/index.js index ddadc0314..f7768075a 100644 --- a/examples/simple-no-toolbar/index.js +++ b/examples/simple-no-toolbar/index.js @@ -1,17 +1,16 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import MUIDataTable from "../../src/"; +import React from 'react'; +import MUIDataTable from '../../src/'; class Example extends React.Component { render() { - const columns = ["Name", "Title", "Location"]; + const columns = ['Name', 'Title', 'Location']; const data = [ - ["Gabby George", "Business Analyst", "Minneapolis"], - ["Aiden Lloyd", "Business Consultant", "Dallas"], - ["Jaden Collins", "Attorney", "Santa Ana"], - ["Franky Rees", "Business Analyst", "St. Petersburg"], - ["Aaren Rose", null, "Toledo"] + ['Gabby George', 'Business Analyst', 'Minneapolis'], + ['Aiden Lloyd', 'Business Consultant', 'Dallas'], + ['Jaden Collins', 'Attorney', 'Santa Ana'], + ['Franky Rees', 'Business Analyst', 'St. Petersburg'], + ['Aaren Rose', null, 'Toledo'], ]; const options = { @@ -21,12 +20,10 @@ class Example extends React.Component { download: false, viewColumns: false, customToolbar: null, - responsive: 'vertical' + responsive: 'vertical', }; - return ( - - ); + return ; } } diff --git a/examples/text-localization/index.js b/examples/text-localization/index.js index 9da848a01..fcf87b8ba 100644 --- a/examples/text-localization/index.js +++ b/examples/text-localization/index.js @@ -1,44 +1,41 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import MUIDataTable from "../../src/"; +import React from 'react'; +import MUIDataTable from '../../src/'; class Example extends React.Component { - render() { - - const columns = ["Name", "Title", "Location", "Age", "Salary"]; + const columns = ['Name', 'Title', 'Location', 'Age', 'Salary']; const data = [ - ["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"] + ['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'], ]; const options = { @@ -47,29 +44,26 @@ class Example extends React.Component { responsive: 'vertical', textLabels: { body: { - noMatch: "Sorry we could not find any records!", + noMatch: 'Sorry we could not find any records!', }, - pagination:{ - next: "Following page", - previous: "Preceding page" + pagination: { + next: 'Following page', + previous: 'Preceding page', }, filter: { - all: "All Records", - title: "OUR FILTERS", - reset: "PERFORM RESET", + all: 'All Records', + title: 'OUR FILTERS', + reset: 'PERFORM RESET', }, selectedRows: { - text: "rows has been deleted", - delete: "Delete Row", - deleteAria: "Deleted Selected Rows" + text: 'rows has been deleted', + delete: 'Delete Row', + deleteAria: 'Deleted Selected Rows', }, - } + }, }; - return ( - - ); - + return ; } } diff --git a/package.json b/package.json index 361215c7f..78dd51e2c 100644 --- a/package.json +++ b/package.json @@ -99,15 +99,13 @@ "@mui/icons-material": "^5.0.1", "@mui/material": "^5.0.1", "react": "^16.8.0 || ^17.0.2", - "react-dom": "^16.8.0 || ^17.0.2", - "tss-react": "^3.4.1" + "react-dom": "^16.8.0 || ^17.0.2" }, "dependencies": { "@babel/runtime-corejs3": "^7.12.1", "@emotion/react": "^11.4.1", "@emotion/styled": "^11.3.0", "@emotion/cache": "^11.7.1", - "tss-react": "^3.4.1", "clsx": "^1.1.1", "lodash.assignwith": "^4.2.0", "lodash.clonedeep": "^4.5.0", diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js index 3e11cd945..81d6dac28 100644 --- a/src/MUIDataTable.js +++ b/src/MUIDataTable.js @@ -1,7 +1,6 @@ import Paper from '@mui/material/Paper'; import MuiTable from '@mui/material/Table'; import MuiTooltip from '@mui/material/Tooltip'; -import { withStyles } from 'tss-react/mui'; import clsx from 'clsx'; import assignwith from 'lodash.assignwith'; import cloneDeep from 'lodash.clonedeep'; @@ -10,6 +9,7 @@ import isEqual from 'lodash.isequal'; import isUndefined from 'lodash.isundefined'; import merge from 'lodash.merge'; import PropTypes from 'prop-types'; +import { styled } from '@mui/material/styles'; import React from 'react'; import DefaultTableBody from './components/TableBody'; import DefaultTableFilter from './components/TableFilter'; @@ -25,16 +25,33 @@ import { DndProvider } from 'react-dnd'; import { HTML5Backend } from 'react-dnd-html5-backend'; import { load, save } from './localStorage'; -const defaultTableStyles = theme => ({ - root: {}, - paper: {}, - paperResponsiveScrollFullHeightFullWidth: { +const PREFIX = 'MUIDataTable'; + +const classes = { + root: `${PREFIX}-root`, + paper: `${PREFIX}-paper`, + paperResponsiveScrollFullHeightFullWidth: `${PREFIX}-paperResponsiveScrollFullHeightFullWidth`, + tableRoot: `${PREFIX}-tableRoot`, + responsiveBase: `${PREFIX}-responsiveBase`, + responsiveScroll: `${PREFIX}-responsiveScroll`, + responsiveScrollMaxHeight: `${PREFIX}-responsiveScrollMaxHeight`, + responsiveScrollFullHeight: `${PREFIX}-responsiveScrollFullHeight`, + responsiveStacked: `${PREFIX}-responsiveStacked`, + responsiveStackedFullWidth: `${PREFIX}-responsiveStackedFullWidth`, + caption: `${PREFIX}-caption`, + liveAnnounce: `${PREFIX}-liveAnnounce`, +}; + +const StyledMuiTable = styled(Paper)(({ theme }) => ({ + [`& .${classes.root}`]: {}, + [`& .${classes.paper}`]: {}, + [`& .${classes.paperResponsiveScrollFullHeightFullWidth}`]: { position: 'absolute', }, - tableRoot: { + [`& .${classes.tableRoot}`]: { outline: 'none', }, - responsiveBase: { + [`& .${classes.responsiveBase}`]: { overflow: 'auto', '@media print': { height: 'auto !important', @@ -42,34 +59,35 @@ const defaultTableStyles = theme => ({ }, // deprecated, but continuing support through v3.x - responsiveScroll: { + [`& .${classes.responsiveScroll}`]: { overflow: 'auto', height: '100%', }, // deprecated, but continuing support through v3.x - responsiveScrollMaxHeight: { + [`& .${classes.responsiveScrollMaxHeight}`]: { overflow: 'auto', height: '100%', }, // deprecated, but continuing support through v3.x - responsiveScrollFullHeight: { + [`& .${classes.responsiveScrollFullHeight}`]: { height: '100%', }, // deprecated, but continuing support through v3.x - responsiveStacked: { + [`& .${classes.responsiveStacked}`]: { overflow: 'auto', [theme.breakpoints.down('md')]: { overflow: 'hidden', }, }, // deprecated, but continuing support through v3.x - responsiveStackedFullWidth: {}, - caption: { + [`& .${classes.responsiveStackedFullWidth}`]: {}, + + [`& .${classes.caption}`]: { position: 'absolute', left: '-3000px', }, - liveAnnounce: { + [`& .${classes.liveAnnounce}`]: { border: '0', clip: 'rect(0 0 0 0)', height: '1px', @@ -86,7 +104,7 @@ const defaultTableStyles = theme => ({ }, }, }, -}); +})); const TABLE_LOAD = { INITIAL: 1, @@ -1216,7 +1234,6 @@ class MUIDataTable extends React.Component { } getTableProps() { - const { classes } = this.props; const tableProps = this.options.setTableProps() || {}; tableProps.className = clsx(classes.tableRoot, tableProps.className); @@ -1822,7 +1839,6 @@ class MUIDataTable extends React.Component { render() { const { - classes, className, title, components: { @@ -1930,7 +1946,7 @@ class MUIDataTable extends React.Component { } return ( - + {selectedRows.data.length > 0 && this.options.selectToolbarPlacement !== STP.NONE && ( {announceText}
- + ); } } -export default withStyles(MUIDataTable, defaultTableStyles, { name: 'MUIDataTable' }); +export default MUIDataTable; diff --git a/src/components/JumpToPage.js b/src/components/JumpToPage.js index 048a888c7..06d1427dd 100644 --- a/src/components/JumpToPage.js +++ b/src/components/JumpToPage.js @@ -1,27 +1,41 @@ import React from 'react'; +import { styled } from '@mui/material/styles'; import PropTypes from 'prop-types'; import InputBase from '@mui/material/InputBase'; import MenuItem from '@mui/material/MenuItem'; import Select from '@mui/material/Select'; import Toolbar from '@mui/material/Toolbar'; import Typography from '@mui/material/Typography'; -import { makeStyles } from 'tss-react/mui'; import { getPageValue } from '../utils.js'; import clsx from 'clsx'; -const useStyles = makeStyles({ name: 'MUIDataTableJumpToPage' })(theme => ({ - root: { +const PREFIX = 'MUIDataTableJumpToPage'; + +const classes = { + root: `${PREFIX}-root`, + caption: `${PREFIX}-caption`, + selectRoot: `${PREFIX}-selectRoot`, + select: `${PREFIX}-select`, + selectIcon: `${PREFIX}-selectIcon`, + input: `${PREFIX}-input`, +}; + +const StyledToolbar = styled(Toolbar)(({ theme }) => ({ + [`&.${classes.root}`]: { color: theme.palette.text.primary, }, - caption: { + + [`& .${classes.caption}`]: { flexShrink: 0, }, + /*  Styles applied to the Select component root element */ - selectRoot: { + [`& .${classes.selectRoot}`]: { marginRight: 32, marginLeft: 8, }, - select: { + + [`& .${classes.select}`]: { paddingTop: 6, paddingBottom: 7, paddingLeft: 8, @@ -30,10 +44,12 @@ const useStyles = makeStyles({ name: 'MUIDataTableJumpToPage' })(theme => ({ textAlignLast: 'right', fontSize: theme.typography.pxToRem(14), }, + /* Styles applied to Select component icon class */ - selectIcon: {}, + [`& .${classes.selectIcon}`]: {}, + /* Styles applied to InputBase component */ - input: { + [`& .${classes.input}`]: { color: 'inhert', fontSize: 'inhert', flexShrink: 0, @@ -41,8 +57,6 @@ const useStyles = makeStyles({ name: 'MUIDataTableJumpToPage' })(theme => ({ })); function JumpToPage(props) { - const { classes } = useStyles(); - const handlePageChange = event => { props.changePage(parseInt(event.target.value, 10)); }; @@ -66,7 +80,7 @@ function JumpToPage(props) { }; return ( - + {textLabel} @@ -82,7 +96,7 @@ function JumpToPage(props) { ))} - + ); } diff --git a/src/components/TableBody.js b/src/components/TableBody.js index ebfc4a75d..31d5a2e45 100644 --- a/src/components/TableBody.js +++ b/src/components/TableBody.js @@ -1,35 +1,47 @@ import React from 'react'; +import { styled } from '@mui/material/styles'; import PropTypes from 'prop-types'; import Typography from '@mui/material/Typography'; import MuiTableBody from '@mui/material/TableBody'; import TableBodyCell from './TableBodyCell'; import TableBodyRow from './TableBodyRow'; import TableSelectCell from './TableSelectCell'; -import { withStyles } from 'tss-react/mui'; import cloneDeep from 'lodash.clonedeep'; import { getPageValue } from '../utils'; import clsx from 'clsx'; -const defaultBodyStyles = theme => ({ - root: {}, - emptyTitle: { +const PREFIX = 'MUIDataTableBody'; + +const classes = { + root: `${PREFIX}-root`, + emptyTitle: `${PREFIX}-emptyTitle`, + lastStackedCell: `${PREFIX}-lastStackedCell`, + lastSimpleCell: `${PREFIX}-lastSimpleCell`, +}; + +const StyledMuiTableBody = styled(MuiTableBody)(({ theme }) => ({ + [`& .${classes.root}`]: {}, + + [`& .${classes.emptyTitle}`]: { textAlign: 'center', }, - lastStackedCell: { + + [`& .${classes.lastStackedCell}`]: { [theme.breakpoints.down('md')]: { '& td:last-child': { borderBottom: 'none', }, }, }, - lastSimpleCell: { + + [`& .${classes.lastSimpleCell}`]: { [theme.breakpoints.down('sm')]: { '& td:last-child': { borderBottom: 'none', }, }, }, -}); +})); class TableBody extends React.Component { static propTypes = { @@ -223,7 +235,6 @@ class TableBody extends React.Component { render() { const { - classes, columns, toggleExpandRow, options, @@ -235,7 +246,7 @@ class TableBody extends React.Component { const visibleColCnt = columns.filter(c => c.display === 'true').length; return ( - + {tableRows && tableRows.length > 0 ? ( tableRows.map((data, rowIndex) => { const { data: row, dataIndex } = data; @@ -330,9 +341,9 @@ class TableBody extends React.Component { )} - + ); } } -export default withStyles(TableBody, defaultBodyStyles, { name: 'MUIDataTableBody' }); +export default TableBody; diff --git a/src/components/TableBodyCell.js b/src/components/TableBodyCell.js index f4229b84b..69f17e949 100644 --- a/src/components/TableBodyCell.js +++ b/src/components/TableBodyCell.js @@ -1,14 +1,33 @@ import React, { useCallback } from 'react'; +import { styled } from '@mui/material/styles'; import clsx from 'clsx'; import TableCell from '@mui/material/TableCell'; -import { makeStyles } from 'tss-react/mui'; -const useStyles = makeStyles({ name: 'MUIDataTableBodyCell' })(theme => ({ - root: {}, - cellHide: { +const PREFIX = 'MUIDataTableBodyCell'; + +const classes = { + root: `${PREFIX}-root`, + cellHide: `${PREFIX}-cellHide`, + simpleHeader: `${PREFIX}-simpleHeader`, + simpleCell: `${PREFIX}-simpleCell`, + stackedHeader: `${PREFIX}-stackedHeader`, + stackedCommon: `${PREFIX}-stackedCommon`, + stackedCommonAlways: `${PREFIX}-stackedCommonAlways`, + stackedParent: `${PREFIX}-stackedParent`, + stackedParentAlways: `${PREFIX}-stackedParentAlways`, + cellStackedSmall: `${PREFIX}-cellStackedSmall`, + responsiveStackedSmall: `${PREFIX}-responsiveStackedSmall`, + responsiveStackedSmallParent: `${PREFIX}-responsiveStackedSmallParent`, +}; + +const StyledTableCell = styled(TableCell)(({ theme }) => ({ + [`&.${classes.root}`]: {}, + + [`& .${classes.cellHide}`]: { display: 'none', }, - simpleHeader: { + + [`& .${classes.simpleHeader}`]: { [theme.breakpoints.down('sm')]: { display: 'inline-block', fontWeight: 'bold', @@ -16,17 +35,20 @@ const useStyles = makeStyles({ name: 'MUIDataTableBodyCell' })(theme => ({ boxSizing: 'border-box', }, }, - simpleCell: { + + [`&.${classes.simpleCell}`]: { [theme.breakpoints.down('sm')]: { display: 'inline-block', width: '100%', boxSizing: 'border-box', }, }, - stackedHeader: { + + [`& .${classes.stackedHeader}`]: { verticalAlign: 'top', }, - stackedCommon: { + + [`& .${classes.stackedCommon}`]: { [theme.breakpoints.down('md')]: { display: 'inline-block', fontSize: '16px', @@ -41,7 +63,8 @@ const useStyles = makeStyles({ name: 'MUIDataTableBodyCell' })(theme => ({ }, }, }, - stackedCommonAlways: { + + [`& .${classes.stackedCommonAlways}`]: { display: 'inline-block', fontSize: '16px', height: 'auto', @@ -54,7 +77,8 @@ const useStyles = makeStyles({ name: 'MUIDataTableBodyCell' })(theme => ({ borderBottom: 'none', }, }, - stackedParent: { + + [`&.${classes.stackedParent}`]: { [theme.breakpoints.down('md')]: { display: 'inline-block', fontSize: '16px', @@ -63,26 +87,30 @@ const useStyles = makeStyles({ name: 'MUIDataTableBodyCell' })(theme => ({ boxSizing: 'border-box', }, }, - stackedParentAlways: { + + [`&.${classes.stackedParentAlways}`]: { display: 'inline-block', fontSize: '16px', height: 'auto', width: 'calc(100%)', boxSizing: 'border-box', }, - cellStackedSmall: { + + [`& .${classes.cellStackedSmall}`]: { [theme.breakpoints.down('md')]: { width: '50%', boxSizing: 'border-box', }, }, - responsiveStackedSmall: { + + [`& .${classes.responsiveStackedSmall}`]: { [theme.breakpoints.down('md')]: { width: '50%', boxSizing: 'border-box', }, }, - responsiveStackedSmallParent: { + + [`&.${classes.responsiveStackedSmallParent}`]: { [theme.breakpoints.down('md')]: { width: '100%', boxSizing: 'border-box', @@ -91,7 +119,6 @@ const useStyles = makeStyles({ name: 'MUIDataTableBodyCell' })(theme => ({ })); function TableBodyCell(props) { - const { classes } = useStyles(); const { children, colIndex, @@ -177,7 +204,7 @@ function TableBodyCell(props) { } return ( - {innerCells} - + ); } diff --git a/src/components/TableBodyRow.js b/src/components/TableBodyRow.js index 51c783cd0..6541ebf06 100644 --- a/src/components/TableBodyRow.js +++ b/src/components/TableBodyRow.js @@ -1,11 +1,20 @@ import React from 'react'; +import { styled } from '@mui/material/styles'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import TableRow from '@mui/material/TableRow'; -import { withStyles } from 'tss-react/mui'; -const defaultBodyRowStyles = theme => ({ - root: { +const PREFIX = 'MUIDataTableBodyRow'; + +const classes = { + root: `${PREFIX}-root`, + hoverCursor: `${PREFIX}-hoverCursor`, + responsiveStacked: `${PREFIX}-responsiveStacked`, + responsiveSimple: `${PREFIX}-responsiveSimple`, +}; + +const StyledTableRow = styled(TableRow)(({ theme }) => ({ + [`&.${classes.root}`]: { // material v4 '&.Mui-selected': { backgroundColor: theme.palette.action.selected, @@ -16,8 +25,10 @@ const defaultBodyRowStyles = theme => ({ backgroundColor: theme.palette.action.selected, }, }, - hoverCursor: { cursor: 'pointer' }, - responsiveStacked: { + + [`&.${classes.hoverCursor}`]: { cursor: 'pointer' }, + + [`&.${classes.responsiveStacked}`]: { [theme.breakpoints.down('md')]: { borderTop: 'solid 2px rgba(0, 0, 0, 0.15)', borderBottom: 'solid 2px rgba(0, 0, 0, 0.15)', @@ -25,7 +36,8 @@ const defaultBodyRowStyles = theme => ({ margin: 0, }, }, - responsiveSimple: { + + [`&.${classes.responsiveSimple}`]: { [theme.breakpoints.down('sm')]: { borderTop: 'solid 2px rgba(0, 0, 0, 0.15)', borderBottom: 'solid 2px rgba(0, 0, 0, 0.15)', @@ -33,7 +45,7 @@ const defaultBodyRowStyles = theme => ({ margin: 0, }, }, -}); +})); class TableBodyRow extends React.Component { static propTypes = { @@ -48,7 +60,7 @@ class TableBodyRow extends React.Component { }; render() { - const { classes, options, rowSelected, onClick, className, isRowSelectable, ...rest } = this.props; + const { options, rowSelected, onClick, className, isRowSelectable, ...rest } = this.props; var methods = {}; if (onClick) { @@ -56,7 +68,7 @@ class TableBodyRow extends React.Component { } return ( - {this.props.children} - + ); } } -export default withStyles(TableBodyRow, defaultBodyRowStyles, { name: 'MUIDataTableBodyRow' }); +export default TableBodyRow; diff --git a/src/components/TableFilter.js b/src/components/TableFilter.js index d23283448..6b116de0f 100644 --- a/src/components/TableFilter.js +++ b/src/components/TableFilter.js @@ -1,4 +1,5 @@ import Button from '@mui/material/Button'; +import { styled } from '@mui/material/styles'; import Checkbox from '@mui/material/Checkbox'; import FormControl from '@mui/material/FormControl'; import FormControlLabel from '@mui/material/FormControlLabel'; @@ -14,45 +15,71 @@ import Select from '@mui/material/Select'; import TextField from '@mui/material/TextField'; import Typography from '@mui/material/Typography'; import clsx from 'clsx'; -import { withStyles } from 'tss-react/mui'; import cloneDeep from 'lodash.clonedeep'; -export const defaultFilterStyles = theme => ({ - root: { +const PREFIX = 'MUIDataTableFilter'; + +const classes = { + root: `${PREFIX}-root`, + header: `${PREFIX}-header`, + title: `${PREFIX}-title`, + noMargin: `${PREFIX}-noMargin`, + reset: `${PREFIX}-reset`, + resetLink: `${PREFIX}-resetLink`, + filtersSelected: `${PREFIX}-filtersSelected`, + checkboxListTitle: `${PREFIX}-checkboxListTitle`, + checkboxFormGroup: `${PREFIX}-checkboxFormGroup`, + checkboxFormControl: `${PREFIX}-checkboxFormControl`, + checkboxFormControlLabel: `${PREFIX}-checkboxFormControlLabel`, + checkboxIcon: `${PREFIX}-checkboxIcon`, + checkbox: `${PREFIX}-checkbox`, + checked: `${PREFIX}-checked`, + gridListTile: `${PREFIX}-gridListTile`, +}; + +const Root = styled('div')(({ theme }) => ({ + [`&.${classes.root}`]: { backgroundColor: theme.palette.background.default, padding: '24px 24px 36px 24px', fontFamily: 'Roboto', }, - header: { + + [`& .${classes.header}`]: { flex: '0 0 auto', marginBottom: '16px', width: '100%', display: 'flex', justifyContent: 'space-between', }, - title: { + + [`& .${classes.title}`]: { display: 'inline-block', marginLeft: '7px', color: theme.palette.text.primary, fontSize: '14px', fontWeight: 500, }, - noMargin: { + + [`& .${classes.noMargin}`]: { marginLeft: '0px', }, - reset: { + + [`& .${classes.reset}`]: { alignSelf: 'left', }, - resetLink: { + + [`& .${classes.resetLink}`]: { marginLeft: '16px', fontSize: '12px', cursor: 'pointer', }, - filtersSelected: { + + [`& .${classes.filtersSelected}`]: { alignSelf: 'right', }, + /* checkbox */ - checkboxListTitle: { + [`& .${classes.checkboxListTitle}`]: { marginLeft: '7px', marginBottom: '8px', fontSize: '14px', @@ -60,27 +87,35 @@ export const defaultFilterStyles = theme => ({ textAlign: 'left', fontWeight: 500, }, - checkboxFormGroup: { + + [`& .${classes.checkboxFormGroup}`]: { marginTop: '8px', }, - checkboxFormControl: { + + [`& .${classes.checkboxFormControl}`]: { margin: '0px', }, - checkboxFormControlLabel: { + + [`& .${classes.checkboxFormControlLabel}`]: { fontSize: '15px', marginLeft: '8px', color: theme.palette.text.primary, }, - checkboxIcon: { + + [`& .${classes.checkboxIcon}`]: { width: '32px', height: '32px', }, - checkbox: {}, - checked: {}, - gridListTile: { + + [`& .${classes.checkbox}`]: {}, + [`& .${classes.checked}`]: {}, + + [`& .${classes.gridListTile}`]: { marginTop: '16px', }, -}); +})); + +export {}; class TableFilter extends React.Component { static propTypes = { @@ -159,7 +194,7 @@ class TableFilter extends React.Component { renderCheckbox(column, index, components = {}) { const CheckboxComponent = components.Checkbox || Checkbox; - const { classes, filterData } = this.props; + const { filterData } = this.props; const { filterList } = this.state; const renderItem = column.filterOptions && column.filterOptions.renderValue ? column.filterOptions.renderValue : v => v; @@ -206,7 +241,7 @@ class TableFilter extends React.Component { } renderSelect(column, index) { - const { classes, filterData, options } = this.props; + const { filterData, options } = this.props; const { filterList } = this.state; const textLabels = options.textLabels.filter; const renderItem = @@ -244,7 +279,7 @@ class TableFilter extends React.Component { } renderTextField(column, index) { - const { classes } = this.props; + const {} = this.props; const { filterList } = this.state; if (column.filterOptions && column.filterOptions.renderValue) { console.warn('Custom renderValue not supported for textField filters'); @@ -274,7 +309,7 @@ class TableFilter extends React.Component { renderMultiselect(column, index, components = {}) { const CheckboxComponent = components.Checkbox || Checkbox; - const { classes, filterData } = this.props; + const { filterData } = this.props; const { filterList } = this.state; const renderItem = column.filterOptions && column.filterOptions.renderValue ? column.filterOptions.renderValue : v => v; @@ -318,7 +353,7 @@ class TableFilter extends React.Component { } renderCustomField(column, index) { - const { classes, filterData, options } = this.props; + const { filterData, options } = this.props; const { filterList } = this.state; const width = (column.filterOptions && column.filterOptions.fullWidth) === true ? 12 : 6; const display = @@ -370,11 +405,11 @@ class TableFilter extends React.Component { }; render() { - const { classes, columns, options, customFooter, filterList, components = {} } = this.props; + const { columns, options, customFooter, filterList, components = {} } = this.props; const textLabels = options.textLabels.filter; return ( -
+
{customFooter ? customFooter(filterList, this.applyFilters) : ''} -
+ ); } } -export default withStyles(TableFilter, defaultFilterStyles, { name: 'MUIDataTableFilter' }); +export default TableFilter; diff --git a/src/components/TableFilterList.js b/src/components/TableFilterList.js index 0e3c65839..103b7db6d 100644 --- a/src/components/TableFilterList.js +++ b/src/components/TableFilterList.js @@ -1,16 +1,24 @@ -import { makeStyles } from 'tss-react/mui'; +import { styled } from '@mui/material/styles'; import PropTypes from 'prop-types'; import React from 'react'; import TableFilterListItem from './TableFilterListItem'; -const useStyles = makeStyles({ name: 'MUIDataTableFilterList' })(() => ({ - root: { +const PREFIX = 'MUIDataTableFilterList'; + +const classes = { + root: `${PREFIX}-root`, + chip: `${PREFIX}-chip`, +}; + +const Root = styled('div')(() => ({ + [`&.${classes.root}`]: { display: 'flex', justifyContent: 'left', flexWrap: 'wrap', margin: '0px 16px 0px 16px', }, - chip: { + + [`& .${classes.chip}`]: { margin: '8px 8px 0px 0px', }, })); @@ -25,7 +33,6 @@ const TableFilterList = ({ customFilterListUpdate, ItemComponent = TableFilterListItem, }) => { - const { classes } = useStyles(); const { serverSide } = options; const removeFilter = (index, filterValue, columnName, filterType, customFilterListUpdate = null) => { @@ -110,9 +117,9 @@ const TableFilterList = ({ }; return ( -
+ {serverSide && serverSideFilterList ? getFilterList(serverSideFilterList) : getFilterList(filterList)} -
+ ); }; diff --git a/src/components/TableFooter.js b/src/components/TableFooter.js index b09b8fe73..dafe27a77 100644 --- a/src/components/TableFooter.js +++ b/src/components/TableFooter.js @@ -1,11 +1,17 @@ import React from 'react'; +import { styled } from '@mui/material/styles'; import MuiTable from '@mui/material/Table'; import TablePagination from './TablePagination'; -import { makeStyles } from 'tss-react/mui'; import PropTypes from 'prop-types'; -const useStyles = makeStyles({ name: 'MUIDataTableFooter' })(() => ({ - root: { +const PREFIX = 'MUIDataTableFooter'; + +const classes = { + root: `${PREFIX}-root`, +}; + +const StyledMuiTable = styled(MuiTable)(() => ({ + [`&.${classes.root}`]: { '@media print': { display: 'none', }, @@ -13,12 +19,11 @@ const useStyles = makeStyles({ name: 'MUIDataTableFooter' })(() => ({ })); const TableFooter = ({ options, rowCount, page, rowsPerPage, changeRowsPerPage, changePage }) => { - const { classes } = useStyles(); const { customFooter, pagination = true } = options; if (customFooter) { return ( - + {options.customFooter( rowCount, page, @@ -27,7 +32,7 @@ const TableFooter = ({ options, rowCount, page, rowsPerPage, changeRowsPerPage, changePage, options.textLabels.pagination, )} - + ); } diff --git a/src/components/TableHead.js b/src/components/TableHead.js index eeb58e0d7..cc02020cd 100644 --- a/src/components/TableHead.js +++ b/src/components/TableHead.js @@ -1,4 +1,4 @@ -import { makeStyles } from 'tss-react/mui'; +import { styled } from '@mui/material/styles'; import clsx from 'clsx'; import MuiTableHead from '@mui/material/TableHead'; import React, { useState } from 'react'; @@ -6,17 +6,29 @@ import TableHeadCell from './TableHeadCell'; import TableHeadRow from './TableHeadRow'; import TableSelectCell from './TableSelectCell'; -const useStyles = makeStyles({ name: 'MUIDataTableHead' })(theme => ({ - main: {}, - responsiveStacked: { +const PREFIX = 'MUIDataTableHead'; + +const classes = { + main: `${PREFIX}-main`, + responsiveStacked: `${PREFIX}-responsiveStacked`, + responsiveStackedAlways: `${PREFIX}-responsiveStackedAlways`, + responsiveSimple: `${PREFIX}-responsiveSimple`, +}; + +const StyledMuiTableHead = styled(MuiTableHead)(({ theme }) => ({ + [`&.${classes.main}`]: {}, + + [`&.${classes.responsiveStacked}`]: { [theme.breakpoints.down('md')]: { display: 'none', }, }, - responsiveStackedAlways: { + + [`&.${classes.responsiveStackedAlways}`]: { display: 'none', }, - responsiveSimple: { + + [`&.${classes.responsiveSimple}`]: { [theme.breakpoints.down('sm')]: { display: 'none', }, @@ -43,8 +55,6 @@ const TableHead = ({ toggleSort, updateColumnOrder, }) => { - const { classes } = useStyles(); - if (columnOrder === null) { columnOrder = columns ? columns.map((item, idx) => idx) : []; } @@ -95,7 +105,7 @@ const TableHead = ({ }); return ( - - + ); }; diff --git a/src/components/TableHeadCell.js b/src/components/TableHeadCell.js index 8293dec3a..a4d76130f 100644 --- a/src/components/TableHeadCell.js +++ b/src/components/TableHeadCell.js @@ -1,4 +1,5 @@ import Button from '@mui/material/Button'; +import { styled } from '@mui/material/styles'; import clsx from 'clsx'; import HelpIcon from '@mui/icons-material/Help'; import MuiTooltip from '@mui/material/Tooltip'; @@ -7,42 +8,68 @@ import React, { useState } from 'react'; import TableCell from '@mui/material/TableCell'; import TableSortLabel from '@mui/material/TableSortLabel'; import useColumnDrop from '../hooks/useColumnDrop.js'; -import { makeStyles } from 'tss-react/mui'; import { useDrag } from 'react-dnd'; -const useStyles = makeStyles({ name: 'MUIDataTableHeadCell' })(theme => ({ - root: {}, - fixedHeader: { +const PREFIX = 'MUIDataTableHeadCell'; + +const classes = { + root: `${PREFIX}-root`, + fixedHeader: `${PREFIX}-fixedHeader`, + tooltip: `${PREFIX}-tooltip`, + mypopper: `${PREFIX}-mypopper`, + data: `${PREFIX}-data`, + sortAction: `${PREFIX}-sortAction`, + dragCursor: `${PREFIX}-dragCursor`, + sortLabelRoot: `${PREFIX}-sortLabelRoot`, + sortActive: `${PREFIX}-sortActive`, + toolButton: `${PREFIX}-toolButton`, + contentWrapper: `${PREFIX}-contentWrapper`, + hintIconAlone: `${PREFIX}-hintIconAlone`, + hintIconWithSortIcon: `${PREFIX}-hintIconWithSortIcon`, +}; + +const StyledTableCell = styled(TableCell)(({ theme }) => ({ + [`& .${classes.root}`]: {}, + + [`& .${classes.fixedHeader}`]: { position: 'sticky', top: '0px', zIndex: 100, backgroundColor: theme.palette.background.paper, }, - tooltip: { + + [`& .${classes.tooltip}`]: { cursor: 'pointer', }, - mypopper: { + + [`& .${classes.mypopper}`]: { '&[data-x-out-of-boundaries]': { display: 'none', }, }, - data: { + + [`& .${classes.data}`]: { display: 'inline-block', }, - sortAction: { + + [`& .${classes.sortAction}`]: { display: 'flex', cursor: 'pointer', }, - dragCursor: { + + [`& .${classes.dragCursor}`]: { cursor: 'grab', }, - sortLabelRoot: { + + [`& .${classes.sortLabelRoot}`]: { height: '20px', }, - sortActive: { + + [`& .${classes.sortActive}`]: { color: theme.palette.text.primary, }, - toolButton: { + + [`& .${classes.toolButton}`]: { textTransform: 'none', marginLeft: '-8px', minWidth: 0, @@ -50,15 +77,18 @@ const useStyles = makeStyles({ name: 'MUIDataTableHeadCell' })(theme => ({ paddingLeft: '8px', paddingRight: '8px', }, - contentWrapper: { + + [`& .${classes.contentWrapper}`]: { display: 'flex', alignItems: 'center', }, - hintIconAlone: { + + [`& .${classes.hintIconAlone}`]: { marginTop: '-3px', marginLeft: '3px', }, - hintIconWithSortIcon: { + + [`& .${classes.hintIconWithSortIcon}`]: { marginTop: '-3px', }, })); @@ -89,8 +119,6 @@ const TableHeadCell = ({ const [sortTooltipOpen, setSortTooltipOpen] = useState(false); const [hintTooltipOpen, setHintTooltipOpen] = useState(false); - const { classes } = useStyles(); - const handleKeyboardSortInput = e => { if (e.key === 'Enter') { toggleSort(index); @@ -189,7 +217,7 @@ const TableHeadCell = ({ }; return ( - { drop && drop(ref); setCellRef && setCellRef(index + 1, colPosition + 1, ref); @@ -264,7 +292,7 @@ const TableHeadCell = ({ )}
)} - + ); }; diff --git a/src/components/TableHeadRow.js b/src/components/TableHeadRow.js index 1ab78e278..ea95a90c3 100644 --- a/src/components/TableHeadRow.js +++ b/src/components/TableHeadRow.js @@ -1,23 +1,27 @@ import React from 'react'; +import { styled } from '@mui/material/styles'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import TableRow from '@mui/material/TableRow'; -import { makeStyles } from 'tss-react/mui'; -const useStyles = makeStyles({ name: 'MUIDataTableHeadRow' })(() => ({ - root: {}, +const PREFIX = 'MUIDataTableHeadRow'; + +const classes = { + root: `${PREFIX}-root`, +}; + +const StyledTableRow = styled(TableRow)(() => ({ + [`&.${classes.root}`]: {}, })); const TableHeadRow = ({ children }) => { - const { classes } = useStyles(); - return ( - {children} - + ); }; diff --git a/src/components/TablePagination.js b/src/components/TablePagination.js index 55bf0ab4a..f4589d1bc 100644 --- a/src/components/TablePagination.js +++ b/src/components/TablePagination.js @@ -5,35 +5,44 @@ import MuiTableRow from '@mui/material/TableRow'; import MuiTableFooter from '@mui/material/TableFooter'; import MuiTablePagination from '@mui/material/TablePagination'; import JumpToPage from './JumpToPage'; -import { makeStyles } from 'tss-react/mui'; import { getPageValue } from '../utils'; +import { styled } from '@mui/material/styles'; -const useStyles = makeStyles({ name: 'MUIDataTablePagination' })(theme => ({ - root: {}, - tableCellContainer: { +const PREFIX = 'MUIDataTablePagination'; + +const classes = { + root: `${PREFIX}-root`, + tableCellContainer: `${PREFIX}-tableCellContainer`, + paperResponsiveScrollFullHeightFullWidth: `${PREFIX}-paperResponsiveScrollFullHeightFullWidth`, + navContainer: `${PREFIX}-navContainer`, + toolbar: `${PREFIX}-toolbar`, + selectRoot: `${PREFIX}-selectRoot`, +}; + +const StyledMuiTablePagination = styled(MuiTableFooter)(({ theme }) => ({ + [`& .${classes.root}`]: {}, + [`& .${classes.tableCellContainer}`]: { padding: '0px 24px 0px 24px', }, - navContainer: { + [`& .${classes.navContainer}`]: { display: 'flex', justifyContent: 'flex-end', }, - toolbar: {}, - selectRoot: {}, + [`& .${classes.toolbar}`]: {}, + [`& .${classes.selectRoot}`]: {}, '@media screen and (max-width: 400px)': { - toolbar: { + [`& .${classes.toolbar}`]: { '& span:nth-of-type(2)': { display: 'none', }, }, - selectRoot: { + [`& .${classes.selectRoot}`]: { marginRight: '8px', }, }, })); function TablePagination(props) { - const { classes } = useStyles(); - const handleRowChange = event => { props.changeRowsPerPage(event.target.value); }; @@ -46,9 +55,9 @@ function TablePagination(props) { const textLabels = options.textLabels.pagination; return ( - + - +
{options.jumpToPage ? ( - + ); } diff --git a/src/components/TableResize.js b/src/components/TableResize.js index 3142b4890..8b4c073df 100644 --- a/src/components/TableResize.js +++ b/src/components/TableResize.js @@ -1,12 +1,19 @@ import React from 'react'; +import { styled } from '@mui/material/styles'; import PropTypes from 'prop-types'; -import { withStyles } from 'tss-react/mui'; -const defaultResizeStyles = { - root: { +const PREFIX = 'MUIDataTableResize'; + +const classes = { + root: `${PREFIX}-root`, + resizer: `${PREFIX}-resizer`, +}; + +const Root = styled('div')({ + [`&.${classes.root}`]: { position: 'absolute', }, - resizer: { + [`& .${classes.resizer}`]: { position: 'absolute', width: '1px', height: '100%', @@ -14,7 +21,7 @@ const defaultResizeStyles = { cursor: 'ew-resize', border: '0.1px solid rgba(224, 224, 224, 1)', }, -}; +}); function getParentOffsetLeft(tableEl) { let ii = 0, @@ -250,11 +257,11 @@ class TableResize extends React.Component { }; render() { - const { classes, tableId } = this.props; + const { tableId } = this.props; const { id, isResize, resizeCoords, tableWidth, tableHeight } = this.state; return ( -
+ {Object.entries(resizeCoords).map(([key, val]) => { return (
); })} -
+ ); } } -export default withStyles(TableResize, defaultResizeStyles, { name: 'MUIDataTableResize' }); +export default TableResize; diff --git a/src/components/TableSearch.js b/src/components/TableSearch.js index 664f0d79d..fc9b6832b 100644 --- a/src/components/TableSearch.js +++ b/src/components/TableSearch.js @@ -1,25 +1,37 @@ import React from 'react'; +import { styled } from '@mui/material/styles'; import Grow from '@mui/material/Grow'; import TextField from '@mui/material/TextField'; import SearchIcon from '@mui/icons-material/Search'; import IconButton from '@mui/material/IconButton'; import ClearIcon from '@mui/icons-material/Clear'; -import { makeStyles } from 'tss-react/mui'; -const useStyles = makeStyles({ name: 'MUIDataTableSearch' })(theme => ({ - main: { +const PREFIX = 'MUIDataTableSearch'; + +const classes = { + main: `${PREFIX}-main`, + searchIcon: `${PREFIX}-searchIcon`, + searchText: `${PREFIX}-searchText`, + clearIcon: `${PREFIX}-clearIcon`, +}; + +const StyledGrow = styled(Grow)(({ theme }) => ({ + [`& .${classes.main}`]: { display: 'flex', flex: '1 0 auto', alignItems: 'center', }, - searchIcon: { + + [`& .${classes.searchIcon}`]: { color: theme.palette.text.secondary, marginRight: '8px', }, - searchText: { + + [`& .${classes.searchText}`]: { flex: '0.8 0', }, - clearIcon: { + + [`& .${classes.clearIcon}`]: { '&:hover': { color: theme.palette.error.main, }, @@ -27,8 +39,6 @@ const useStyles = makeStyles({ name: 'MUIDataTableSearch' })(theme => ({ })); const TableSearch = ({ options, searchText, onSearch, onHide }) => { - const { classes } = useStyles(); - const handleTextChange = event => { onSearch(event.target.value); }; @@ -42,7 +52,7 @@ const TableSearch = ({ options, searchText, onSearch, onHide }) => { const clearIconVisibility = options.searchAlwaysOpen ? 'hidden' : 'visible'; return ( - +
{
- + ); }; diff --git a/src/components/TableSelectCell.js b/src/components/TableSelectCell.js index b28371dac..5bd1f1944 100644 --- a/src/components/TableSelectCell.js +++ b/src/components/TableSelectCell.js @@ -1,45 +1,68 @@ import React from 'react'; +import { styled } from '@mui/material/styles'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import Checkbox from '@mui/material/Checkbox'; import TableCell from '@mui/material/TableCell'; -import { makeStyles } from 'tss-react/mui'; import ExpandButton from './ExpandButton'; -const useStyles = makeStyles({ name: 'MUIDataTableSelectCell' })(theme => ({ - root: { +const PREFIX = 'MUIDataTableSelectCell'; + +const classes = { + root: `${PREFIX}-root`, + fixedHeader: `${PREFIX}-fixedHeader`, + fixedLeft: `${PREFIX}-fixedLeft`, + icon: `${PREFIX}-icon`, + expanded: `${PREFIX}-expanded`, + hide: `${PREFIX}-hide`, + headerCell: `${PREFIX}-headerCell`, + expandDisabled: `${PREFIX}-expandDisabled`, + checkboxRoot: `${PREFIX}-checkboxRoot`, + checked: `${PREFIX}-checked`, + disabled: `${PREFIX}-disabled`, +}; + +const StyledTableCell = styled(TableCell)(({ theme }) => ({ + [`& .${classes.root}`]: { '@media print': { display: 'none', }, }, - fixedHeader: { + + [`& .${classes.fixedHeader}`]: { position: 'sticky', top: '0px', zIndex: 100, }, - fixedLeft: { + + [`& .${classes.fixedLeft}`]: { position: 'sticky', left: '0px', zIndex: 100, }, - icon: { + + [`& .${classes.icon}`]: { cursor: 'pointer', transition: 'transform 0.25s', }, - expanded: { + + [`& .${classes.expanded}`]: { transform: 'rotate(90deg)', }, - hide: { + + [`& .${classes.hide}`]: { visibility: 'hidden', }, - headerCell: { + + [`& .${classes.headerCell}`]: { zIndex: 110, backgroundColor: theme.palette.background.paper, }, - expandDisabled: {}, - checkboxRoot: {}, - checked: {}, - disabled: {}, + + [`& .${classes.expandDisabled}`]: {}, + [`& .${classes.checkboxRoot}`]: {}, + [`& .${classes.checked}`]: {}, + [`& .${classes.disabled}`]: {}, })); const TableSelectCell = ({ @@ -62,7 +85,6 @@ const TableSelectCell = ({ components = {}, ...otherProps }) => { - const { classes } = useStyles(); const CheckboxComponent = components.Checkbox || Checkbox; const ExpandButtonComponent = components.ExpandButton || ExpandButton; @@ -120,7 +142,7 @@ const TableSelectCell = ({ }; return ( - +
{expandableOn && ( - + ); }; diff --git a/src/components/TableToolbar.js b/src/components/TableToolbar.js index d7be03394..538741c62 100644 --- a/src/components/TableToolbar.js +++ b/src/components/TableToolbar.js @@ -13,94 +13,114 @@ import ViewColumnIcon from '@mui/icons-material/ViewColumn'; import FilterIcon from '@mui/icons-material/FilterList'; import ReactToPrint, { PrintContextConsumer } from 'react-to-print'; import find from 'lodash.find'; -import { withStyles } from 'tss-react/mui'; import { createCSVDownload, downloadCSV } from '../utils'; import MuiTooltip from '@mui/material/Tooltip'; - -export const defaultToolbarStyles = theme => ({ - root: { +import { styled } from '@mui/material/styles'; + +const PREFIX = 'MUIDataTableToolbar'; + +const classes = { + root: `${PREFIX}-root`, + fullWidthRoot: `${PREFIX}-fullWidthRoot`, + left: `${PREFIX}-left`, + fullWidthLeft: `${PREFIX}-fullWidthLeft`, + actions: `${PREFIX}-actions`, + fullWidthActions: `${PREFIX}-fullWidthActions`, + titleRoot: `${PREFIX}-titleRoot`, + titleText: `${PREFIX}-titleText`, + fullWidthTitleText: `${PREFIX}-fullWidthTitleText`, + icon: `${PREFIX}-icon`, + iconActive: `${PREFIX}-iconActive`, + filterPaper: `${PREFIX}-filterPaper`, + filterCloseIcon: `${PREFIX}-filterCloseIcon`, + searchIcon: `${PREFIX}-searchIcon`, + spacer: `${PREFIX}-spacer`, +}; + +const StyledMuiTableToolbar = styled(Toolbar)(({ theme }) => ({ + [`& .${classes.root}`]: { '@media print': { display: 'none', }, }, - fullWidthRoot: {}, - left: { + [`& .${classes.fullWidthRoot}`]: {}, + [`& .${classes.left}`]: { flex: '1 1 auto', }, - fullWidthLeft: { + [`& .${classes.fullWidthLeft}`]: { flex: '1 1 auto', }, - actions: { + [`& .${classes.actions}`]: { flex: '1 1 auto', textAlign: 'right', }, - fullWidthActions: { + [`& .${classes.fullWidthActions}`]: { flex: '1 1 auto', textAlign: 'right', }, - titleRoot: {}, - titleText: {}, - fullWidthTitleText: { + [`& .${classes.titleRoot}`]: {}, + [`& .${classes.titleText}`]: {}, + [`& .${classes.fullWidthTitleText}`]: { textAlign: 'left', }, - icon: { + [`& .${classes.icon}`]: { '&:hover': { color: theme.palette.primary.main, }, }, - iconActive: { + [`& .${classes.iconActive}`]: { color: theme.palette.primary.main, }, - filterPaper: { + [`& .${classes.filterPaper}`]: { maxWidth: '50%', }, - filterCloseIcon: { + [`& .${classes.filterCloseIcon}`]: { position: 'absolute', right: 0, top: 0, zIndex: 100, }, - searchIcon: { + [`& .${classes.searchIcon}`]: { display: 'inline-flex', marginTop: '10px', marginRight: '8px', }, [theme.breakpoints.down('md')]: { - titleRoot: {}, - titleText: { + [`& .${classes.titleRoot}`]: {}, + [`& .${classes.titleText}`]: { fontSize: '16px', }, - spacer: { + [`& .${classes.spacer}`]: { display: 'none', }, - left: { + [`& .${classes.left}`]: { // flex: "1 1 40%", padding: '8px 0px', }, - actions: { + [`& .${classes.actions}`]: { // flex: "1 1 60%", textAlign: 'right', }, }, [theme.breakpoints.down('sm')]: { - root: { + [`& .${classes.root}`]: { display: 'block', '@media print': { display: 'none !important', }, }, - left: { + [`& .${classes.left}`]: { padding: '8px 0px 0px 0px', }, - titleText: { + [`& .${classes.titleText}`]: { textAlign: 'center', }, - actions: { + [`& .${classes.actions}`]: { textAlign: 'center', }, }, '@media screen and (max-width: 480px)': {}, -}); +})); const RESPONSIVE_FULL_WIDTH_NAME = 'scrollFullHeightFullWidth'; @@ -287,7 +307,6 @@ class TableToolbar extends React.Component { const { data, options, - classes, columns, filterData, filterList, @@ -322,7 +341,7 @@ class TableToolbar extends React.Component { }; return ( - @@ -464,9 +483,9 @@ class TableToolbar extends React.Component { )} {options.customToolbar && options.customToolbar({ displayData: this.props.displayData })}
- + ); } } -export default withStyles(TableToolbar, defaultToolbarStyles, { name: 'MUIDataTableToolbar' }); +export default TableToolbar; diff --git a/src/components/TableToolbarSelect.js b/src/components/TableToolbarSelect.js index ac7425936..dc3040300 100644 --- a/src/components/TableToolbarSelect.js +++ b/src/components/TableToolbarSelect.js @@ -1,14 +1,23 @@ import React from 'react'; +import { styled } from '@mui/material/styles'; import PropTypes from 'prop-types'; import Paper from '@mui/material/Paper'; import IconButton from '@mui/material/IconButton'; import Typography from '@mui/material/Typography'; import DeleteIcon from '@mui/icons-material/Delete'; -import { withStyles } from 'tss-react/mui'; import MuiTooltip from '@mui/material/Tooltip'; -const defaultToolbarSelectStyles = theme => ({ - root: { +const PREFIX = 'MUIDataTableToolbarSelect'; + +const classes = { + root: `${PREFIX}-root`, + title: `${PREFIX}-title`, + iconButton: `${PREFIX}-iconButton`, + deleteIcon: `${PREFIX}-deleteIcon`, +}; + +const StyledPaper = styled(Paper)(({ theme }) => ({ + [`&.${classes.root}`]: { backgroundColor: theme.palette.background.default, flex: '1 1 100%', display: 'flex', @@ -22,14 +31,17 @@ const defaultToolbarSelectStyles = theme => ({ display: 'none', }, }, - title: { + + [`& .${classes.title}`]: { paddingLeft: '26px', }, - iconButton: { + + [`& .${classes.iconButton}`]: { marginRight: '24px', }, - deleteIcon: {}, -}); + + [`& .${classes.deleteIcon}`]: {}, +})); class TableToolbarSelect extends React.Component { static propTypes = { @@ -63,12 +75,12 @@ class TableToolbarSelect extends React.Component { }; render() { - const { classes, onRowsDelete, selectedRows, options, displayData, components = {} } = this.props; + const { onRowsDelete, selectedRows, options, displayData, components = {} } = this.props; const textLabels = options.textLabels.selectedRows; const Tooltip = components.Tooltip || MuiTooltip; return ( - +
{selectedRows.data.length} {textLabels.text} @@ -83,9 +95,9 @@ class TableToolbarSelect extends React.Component { )} - + ); } } -export default withStyles(TableToolbarSelect, defaultToolbarSelectStyles, { name: 'MUIDataTableToolbarSelect' }); +export default TableToolbarSelect; diff --git a/src/components/TableViewCol.js b/src/components/TableViewCol.js index 72cbd2938..903d7c521 100644 --- a/src/components/TableViewCol.js +++ b/src/components/TableViewCol.js @@ -1,18 +1,32 @@ import React from 'react'; +import { styled } from '@mui/material/styles'; import PropTypes from 'prop-types'; import Checkbox from '@mui/material/Checkbox'; import Typography from '@mui/material/Typography'; import FormControl from '@mui/material/FormControl'; import FormGroup from '@mui/material/FormGroup'; import FormControlLabel from '@mui/material/FormControlLabel'; -import { makeStyles } from 'tss-react/mui'; -const useStyles = makeStyles({ name: 'MUIDataTableViewCol' })(theme => ({ - root: { +const PREFIX = 'MUIDataTableViewCol'; + +const classes = { + root: `${PREFIX}-root`, + title: `${PREFIX}-title`, + formGroup: `${PREFIX}-formGroup`, + formControl: `${PREFIX}-formControl`, + checkbox: `${PREFIX}-checkbox`, + checkboxRoot: `${PREFIX}-checkboxRoot`, + checked: `${PREFIX}-checked`, + label: `${PREFIX}-label`, +}; + +const StyledFormControl = styled(FormControl)(({ theme }) => ({ + [`&.${classes.root}`]: { padding: '16px 24px 16px 24px', fontFamily: 'Roboto', }, - title: { + + [`& .${classes.title}`]: { marginLeft: '-7px', marginRight: '24px', fontSize: '14px', @@ -20,18 +34,23 @@ const useStyles = makeStyles({ name: 'MUIDataTableViewCol' })(theme => ({ textAlign: 'left', fontWeight: 500, }, - formGroup: { + + [`& .${classes.formGroup}`]: { marginTop: '8px', }, - formControl: {}, - checkbox: { + + [`& .${classes.formControl}`]: {}, + + [`& .${classes.checkbox}`]: { padding: '0px', width: '32px', height: '32px', }, - checkboxRoot: {}, - checked: {}, - label: { + + [`& .${classes.checkboxRoot}`]: {}, + [`& .${classes.checked}`]: {}, + + [`& .${classes.label}`]: { fontSize: '15px', marginLeft: '8px', color: theme.palette.text.primary, @@ -39,7 +58,6 @@ const useStyles = makeStyles({ name: 'MUIDataTableViewCol' })(theme => ({ })); const TableViewCol = ({ columns, options, components = {}, onColumnUpdate, updateColumns }) => { - const { classes } = useStyles(); const textLabels = options.textLabels.viewColumns; const CheckboxComponent = components.Checkbox || Checkbox; @@ -48,7 +66,7 @@ const TableViewCol = ({ columns, options, components = {}, onColumnUpdate, updat }; return ( - + {textLabels.title} @@ -83,7 +101,7 @@ const TableViewCol = ({ columns, options, components = {}, onColumnUpdate, updat ); })} - + ); }; diff --git a/src/plug-ins/DebounceSearchRender.js b/src/plug-ins/DebounceSearchRender.js index 64cfe1942..eef49866b 100644 --- a/src/plug-ins/DebounceSearchRender.js +++ b/src/plug-ins/DebounceSearchRender.js @@ -1,10 +1,42 @@ import React from 'react'; +import { styled } from '@mui/material/styles'; import Grow from '@mui/material/Grow'; import TextField from '@mui/material/TextField'; import SearchIcon from '@mui/icons-material/Search'; import IconButton from '@mui/material/IconButton'; import ClearIcon from '@mui/icons-material/Clear'; -import { withStyles } from 'tss-react/mui'; + +const PREFIX = 'MUIDataTableSearch'; + +const classes = { + main: `${PREFIX}-main`, + searchIcon: `${PREFIX}-searchIcon`, + searchText: `${PREFIX}-searchText`, + clearIcon: `${PREFIX}-clearIcon`, +}; + +const StyledDebounceTableSearch = styled(Grow)(({ theme }) => ({ + [`& .${classes.main}`]: { + display: 'flex', + flex: '1 0 auto', + alignItems: 'center', + }, + + [`& .${classes.searchIcon}`]: { + color: theme.palette.text.secondary, + marginRight: '8px', + }, + + [`& .${classes.searchText}`]: { + flex: '0.8 0', + }, + + [`& .${classes.clearIcon}`]: { + '&:hover': { + color: theme.palette.error.main, + }, + }, +})); function debounce(func, wait, immediate) { var timeout; @@ -22,26 +54,6 @@ function debounce(func, wait, immediate) { }; } -const defaultStyles = theme => ({ - main: { - display: 'flex', - flex: '1 0 auto', - alignItems: 'center', - }, - searchIcon: { - color: theme.palette.text.secondary, - marginRight: '8px', - }, - searchText: { - flex: '0.8 0', - }, - clearIcon: { - '&:hover': { - color: theme.palette.error.main, - }, - }, -}); - class _DebounceTableSearch extends React.Component { handleTextChangeWrapper = debouncedSearch => { return function(event) { @@ -63,9 +75,8 @@ class _DebounceTableSearch extends React.Component { } }; - render() { - const { classes, options, onHide, searchText, debounceWait } = this.props; + const { options, onHide, searchText, debounceWait } = this.props; const debouncedSearch = debounce(value => { this.props.onSearch(value); @@ -73,9 +84,8 @@ class _DebounceTableSearch extends React.Component { const clearIconVisibility = options.searchAlwaysOpen ? 'hidden' : 'visible'; - return ( - +
- +
- + ); } } -var DebounceTableSearch = withStyles(_DebounceTableSearch, defaultStyles, { name: 'MUIDataTableSearch' }); +var DebounceTableSearch = _DebounceTableSearch; export { DebounceTableSearch }; export function debounceSearchRender(debounceWait = 200) {