From c93600d5f08dd52aaf44ee26e1aad5144f5e3f32 Mon Sep 17 00:00:00 2001 From: Ashfaq Date: Sun, 20 Feb 2022 19:27:17 +0530 Subject: [PATCH 01/12] feat: Performed the jss-in-styles codemod. --- src/components/JumpToPage.js | 44 +++++++++---- src/components/TableBody.js | 38 +++++++---- src/components/TableBodyCell.js | 69 ++++++++++++++------ src/components/TableBodyRow.js | 39 ++++++++---- src/components/TableFilter.js | 95 ++++++++++++++++++++-------- src/components/TableFilterList.js | 24 ++++--- src/components/TableFooter.js | 20 ++++-- src/components/TableHead.js | 36 ++++++++--- src/components/TableHeadCell.js | 72 +++++++++++++++------ src/components/TableHeadRow.js | 17 +++-- src/components/TableResize.js | 24 ++++--- src/components/TableSearch.js | 35 +++++++--- src/components/TableSelectCell.js | 59 ++++++++++++----- src/components/TableToolbarSelect.js | 38 +++++++---- src/components/TableViewCol.js | 50 +++++++++++---- src/plug-ins/DebounceSearchRender.js | 65 ++++++++++++------- 16 files changed, 509 insertions(+), 216 deletions(-) diff --git a/src/components/JumpToPage.js b/src/components/JumpToPage.js index 048a888c7..94787b0b8 100644 --- a/src/components/JumpToPage.js +++ b/src/components/JumpToPage.js @@ -1,27 +1,45 @@ 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,18 +48,20 @@ 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, - }, + } })); function JumpToPage(props) { - const { classes } = useStyles(); + const handlePageChange = event => { props.changePage(parseInt(event.target.value, 10)); @@ -66,7 +86,7 @@ function JumpToPage(props) { }; return ( - + {textLabel} @@ -82,7 +102,7 @@ function JumpToPage(props) { ))} - + ); } diff --git a/src/components/TableBody.js b/src/components/TableBody.js index ebfc4a75d..60a56bca3 100644 --- a/src/components/TableBody.js +++ b/src/components/TableBody.js @@ -1,35 +1,51 @@ 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 = { @@ -235,7 +251,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 +346,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..6447e12d0 100644 --- a/src/components/TableBodyCell.js +++ b/src/components/TableBodyCell.js @@ -1,14 +1,36 @@ 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 PREFIX = 'MUIDataTableBodyCell'; -const useStyles = makeStyles({ name: 'MUIDataTableBodyCell' })(theme => ({ - root: {}, - cellHide: { +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 +38,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 +66,8 @@ const useStyles = makeStyles({ name: 'MUIDataTableBodyCell' })(theme => ({ }, }, }, - stackedCommonAlways: { + + [`& .${classes.stackedCommonAlways}`]: { display: 'inline-block', fontSize: '16px', height: 'auto', @@ -50,11 +76,12 @@ const useStyles = makeStyles({ name: 'MUIDataTableBodyCell' })(theme => ({ '&:last-child': { borderBottom: 'none', }, - '&:nth-last-of-type(2)': { + '&:nth-last-child(2)': { borderBottom: 'none', }, }, - stackedParent: { + + [`&.${classes.stackedParent}`]: { [theme.breakpoints.down('md')]: { display: 'inline-block', fontSize: '16px', @@ -63,35 +90,39 @@ 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', }, - }, + } })); function TableBodyCell(props) { - const { classes } = useStyles(); + const { children, colIndex, @@ -177,7 +208,7 @@ function TableBodyCell(props) { } return ( - {innerCells} - + ); } diff --git a/src/components/TableBodyRow.js b/src/components/TableBodyRow.js index 51c783cd0..667672773 100644 --- a/src/components/TableBodyRow.js +++ b/src/components/TableBodyRow.js @@ -1,11 +1,23 @@ 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 PREFIX = 'MUIDataTableBodyRow'; -const defaultBodyRowStyles = theme => ({ - root: { +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 +28,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,15 +39,16 @@ 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)', padding: 0, margin: 0, }, - }, -}); + } +})); class TableBodyRow extends React.Component { static propTypes = { @@ -48,7 +63,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 +71,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..07a81d210 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,75 @@ 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 +91,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 +198,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 +245,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 +283,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 +313,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 +357,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 +409,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..39e12197b 100644 --- a/src/components/TableFilterList.js +++ b/src/components/TableFilterList.js @@ -1,18 +1,26 @@ -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', - }, + } })); const TableFilterList = ({ @@ -25,7 +33,7 @@ const TableFilterList = ({ customFilterListUpdate, ItemComponent = TableFilterListItem, }) => { - const { classes } = useStyles(); + const { serverSide } = options; const removeFilter = (index, filterValue, columnName, filterType, customFilterListUpdate = null) => { @@ -110,9 +118,9 @@ const TableFilterList = ({ }; return ( -
+ {serverSide && serverSideFilterList ? getFilterList(serverSideFilterList) : getFilterList(filterList)} -
+ ); }; diff --git a/src/components/TableFooter.js b/src/components/TableFooter.js index b09b8fe73..6324f3c22 100644 --- a/src/components/TableFooter.js +++ b/src/components/TableFooter.js @@ -1,24 +1,30 @@ 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', }, - }, + } })); 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 +33,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..9c2cc42c9 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,21 +6,37 @@ 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', }, - }, + } })); const TableHead = ({ @@ -43,7 +59,7 @@ const TableHead = ({ toggleSort, updateColumnOrder, }) => { - const { classes } = useStyles(); + if (columnOrder === null) { columnOrder = columns ? columns.map((item, idx) => idx) : []; @@ -95,7 +111,7 @@ const TableHead = ({ }); return ( - - + ); }; diff --git a/src/components/TableHeadCell.js b/src/components/TableHeadCell.js index 8293dec3a..d8e556427 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,72 @@ 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,17 +81,20 @@ 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', - }, + } })); const TableHeadCell = ({ @@ -89,7 +123,7 @@ const TableHeadCell = ({ const [sortTooltipOpen, setSortTooltipOpen] = useState(false); const [hintTooltipOpen, setHintTooltipOpen] = useState(false); - const { classes } = useStyles(); + const handleKeyboardSortInput = e => { if (e.key === 'Enter') { @@ -189,7 +223,7 @@ const TableHeadCell = ({ }; return ( - { drop && drop(ref); setCellRef && setCellRef(index + 1, colPosition + 1, ref); @@ -264,7 +298,7 @@ const TableHeadCell = ({ )}
)} - + ); }; diff --git a/src/components/TableHeadRow.js b/src/components/TableHeadRow.js index 1ab78e278..b27a4c54b 100644 --- a/src/components/TableHeadRow.js +++ b/src/components/TableHeadRow.js @@ -1,23 +1,28 @@ 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 PREFIX = 'MUIDataTableHeadRow'; -const useStyles = makeStyles({ name: 'MUIDataTableHeadRow' })(() => ({ - root: {}, +const classes = { + root: `${PREFIX}-root` +}; + +const StyledTableRow = styled(TableRow)(() => ({ + [`&.${classes.root}`]: {} })); const TableHeadRow = ({ children }) => { - const { classes } = useStyles(); + return ( - {children} - + ); }; diff --git a/src/components/TableResize.js b/src/components/TableResize.js index 3142b4890..84b5350cb 100644 --- a/src/components/TableResize.js +++ b/src/components/TableResize.js @@ -1,12 +1,18 @@ import React from 'react'; +import { styled } from '@mui/material/styles'; import PropTypes from 'prop-types'; -import { withStyles } from 'tss-react/mui'; +const PREFIX = 'MUIDataTableResize'; -const defaultResizeStyles = { - root: { +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 +20,7 @@ const defaultResizeStyles = { cursor: 'ew-resize', border: '0.1px solid rgba(224, 224, 224, 1)', }, -}; +}); function getParentOffsetLeft(tableEl) { let ii = 0, @@ -250,11 +256,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..efaf0a4ef 100644 --- a/src/components/TableSearch.js +++ b/src/components/TableSearch.js @@ -1,33 +1,48 @@ 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 PREFIX = 'MUIDataTableSearch'; -const useStyles = makeStyles({ name: 'MUIDataTableSearch' })(theme => ({ - main: { +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, }, - }, + } })); const TableSearch = ({ options, searchText, onSearch, onHide }) => { - const { classes } = useStyles(); + const handleTextChange = event => { onSearch(event.target.value); @@ -42,7 +57,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..62d35d062 100644 --- a/src/components/TableSelectCell.js +++ b/src/components/TableSelectCell.js @@ -1,45 +1,72 @@ 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 +89,7 @@ const TableSelectCell = ({ components = {}, ...otherProps }) => { - const { classes } = useStyles(); + const CheckboxComponent = components.Checkbox || Checkbox; const ExpandButtonComponent = components.ExpandButton || ExpandButton; @@ -120,7 +147,7 @@ const TableSelectCell = ({ }; return ( - +
{expandableOn && ( - + ); }; diff --git a/src/components/TableToolbarSelect.js b/src/components/TableToolbarSelect.js index ac7425936..da3aff69c 100644 --- a/src/components/TableToolbarSelect.js +++ b/src/components/TableToolbarSelect.js @@ -1,14 +1,27 @@ 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 +35,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 +79,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 +99,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..22ce32394 100644 --- a/src/components/TableViewCol.js +++ b/src/components/TableViewCol.js @@ -1,18 +1,35 @@ 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 PREFIX = 'MUIDataTableViewCol'; -const useStyles = makeStyles({ name: 'MUIDataTableViewCol' })(theme => ({ - root: { +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,26 +37,31 @@ 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, - }, + } })); const TableViewCol = ({ columns, options, components = {}, onColumnUpdate, updateColumns }) => { - const { classes } = useStyles(); + const textLabels = options.textLabels.viewColumns; const CheckboxComponent = components.Checkbox || Checkbox; @@ -48,7 +70,7 @@ const TableViewCol = ({ columns, options, components = {}, onColumnUpdate, updat }; return ( - + {textLabels.title} @@ -83,7 +105,7 @@ const TableViewCol = ({ columns, options, components = {}, onColumnUpdate, updat ); })} - + ); }; diff --git a/src/plug-ins/DebounceSearchRender.js b/src/plug-ins/DebounceSearchRender.js index 64cfe1942..24b654a20 100644 --- a/src/plug-ins/DebounceSearchRender.js +++ b/src/plug-ins/DebounceSearchRender.js @@ -1,10 +1,47 @@ -import React from 'react'; +import React, { useEffect } 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(DebounceTableSearch +)(( + { + 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 +59,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) { @@ -65,7 +82,7 @@ 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); @@ -102,7 +119,7 @@ class _DebounceTableSearch extends React.Component { } } -var DebounceTableSearch = withStyles(_DebounceTableSearch, defaultStyles, { name: 'MUIDataTableSearch' }); +var DebounceTableSearch = _DebounceTableSearch; export { DebounceTableSearch }; export function debounceSearchRender(debounceWait = 200) { From 75a1405fdb189529189e9edf082a50a6e0d194c9 Mon Sep 17 00:00:00 2001 From: Ashfaq Date: Sun, 20 Feb 2022 19:33:08 +0530 Subject: [PATCH 02/12] feat: Fixed the files which were ignored during codemod --- src/MUIDataTable.js | 93 ++++++++++++++++++-- src/components/TableBodyCell.js | 13 +-- src/components/TablePagination.js | 139 ++++++++++++++++-------------- src/components/TableToolbar.js | 81 ++++++++++------- 4 files changed, 217 insertions(+), 109 deletions(-) diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js index 3e11cd945..54796ca72 100644 --- a/src/MUIDataTable.js +++ b/src/MUIDataTable.js @@ -10,6 +10,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,6 +26,89 @@ import { DndProvider } from 'react-dnd'; import { HTML5Backend } from 'react-dnd-html5-backend'; import { load, save } from './localStorage'; + +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', + }, + [`& .${classes.tableRoot}`]: { + outline: 'none', + }, + [`& .${classes.responsiveBase}`]: { + overflow: 'auto', + '@media print': { + height: 'auto !important', + }, + }, + + // deprecated, but continuing support through v3.x + [`& .${classes.responsiveScroll}`]: { + overflow: 'auto', + height: '100%', + }, + // deprecated, but continuing support through v3.x + [`& .${classes.responsiveScrollMaxHeight}`]: { + overflow: 'auto', + height: '100%', + }, + // deprecated, but continuing support through v3.x + [`& .${classes.responsiveScrollFullHeight}`]: { + height: '100%', + }, + // deprecated, but continuing support through v3.x + [`& .${classes.responsiveStacked}`]: { + overflow: 'auto', + [theme.breakpoints.down('md')]: { + overflow: 'hidden', + }, + }, + // deprecated, but continuing support through v3.x + [`& .${classes.responsiveStackedFullWidth}`]: {}, + + [`& .${classes.caption}`]: { + position: 'absolute', + left: '-3000px', + }, + + [`& .${classes.liveAnnounce}`]: { + border: '0', + clip: 'rect(0 0 0 0)', + height: '1px', + margin: '-1px', + overflow: 'hidden', + padding: '0', + position: 'absolute', + width: '1px', + }, + '@global': { + '@media print': { + '.datatables-noprint': { + display: 'none', + }, + }, + }, +})); + + const defaultTableStyles = theme => ({ root: {}, paper: {}, @@ -1216,7 +1300,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 +1905,6 @@ class MUIDataTable extends React.Component { render() { const { - classes, className, title, components: { @@ -1930,7 +2012,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/TableBodyCell.js b/src/components/TableBodyCell.js index 6447e12d0..975ba89fe 100644 --- a/src/components/TableBodyCell.js +++ b/src/components/TableBodyCell.js @@ -16,14 +16,10 @@ const classes = { stackedParentAlways: `${PREFIX}-stackedParentAlways`, cellStackedSmall: `${PREFIX}-cellStackedSmall`, responsiveStackedSmall: `${PREFIX}-responsiveStackedSmall`, - responsiveStackedSmallParent: `${PREFIX}-responsiveStackedSmallParent` + responsiveStackedSmallParent: `${PREFIX}-responsiveStackedSmallParent`, }; -const StyledTableCell = styled(TableCell)(( - { - theme - } -) => ({ +const StyledTableCell = styled(TableCell)(({ theme }) => ({ [`&.${classes.root}`]: {}, [`& .${classes.cellHide}`]: { @@ -76,7 +72,7 @@ const StyledTableCell = styled(TableCell)(( '&:last-child': { borderBottom: 'none', }, - '&:nth-last-child(2)': { + '&:nth-last-of-type(2)': { borderBottom: 'none', }, }, @@ -118,11 +114,10 @@ const StyledTableCell = styled(TableCell)(( width: '100%', boxSizing: 'border-box', }, - } + }, })); function TableBodyCell(props) { - const { children, colIndex, diff --git a/src/components/TablePagination.js b/src/components/TablePagination.js index 55bf0ab4a..325465fed 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(`div`)(({ 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,62 +55,64 @@ function TablePagination(props) { const textLabels = options.textLabels.pagination; return ( - - - -
- {options.jumpToPage ? ( - + + + +
+ {options.jumpToPage ? ( + + ) : null} + `${from}-${to} ${textLabels.displayRows} ${count}`} + backIconButtonProps={{ + id: 'pagination-back', + 'data-testid': 'pagination-back', + 'aria-label': textLabels.previous, + title: textLabels.previous || '', + }} + nextIconButtonProps={{ + id: 'pagination-next', + 'data-testid': 'pagination-next', + 'aria-label': textLabels.next, + title: textLabels.next || '', + }} + SelectProps={{ + id: 'pagination-input', + SelectDisplayProps: { id: 'pagination-rows', 'data-testid': 'pagination-rows' }, + MenuProps: { + id: 'pagination-menu', + 'data-testid': 'pagination-menu', + MenuListProps: { id: 'pagination-menu-list', 'data-testid': 'pagination-menu-list' }, + }, + }} + rowsPerPageOptions={options.rowsPerPageOptions} + onPageChange={handlePageChange} + onRowsPerPageChange={handleRowChange} /> - ) : null} - `${from}-${to} ${textLabels.displayRows} ${count}`} - backIconButtonProps={{ - id: 'pagination-back', - 'data-testid': 'pagination-back', - 'aria-label': textLabels.previous, - title: textLabels.previous || '', - }} - nextIconButtonProps={{ - id: 'pagination-next', - 'data-testid': 'pagination-next', - 'aria-label': textLabels.next, - title: textLabels.next || '', - }} - SelectProps={{ - id: 'pagination-input', - SelectDisplayProps: { id: 'pagination-rows', 'data-testid': 'pagination-rows' }, - MenuProps: { - id: 'pagination-menu', - 'data-testid': 'pagination-menu', - MenuListProps: { id: 'pagination-menu-list', 'data-testid': 'pagination-menu-list' }, - }, - }} - rowsPerPageOptions={options.rowsPerPageOptions} - onPageChange={handlePageChange} - onRowsPerPageChange={handleRowChange} - /> -
- - - +
+ + + + ); } 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; From 54b38cb7c5837c3e5d1d898d54f74fe898452d60 Mon Sep 17 00:00:00 2001 From: Ashfaq Date: Sun, 20 Feb 2022 19:35:56 +0530 Subject: [PATCH 03/12] fix: Fixed the bug with the table pagination --- src/MUIDataTable.js | 1 - src/plug-ins/DebounceSearchRender.js | 15 +++++---------- 2 files changed, 5 insertions(+), 11 deletions(-) diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js index 54796ca72..ae85cef31 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'; diff --git a/src/plug-ins/DebounceSearchRender.js b/src/plug-ins/DebounceSearchRender.js index 24b654a20..876a8cd92 100644 --- a/src/plug-ins/DebounceSearchRender.js +++ b/src/plug-ins/DebounceSearchRender.js @@ -1,10 +1,11 @@ -import React, { useEffect } from 'react'; +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'; + const PREFIX = 'MUIDataTableSearch'; const classes = { @@ -14,13 +15,7 @@ const classes = { clearIcon: `${PREFIX}-clearIcon` }; -const StyledDebounceTableSearch - = styled(DebounceTableSearch -)(( - { - theme - } -) => ({ +const StyledDebounceTableSearch = styled(Grow)(({ theme }) => ({ [`& .${classes.main}`]: { display: 'flex', flex: '1 0 auto', @@ -92,7 +87,7 @@ class _DebounceTableSearch extends React.Component { return ( - +
- + ); } } From a0d209059edb0e9ae70a54a261954568f87e38cd Mon Sep 17 00:00:00 2001 From: Ashfaq Date: Sun, 20 Feb 2022 19:37:12 +0530 Subject: [PATCH 04/12] fix: Fixed the bug with the table pagination --- src/MUIDataTable.js | 64 ------------------ src/components/TableBody.js | 1 - src/components/TablePagination.js | 106 +++++++++++++++--------------- 3 files changed, 52 insertions(+), 119 deletions(-) diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js index ae85cef31..afcdd4427 100644 --- a/src/MUIDataTable.js +++ b/src/MUIDataTable.js @@ -107,70 +107,6 @@ const StyledMuiTable = styled(Paper)(({theme}) => ({ }, })); - -const defaultTableStyles = theme => ({ - root: {}, - paper: {}, - paperResponsiveScrollFullHeightFullWidth: { - position: 'absolute', - }, - tableRoot: { - outline: 'none', - }, - responsiveBase: { - overflow: 'auto', - '@media print': { - height: 'auto !important', - }, - }, - - // deprecated, but continuing support through v3.x - responsiveScroll: { - overflow: 'auto', - height: '100%', - }, - // deprecated, but continuing support through v3.x - responsiveScrollMaxHeight: { - overflow: 'auto', - height: '100%', - }, - // deprecated, but continuing support through v3.x - responsiveScrollFullHeight: { - height: '100%', - }, - // deprecated, but continuing support through v3.x - responsiveStacked: { - overflow: 'auto', - [theme.breakpoints.down('md')]: { - overflow: 'hidden', - }, - }, - // deprecated, but continuing support through v3.x - responsiveStackedFullWidth: {}, - caption: { - position: 'absolute', - left: '-3000px', - }, - - liveAnnounce: { - border: '0', - clip: 'rect(0 0 0 0)', - height: '1px', - margin: '-1px', - overflow: 'hidden', - padding: '0', - position: 'absolute', - width: '1px', - }, - '@global': { - '@media print': { - '.datatables-noprint': { - display: 'none', - }, - }, - }, -}); - const TABLE_LOAD = { INITIAL: 1, UPDATE: 2, diff --git a/src/components/TableBody.js b/src/components/TableBody.js index 60a56bca3..7932a716f 100644 --- a/src/components/TableBody.js +++ b/src/components/TableBody.js @@ -239,7 +239,6 @@ class TableBody extends React.Component { render() { const { - classes, columns, toggleExpandRow, options, diff --git a/src/components/TablePagination.js b/src/components/TablePagination.js index 325465fed..f4589d1bc 100644 --- a/src/components/TablePagination.js +++ b/src/components/TablePagination.js @@ -19,7 +19,7 @@ const classes = { selectRoot: `${PREFIX}-selectRoot`, }; -const StyledMuiTablePagination = styled(`div`)(({ theme }) => ({ +const StyledMuiTablePagination = styled(MuiTableFooter)(({ theme }) => ({ [`& .${classes.root}`]: {}, [`& .${classes.tableCellContainer}`]: { padding: '0px 24px 0px 24px', @@ -56,62 +56,60 @@ function TablePagination(props) { return ( - - - -
- {options.jumpToPage ? ( - - ) : null} - + +
+ {options.jumpToPage ? ( + `${from}-${to} ${textLabels.displayRows} ${count}`} - backIconButtonProps={{ - id: 'pagination-back', - 'data-testid': 'pagination-back', - 'aria-label': textLabels.previous, - title: textLabels.previous || '', - }} - nextIconButtonProps={{ - id: 'pagination-next', - 'data-testid': 'pagination-next', - 'aria-label': textLabels.next, - title: textLabels.next || '', - }} - SelectProps={{ - id: 'pagination-input', - SelectDisplayProps: { id: 'pagination-rows', 'data-testid': 'pagination-rows' }, - MenuProps: { - id: 'pagination-menu', - 'data-testid': 'pagination-menu', - MenuListProps: { id: 'pagination-menu-list', 'data-testid': 'pagination-menu-list' }, - }, - }} - rowsPerPageOptions={options.rowsPerPageOptions} - onPageChange={handlePageChange} - onRowsPerPageChange={handleRowChange} + textLabels={options.textLabels} + changePage={props.changePage} + changeRowsPerPage={props.changeRowsPerPage} /> -
- - - + ) : null} + `${from}-${to} ${textLabels.displayRows} ${count}`} + backIconButtonProps={{ + id: 'pagination-back', + 'data-testid': 'pagination-back', + 'aria-label': textLabels.previous, + title: textLabels.previous || '', + }} + nextIconButtonProps={{ + id: 'pagination-next', + 'data-testid': 'pagination-next', + 'aria-label': textLabels.next, + title: textLabels.next || '', + }} + SelectProps={{ + id: 'pagination-input', + SelectDisplayProps: { id: 'pagination-rows', 'data-testid': 'pagination-rows' }, + MenuProps: { + id: 'pagination-menu', + 'data-testid': 'pagination-menu', + MenuListProps: { id: 'pagination-menu-list', 'data-testid': 'pagination-menu-list' }, + }, + }} + rowsPerPageOptions={options.rowsPerPageOptions} + onPageChange={handlePageChange} + onRowsPerPageChange={handleRowChange} + /> +
+ + ); } From 4072e85b40edb4c42632ae0120292fba6ec7dc7d Mon Sep 17 00:00:00 2001 From: Ashfaq Date: Sun, 20 Feb 2022 19:44:22 +0530 Subject: [PATCH 05/12] prettify: Linted all the components --- src/MUIDataTable.js | 6 ++---- src/components/JumpToPage.js | 12 +++--------- src/components/TableBody.js | 12 ++++-------- src/components/TableBodyCell.js | 1 + src/components/TableBodyRow.js | 15 ++++++--------- src/components/TableFilter.js | 24 ++++++++++-------------- src/components/TableFilterList.js | 5 ++--- src/components/TableFooter.js | 5 ++--- src/components/TableHead.js | 12 +++--------- src/components/TableHeadCell.js | 12 +++--------- src/components/TableHeadRow.js | 7 +++---- src/components/TableResize.js | 7 ++++--- src/components/TableSearch.js | 13 ++++--------- src/components/TableSelectCell.js | 11 +++-------- src/components/TableToolbarSelect.js | 14 +++++--------- src/components/TableViewCol.js | 12 ++++-------- src/plug-ins/DebounceSearchRender.js | 10 ++++------ 17 files changed, 63 insertions(+), 115 deletions(-) diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js index afcdd4427..81d6dac28 100644 --- a/src/MUIDataTable.js +++ b/src/MUIDataTable.js @@ -25,7 +25,6 @@ import { DndProvider } from 'react-dnd'; import { HTML5Backend } from 'react-dnd-html5-backend'; import { load, save } from './localStorage'; - const PREFIX = 'MUIDataTable'; const classes = { @@ -43,7 +42,7 @@ const classes = { liveAnnounce: `${PREFIX}-liveAnnounce`, }; -const StyledMuiTable = styled(Paper)(({theme}) => ({ +const StyledMuiTable = styled(Paper)(({ theme }) => ({ [`& .${classes.root}`]: {}, [`& .${classes.paper}`]: {}, [`& .${classes.paperResponsiveScrollFullHeightFullWidth}`]: { @@ -2102,5 +2101,4 @@ class MUIDataTable extends React.Component { } } -export default (MUIDataTable); - +export default MUIDataTable; diff --git a/src/components/JumpToPage.js b/src/components/JumpToPage.js index 94787b0b8..06d1427dd 100644 --- a/src/components/JumpToPage.js +++ b/src/components/JumpToPage.js @@ -17,14 +17,10 @@ const classes = { selectRoot: `${PREFIX}-selectRoot`, select: `${PREFIX}-select`, selectIcon: `${PREFIX}-selectIcon`, - input: `${PREFIX}-input` + input: `${PREFIX}-input`, }; -const StyledToolbar = styled(Toolbar)(( - { - theme - } -) => ({ +const StyledToolbar = styled(Toolbar)(({ theme }) => ({ [`&.${classes.root}`]: { color: theme.palette.text.primary, }, @@ -57,12 +53,10 @@ const StyledToolbar = styled(Toolbar)(( color: 'inhert', fontSize: 'inhert', flexShrink: 0, - } + }, })); function JumpToPage(props) { - - const handlePageChange = event => { props.changePage(parseInt(event.target.value, 10)); }; diff --git a/src/components/TableBody.js b/src/components/TableBody.js index 7932a716f..31d5a2e45 100644 --- a/src/components/TableBody.js +++ b/src/components/TableBody.js @@ -16,14 +16,10 @@ const classes = { root: `${PREFIX}-root`, emptyTitle: `${PREFIX}-emptyTitle`, lastStackedCell: `${PREFIX}-lastStackedCell`, - lastSimpleCell: `${PREFIX}-lastSimpleCell` + lastSimpleCell: `${PREFIX}-lastSimpleCell`, }; -const StyledMuiTableBody = styled(MuiTableBody)(( - { - theme - } -) => ({ +const StyledMuiTableBody = styled(MuiTableBody)(({ theme }) => ({ [`& .${classes.root}`]: {}, [`& .${classes.emptyTitle}`]: { @@ -44,7 +40,7 @@ const StyledMuiTableBody = styled(MuiTableBody)(( borderBottom: 'none', }, }, - } + }, })); class TableBody extends React.Component { @@ -350,4 +346,4 @@ class TableBody extends React.Component { } } -export default (TableBody); +export default TableBody; diff --git a/src/components/TableBodyCell.js b/src/components/TableBodyCell.js index 975ba89fe..69f17e949 100644 --- a/src/components/TableBodyCell.js +++ b/src/components/TableBodyCell.js @@ -2,6 +2,7 @@ import React, { useCallback } from 'react'; import { styled } from '@mui/material/styles'; import clsx from 'clsx'; import TableCell from '@mui/material/TableCell'; + const PREFIX = 'MUIDataTableBodyCell'; const classes = { diff --git a/src/components/TableBodyRow.js b/src/components/TableBodyRow.js index 667672773..6541ebf06 100644 --- a/src/components/TableBodyRow.js +++ b/src/components/TableBodyRow.js @@ -3,20 +3,17 @@ import { styled } from '@mui/material/styles'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import TableRow from '@mui/material/TableRow'; + const PREFIX = 'MUIDataTableBodyRow'; const classes = { root: `${PREFIX}-root`, hoverCursor: `${PREFIX}-hoverCursor`, responsiveStacked: `${PREFIX}-responsiveStacked`, - responsiveSimple: `${PREFIX}-responsiveSimple` + responsiveSimple: `${PREFIX}-responsiveSimple`, }; -const StyledTableRow = styled(TableRow)(( - { - theme - } -) => ({ +const StyledTableRow = styled(TableRow)(({ theme }) => ({ [`&.${classes.root}`]: { // material v4 '&.Mui-selected': { @@ -47,7 +44,7 @@ const StyledTableRow = styled(TableRow)(( padding: 0, margin: 0, }, - } + }, })); class TableBodyRow extends React.Component { @@ -63,7 +60,7 @@ class TableBodyRow extends React.Component { }; render() { - const { options, rowSelected, onClick, className, isRowSelectable, ...rest } = this.props; + const { options, rowSelected, onClick, className, isRowSelectable, ...rest } = this.props; var methods = {}; if (onClick) { @@ -96,4 +93,4 @@ class TableBodyRow extends React.Component { } } -export default (TableBodyRow); +export default TableBodyRow; diff --git a/src/components/TableFilter.js b/src/components/TableFilter.js index 07a81d210..6b116de0f 100644 --- a/src/components/TableFilter.js +++ b/src/components/TableFilter.js @@ -34,14 +34,10 @@ const classes = { checkboxIcon: `${PREFIX}-checkboxIcon`, checkbox: `${PREFIX}-checkbox`, checked: `${PREFIX}-checked`, - gridListTile: `${PREFIX}-gridListTile` + gridListTile: `${PREFIX}-gridListTile`, }; -const Root = styled('div')(( - { - theme - } -) => ({ +const Root = styled('div')(({ theme }) => ({ [`&.${classes.root}`]: { backgroundColor: theme.palette.background.default, padding: '24px 24px 36px 24px', @@ -116,7 +112,7 @@ const Root = styled('div')(( [`& .${classes.gridListTile}`]: { marginTop: '16px', - } + }, })); export {}; @@ -198,7 +194,7 @@ class TableFilter extends React.Component { renderCheckbox(column, index, components = {}) { const CheckboxComponent = components.Checkbox || Checkbox; - const { filterData } = this.props; + const { filterData } = this.props; const { filterList } = this.state; const renderItem = column.filterOptions && column.filterOptions.renderValue ? column.filterOptions.renderValue : v => v; @@ -245,7 +241,7 @@ class TableFilter extends React.Component { } renderSelect(column, index) { - const { filterData, options } = this.props; + const { filterData, options } = this.props; const { filterList } = this.state; const textLabels = options.textLabels.filter; const renderItem = @@ -283,7 +279,7 @@ class TableFilter extends React.Component { } renderTextField(column, index) { - const { } = this.props; + const {} = this.props; const { filterList } = this.state; if (column.filterOptions && column.filterOptions.renderValue) { console.warn('Custom renderValue not supported for textField filters'); @@ -313,7 +309,7 @@ class TableFilter extends React.Component { renderMultiselect(column, index, components = {}) { const CheckboxComponent = components.Checkbox || Checkbox; - const { filterData } = this.props; + const { filterData } = this.props; const { filterList } = this.state; const renderItem = column.filterOptions && column.filterOptions.renderValue ? column.filterOptions.renderValue : v => v; @@ -357,7 +353,7 @@ class TableFilter extends React.Component { } renderCustomField(column, index) { - const { 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 = @@ -409,7 +405,7 @@ class TableFilter extends React.Component { }; render() { - const { columns, options, customFooter, filterList, components = {} } = this.props; + const { columns, options, customFooter, filterList, components = {} } = this.props; const textLabels = options.textLabels.filter; return ( @@ -457,4 +453,4 @@ class TableFilter extends React.Component { } } -export default (TableFilter); +export default TableFilter; diff --git a/src/components/TableFilterList.js b/src/components/TableFilterList.js index 39e12197b..103b7db6d 100644 --- a/src/components/TableFilterList.js +++ b/src/components/TableFilterList.js @@ -7,7 +7,7 @@ const PREFIX = 'MUIDataTableFilterList'; const classes = { root: `${PREFIX}-root`, - chip: `${PREFIX}-chip` + chip: `${PREFIX}-chip`, }; const Root = styled('div')(() => ({ @@ -20,7 +20,7 @@ const Root = styled('div')(() => ({ [`& .${classes.chip}`]: { margin: '8px 8px 0px 0px', - } + }, })); const TableFilterList = ({ @@ -33,7 +33,6 @@ const TableFilterList = ({ customFilterListUpdate, ItemComponent = TableFilterListItem, }) => { - const { serverSide } = options; const removeFilter = (index, filterValue, columnName, filterType, customFilterListUpdate = null) => { diff --git a/src/components/TableFooter.js b/src/components/TableFooter.js index 6324f3c22..dafe27a77 100644 --- a/src/components/TableFooter.js +++ b/src/components/TableFooter.js @@ -7,7 +7,7 @@ import PropTypes from 'prop-types'; const PREFIX = 'MUIDataTableFooter'; const classes = { - root: `${PREFIX}-root` + root: `${PREFIX}-root`, }; const StyledMuiTable = styled(MuiTable)(() => ({ @@ -15,11 +15,10 @@ const StyledMuiTable = styled(MuiTable)(() => ({ '@media print': { display: 'none', }, - } + }, })); const TableFooter = ({ options, rowCount, page, rowsPerPage, changeRowsPerPage, changePage }) => { - const { customFooter, pagination = true } = options; if (customFooter) { diff --git a/src/components/TableHead.js b/src/components/TableHead.js index 9c2cc42c9..cc02020cd 100644 --- a/src/components/TableHead.js +++ b/src/components/TableHead.js @@ -12,14 +12,10 @@ const classes = { main: `${PREFIX}-main`, responsiveStacked: `${PREFIX}-responsiveStacked`, responsiveStackedAlways: `${PREFIX}-responsiveStackedAlways`, - responsiveSimple: `${PREFIX}-responsiveSimple` + responsiveSimple: `${PREFIX}-responsiveSimple`, }; -const StyledMuiTableHead = styled(MuiTableHead)(( - { - theme - } -) => ({ +const StyledMuiTableHead = styled(MuiTableHead)(({ theme }) => ({ [`&.${classes.main}`]: {}, [`&.${classes.responsiveStacked}`]: { @@ -36,7 +32,7 @@ const StyledMuiTableHead = styled(MuiTableHead)(( [theme.breakpoints.down('sm')]: { display: 'none', }, - } + }, })); const TableHead = ({ @@ -59,8 +55,6 @@ const TableHead = ({ toggleSort, updateColumnOrder, }) => { - - if (columnOrder === null) { columnOrder = columns ? columns.map((item, idx) => idx) : []; } diff --git a/src/components/TableHeadCell.js b/src/components/TableHeadCell.js index d8e556427..a4d76130f 100644 --- a/src/components/TableHeadCell.js +++ b/src/components/TableHeadCell.js @@ -25,14 +25,10 @@ const classes = { toolButton: `${PREFIX}-toolButton`, contentWrapper: `${PREFIX}-contentWrapper`, hintIconAlone: `${PREFIX}-hintIconAlone`, - hintIconWithSortIcon: `${PREFIX}-hintIconWithSortIcon` + hintIconWithSortIcon: `${PREFIX}-hintIconWithSortIcon`, }; -const StyledTableCell = styled(TableCell)(( - { - theme - } -) => ({ +const StyledTableCell = styled(TableCell)(({ theme }) => ({ [`& .${classes.root}`]: {}, [`& .${classes.fixedHeader}`]: { @@ -94,7 +90,7 @@ const StyledTableCell = styled(TableCell)(( [`& .${classes.hintIconWithSortIcon}`]: { marginTop: '-3px', - } + }, })); const TableHeadCell = ({ @@ -123,8 +119,6 @@ const TableHeadCell = ({ const [sortTooltipOpen, setSortTooltipOpen] = useState(false); const [hintTooltipOpen, setHintTooltipOpen] = useState(false); - - const handleKeyboardSortInput = e => { if (e.key === 'Enter') { toggleSort(index); diff --git a/src/components/TableHeadRow.js b/src/components/TableHeadRow.js index b27a4c54b..ea95a90c3 100644 --- a/src/components/TableHeadRow.js +++ b/src/components/TableHeadRow.js @@ -3,19 +3,18 @@ import { styled } from '@mui/material/styles'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import TableRow from '@mui/material/TableRow'; + const PREFIX = 'MUIDataTableHeadRow'; const classes = { - root: `${PREFIX}-root` + root: `${PREFIX}-root`, }; const StyledTableRow = styled(TableRow)(() => ({ - [`&.${classes.root}`]: {} + [`&.${classes.root}`]: {}, })); const TableHeadRow = ({ children }) => { - - return ( ({ +const StyledGrow = styled(Grow)(({ theme }) => ({ [`& .${classes.main}`]: { display: 'flex', flex: '1 0 auto', @@ -38,12 +35,10 @@ const StyledGrow = styled(Grow)(( '&:hover': { color: theme.palette.error.main, }, - } + }, })); const TableSearch = ({ options, searchText, onSearch, onHide }) => { - - const handleTextChange = event => { onSearch(event.target.value); }; diff --git a/src/components/TableSelectCell.js b/src/components/TableSelectCell.js index 62d35d062..5bd1f1944 100644 --- a/src/components/TableSelectCell.js +++ b/src/components/TableSelectCell.js @@ -19,14 +19,10 @@ const classes = { expandDisabled: `${PREFIX}-expandDisabled`, checkboxRoot: `${PREFIX}-checkboxRoot`, checked: `${PREFIX}-checked`, - disabled: `${PREFIX}-disabled` + disabled: `${PREFIX}-disabled`, }; -const StyledTableCell = styled(TableCell)(( - { - theme - } -) => ({ +const StyledTableCell = styled(TableCell)(({ theme }) => ({ [`& .${classes.root}`]: { '@media print': { display: 'none', @@ -66,7 +62,7 @@ const StyledTableCell = styled(TableCell)(( [`& .${classes.expandDisabled}`]: {}, [`& .${classes.checkboxRoot}`]: {}, [`& .${classes.checked}`]: {}, - [`& .${classes.disabled}`]: {} + [`& .${classes.disabled}`]: {}, })); const TableSelectCell = ({ @@ -89,7 +85,6 @@ const TableSelectCell = ({ components = {}, ...otherProps }) => { - const CheckboxComponent = components.Checkbox || Checkbox; const ExpandButtonComponent = components.ExpandButton || ExpandButton; diff --git a/src/components/TableToolbarSelect.js b/src/components/TableToolbarSelect.js index da3aff69c..dc3040300 100644 --- a/src/components/TableToolbarSelect.js +++ b/src/components/TableToolbarSelect.js @@ -13,14 +13,10 @@ const classes = { root: `${PREFIX}-root`, title: `${PREFIX}-title`, iconButton: `${PREFIX}-iconButton`, - deleteIcon: `${PREFIX}-deleteIcon` + deleteIcon: `${PREFIX}-deleteIcon`, }; -const StyledPaper = styled(Paper)(( - { - theme - } -) => ({ +const StyledPaper = styled(Paper)(({ theme }) => ({ [`&.${classes.root}`]: { backgroundColor: theme.palette.background.default, flex: '1 1 100%', @@ -44,7 +40,7 @@ const StyledPaper = styled(Paper)(( marginRight: '24px', }, - [`& .${classes.deleteIcon}`]: {} + [`& .${classes.deleteIcon}`]: {}, })); class TableToolbarSelect extends React.Component { @@ -79,7 +75,7 @@ class TableToolbarSelect extends React.Component { }; render() { - const { 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; @@ -104,4 +100,4 @@ class TableToolbarSelect extends React.Component { } } -export default (TableToolbarSelect); +export default TableToolbarSelect; diff --git a/src/components/TableViewCol.js b/src/components/TableViewCol.js index 22ce32394..903d7c521 100644 --- a/src/components/TableViewCol.js +++ b/src/components/TableViewCol.js @@ -6,6 +6,7 @@ import Typography from '@mui/material/Typography'; import FormControl from '@mui/material/FormControl'; import FormGroup from '@mui/material/FormGroup'; import FormControlLabel from '@mui/material/FormControlLabel'; + const PREFIX = 'MUIDataTableViewCol'; const classes = { @@ -16,14 +17,10 @@ const classes = { checkbox: `${PREFIX}-checkbox`, checkboxRoot: `${PREFIX}-checkboxRoot`, checked: `${PREFIX}-checked`, - label: `${PREFIX}-label` + label: `${PREFIX}-label`, }; -const StyledFormControl = styled(FormControl)(( - { - theme - } -) => ({ +const StyledFormControl = styled(FormControl)(({ theme }) => ({ [`&.${classes.root}`]: { padding: '16px 24px 16px 24px', fontFamily: 'Roboto', @@ -57,11 +54,10 @@ const StyledFormControl = styled(FormControl)(( fontSize: '15px', marginLeft: '8px', color: theme.palette.text.primary, - } + }, })); const TableViewCol = ({ columns, options, components = {}, onColumnUpdate, updateColumns }) => { - const textLabels = options.textLabels.viewColumns; const CheckboxComponent = components.Checkbox || Checkbox; diff --git a/src/plug-ins/DebounceSearchRender.js b/src/plug-ins/DebounceSearchRender.js index 876a8cd92..eef49866b 100644 --- a/src/plug-ins/DebounceSearchRender.js +++ b/src/plug-ins/DebounceSearchRender.js @@ -12,7 +12,7 @@ const classes = { main: `${PREFIX}-main`, searchIcon: `${PREFIX}-searchIcon`, searchText: `${PREFIX}-searchText`, - clearIcon: `${PREFIX}-clearIcon` + clearIcon: `${PREFIX}-clearIcon`, }; const StyledDebounceTableSearch = styled(Grow)(({ theme }) => ({ @@ -35,7 +35,7 @@ const StyledDebounceTableSearch = styled(Grow)(({ theme }) => ({ '&:hover': { color: theme.palette.error.main, }, - } + }, })); function debounce(func, wait, immediate) { @@ -75,9 +75,8 @@ class _DebounceTableSearch extends React.Component { } }; - render() { - const { options, onHide, searchText, debounceWait } = this.props; + const { options, onHide, searchText, debounceWait } = this.props; const debouncedSearch = debounce(value => { this.props.onSearch(value); @@ -85,7 +84,6 @@ class _DebounceTableSearch extends React.Component { const clearIconVisibility = options.searchAlwaysOpen ? 'hidden' : 'visible'; - return (
@@ -105,7 +103,7 @@ class _DebounceTableSearch extends React.Component { placeholder={options.searchPlaceholder} {...(options.searchProps ? options.searchProps : {})} /> - +
From 9d60d3addc832ddf2dcac9b11118d6e78da4772c Mon Sep 17 00:00:00 2001 From: Ashfaq Date: Sun, 20 Feb 2022 20:06:01 +0530 Subject: [PATCH 06/12] feat: Performed the jss-in-styles codemod on examples --- examples/Router/ExamplesGrid.js | 33 ++++--- examples/Router/index.js | 25 ++++-- examples/custom-components/TableViewCol.js | 50 ++++++++--- examples/customize-footer/CustomFooter.js | 16 ++-- examples/customize-footer/index.js | 30 +++++-- .../CustomSearchRender.js | 35 +++++--- examples/customize-styling/index.js | 86 ++++++++++--------- examples/customize-toolbar/CustomToolbar.js | 23 +++-- .../CustomToolbarSelect.js | 27 +++--- examples/infinite-scrolling/index.js | 38 +++++--- 10 files changed, 231 insertions(+), 132 deletions(-) diff --git a/examples/Router/ExamplesGrid.js b/examples/Router/ExamplesGrid.js index f248a582f..371d3e2f9 100644 --- a/examples/Router/ExamplesGrid.js +++ b/examples/Router/ExamplesGrid.js @@ -1,35 +1,46 @@ 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 { withStyles } from "tss-react/mui"; import TextField from '@mui/material/TextField'; -const styles = { - container: { +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, }, - card: { + [`& .${classes.card}`]: { '&:hover': { background: 'lightgrey', fontWeight: 500, } }, - cardContent: { + [`& .${classes.cardContent}`]: { '&:last-child': { padding: 8, } }, - link: { + [`& .${classes.link}`]: { textDecoration: 'none', }, - label: { + [`& .${classes.label}`]: { fontWeight: 'inherit' } -}; +}); class ExamplesGrid extends React.Component { @@ -59,7 +70,7 @@ class ExamplesGrid extends React.Component { }); return ( - + Choose an Example ({examplesSortedKeys.length}) Examples @@ -80,9 +91,9 @@ class ExamplesGrid extends React.Component { ))} - + ); } } -export default withStyles(ExamplesGrid, styles); +export default (ExamplesGrid); diff --git a/examples/Router/index.js b/examples/Router/index.js index 5fa34760f..6349adce4 100644 --- a/examples/Router/index.js +++ b/examples/Router/index.js @@ -1,7 +1,7 @@ import React from 'react'; +import { styled } 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 { HashRouter as Router, Route, Switch } from 'react-router-dom'; import ExamplesGrid from './ExamplesGrid'; import examples from '../examples'; import Button from '@mui/material/Button'; @@ -9,15 +9,22 @@ 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 +37,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 +76,7 @@ class Examples extends React.Component { } } -const StyledExamples = withRouter(withStyles(Examples, styles)); +const StyledExamples = withRouter((Examples)); function App() { return ( @@ -79,4 +86,4 @@ function App() { ); } -ReactDOM.render(, document.getElementById('app-root')); +ReactDOM.render(, document.getElementById('app-root')); diff --git a/examples/custom-components/TableViewCol.js b/examples/custom-components/TableViewCol.js index bcb9723a0..1c2ab505e 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,30 @@ 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 PREFIX = 'MUIDataTableViewCol'; -const useStyles = makeStyles({ name: 'MUIDataTableViewCol' })(theme => ({ - root: { +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,26 +38,31 @@ 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, - }, + } })); const TableViewCol = ({ columns, options, components = {}, onColumnUpdate, updateColumns }) => { - const { classes } = useStyles(); + const textLabels = options.textLabels.viewColumns; const CheckboxComponent = components.Checkbox || Checkbox; @@ -58,7 +80,7 @@ const TableViewCol = ({ columns, options, components = {}, onColumnUpdate, updat }; return ( - + {textLabels.title} @@ -93,7 +115,7 @@ const TableViewCol = ({ columns, options, components = {}, onColumnUpdate, updat ); })} - + ); }; diff --git a/examples/customize-footer/CustomFooter.js b/examples/customize-footer/CustomFooter.js index ae02eb859..4f1ce77cd 100644 --- a/examples/customize-footer/CustomFooter.js +++ b/examples/customize-footer/CustomFooter.js @@ -1,12 +1,14 @@ 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"; -import { withStyles } from "tss-react/mui"; +const PREFIX = 'CustomFooter'; +const classes = {}; -const defaultFooterStyles = { -}; +const StyledTableFooter = styled(TableFooter)({ +}); class CustomFooter extends React.Component { @@ -19,7 +21,7 @@ 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', @@ -28,7 +30,7 @@ class CustomFooter extends React.Component { }; return ( - + @@ -52,10 +54,10 @@ class CustomFooter extends React.Component { /> - + ); } } -export default withStyles(CustomFooter, defaultFooterStyles, { name: "CustomFooter" }); \ No newline at end of file +export default (CustomFooter); \ No newline at end of file diff --git a/examples/customize-footer/index.js b/examples/customize-footer/index.js index 025c973d1..12baf19a9 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,22 +10,35 @@ 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, - }, + } })); function Example() { const [resizableColumns, setResizableColumns] = useState(false); const [stickyFooter, setStickyFooter] = useState(true); - const { classes } = useStyles(); + const columns = ['Name', 'Title', 'Location', 'Age', 'Salary']; @@ -134,7 +146,7 @@ function Example() { }; return ( - <> + ( - + ) ); } diff --git a/examples/customize-search-render/CustomSearchRender.js b/examples/customize-search-render/CustomSearchRender.js index 630bc1d55..9da5f22c4 100644 --- a/examples/customize-search-render/CustomSearchRender.js +++ b/examples/customize-search-render/CustomSearchRender.js @@ -1,24 +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 IconButton from '@mui/material/IconButton'; import ClearIcon from '@mui/icons-material/Clear'; -import { withStyles } from "tss-react/mui"; +const PREFIX = 'CustomSearchRender'; -const defaultSearchStyles = theme => ({ - main: { +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 +53,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-styling/index.js b/examples/customize-styling/index.js index 6f25fb05b..016e83f06 100644 --- a/examples/customize-styling/index.js +++ b/examples/customize-styling/index.js @@ -1,7 +1,7 @@ import React from 'react'; +import { styled } from '@mui/material/styles'; import MUIDataTable from '../../src/'; -import { ThemeProvider } from '@mui/material/styles'; -import { withStyles } from 'tss-react/mui'; +import { ThemeProvider } from '@mui/styles'; import { createTheme } from '@mui/material/styles'; import Switch from '@mui/material/Switch'; import FormGroup from '@mui/material/FormGroup'; @@ -10,22 +10,31 @@ import clsx from 'clsx'; import { CacheProvider } from '@emotion/react'; import createCache from '@emotion/cache'; -const muiCache = createCache({ - key: 'mui-datatables', - prepend: true, -}); +const PREFIX = 'ExampleCard.js'; -const customStyles = theme => ({ - BusinessAnalystRow: { +const classes = { + BusinessAnalystRow: `${PREFIX}-BusinessAnalystRow`, + GreyLine: `${PREFIX}-GreyLine`, + NameCell: `${PREFIX}-NameCell` +}; + +const StyledThemeProvider = styled(ThemeProvider)(( + { + 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) { @@ -210,37 +219,30 @@ class Example extends React.Component { }; return ( - - - - - } - label="Dense Table" - /> - - } - label="Responsive Vertical Table" - /> - - - - + + + + } + label="Dense Table" + /> + + } + label="Responsive Vertical Table" + /> + + + ); } } -export default withStyles(Example, customStyles, { name: 'ExampleCardjs' }); +export default (Example); diff --git a/examples/customize-toolbar/CustomToolbar.js b/examples/customize-toolbar/CustomToolbar.js index 2903d43c5..d67bdb6f0 100644 --- a/examples/customize-toolbar/CustomToolbar.js +++ b/examples/customize-toolbar/CustomToolbar.js @@ -1,13 +1,20 @@ 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"; -import { withStyles } from "tss-react/mui"; -const defaultToolbarStyles = { - iconButton: { - }, +const PREFIX = 'CustomToolbar'; + +const classes = { + iconButton: `${PREFIX}-iconButton` }; +// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. +const Root = styled('div')({ + [`& .${classes.iconButton}`]: { + }, +}); + class CustomToolbar extends React.Component { handleClick = () => { @@ -15,19 +22,19 @@ class CustomToolbar extends React.Component { } render() { - const { classes } = this.props; + const { } = this.props; return ( - + - + ); } } -export default withStyles(CustomToolbar, defaultToolbarStyles, { name: "CustomToolbar" }); +export default (CustomToolbar); diff --git a/examples/customize-toolbarselect/CustomToolbarSelect.js b/examples/customize-toolbarselect/CustomToolbarSelect.js index 9f53dbcfb..974a73ce4 100644 --- a/examples/customize-toolbarselect/CustomToolbarSelect.js +++ b/examples/customize-toolbarselect/CustomToolbarSelect.js @@ -1,21 +1,28 @@ 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"; -import { withStyles } from "tss-react/mui"; +const PREFIX = 'CustomToolbarSelect'; -const defaultToolbarSelectStyles = { - iconButton: { +const classes = { + iconButton: `${PREFIX}-iconButton`, + iconContainer: `${PREFIX}-iconContainer`, + inverseIcon: `${PREFIX}-inverseIcon` +}; + +const Root = styled('div')({ + [`& .${classes.iconButton}`]: { }, - iconContainer: { + [`&.${classes.iconContainer}`]: { marginRight: "24px", }, - inverseIcon: { + [`& .${classes.inverseIcon}`]: { transform: "rotate(90deg)", }, -}; +}); class CustomToolbarSelect extends React.Component { handleClickInverseSelection = () => { @@ -39,10 +46,10 @@ class CustomToolbarSelect extends React.Component { }; render() { - const { classes } = this.props; + const { } = this.props; return ( -
+ @@ -58,9 +65,9 @@ class CustomToolbarSelect extends React.Component { -
+ ); } } -export default withStyles(CustomToolbarSelect, defaultToolbarSelectStyles, { name: "CustomToolbarSelect" }); +export default (CustomToolbarSelect); diff --git a/examples/infinite-scrolling/index.js b/examples/infinite-scrolling/index.js index 0f8e430ee..ee86ea89c 100644 --- a/examples/infinite-scrolling/index.js +++ b/examples/infinite-scrolling/index.js @@ -1,4 +1,5 @@ import React, { Fragment, Component } from "react"; +import { styled } from '@mui/material/styles'; import { Waypoint } from "react-waypoint"; import PropTypes from "prop-types"; import MUIDataTable from "../../src/"; @@ -11,30 +12,45 @@ import { TableRow, Paper } from "@mui/material"; -import { withStyles } from "tss-react/mui"; +const PREFIX = 'index'; -const styles = theme => ({ - root: { +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 }, - head: { + + [`& .${classes.head}`]: { backgroundColor: theme.palette.primary.main, color: "#fff", position: "sticky", fontSize: ".6rem", top: 0 }, - table: { + + [`& .${classes.table}`]: { minWidth: 700, height: 200 }, - tableCell: { + + [`& .${classes.tableCell}`]: { fontSize: ".6rem" } -}); +})); class MessageManager extends Component { constructor(props) { @@ -62,7 +78,7 @@ class MessageManager extends Component { if (rowIndex === filteredMessages.length - 10) { return ( - + { console.log("WAYPOINT REACHED"); @@ -77,7 +93,7 @@ class MessageManager extends Component { }} /> {value}* - + ); } else { return {value}; @@ -169,7 +185,7 @@ class MessageManager extends Component { // eslint-disable-next-line max-lines-per-function render() { - const { classes } = this.props; + const { } = this.props; const { filteredMessages } = this.state; return ( @@ -186,4 +202,4 @@ MessageManager.propTypes = { classes: PropTypes.object.isRequired }; -export default withStyles(MessageManager, styles); \ No newline at end of file +export default (MessageManager); \ No newline at end of file From ce2613e0f5ee3f30ed4d1e2542d7999df0917b5f Mon Sep 17 00:00:00 2001 From: Ashfaq Date: Sun, 20 Feb 2022 20:08:49 +0530 Subject: [PATCH 07/12] prettify: Optimized and linted the files --- examples/Router/ExamplesGrid.js | 97 +++-- examples/Router/index.js | 13 +- examples/column-filters/index.js | 102 +++-- examples/column-options-update/index.js | 147 +++---- examples/column-sort/index.js | 75 ++-- examples/component/cities.js | 407 +++++++++++++++++- examples/component/index.js | 119 +++-- examples/csv-export/index.js | 33 +- examples/custom-action-columns/index.js | 215 ++++----- examples/custom-components/TableViewCol.js | 12 +- examples/custom-components/index.js | 95 ++-- examples/customize-columns/index.js | 113 +++-- examples/customize-filter/index.js | 53 +-- examples/customize-footer/CustomFooter.js | 28 +- examples/customize-footer/index.js | 15 +- examples/customize-rows/index.js | 70 ++- .../CustomSearchRender.js | 15 +- examples/customize-search-render/index.js | 21 +- examples/customize-search/index.js | 9 +- examples/customize-sorting/index.js | 28 +- examples/customize-styling/index.js | 19 +- examples/customize-toolbar-icons/index.js | 76 ++-- examples/customize-toolbar/CustomToolbar.js | 26 +- examples/customize-toolbar/index.js | 82 ++-- .../CustomToolbarSelect.js | 34 +- examples/customize-toolbarselect/index.js | 92 ++-- examples/data-as-objects/index.js | 108 +++-- examples/draggable-columns/index.js | 150 ++++--- examples/examples.js | 8 +- examples/expandable-rows/index.js | 25 +- examples/fixed-header/index.js | 139 +++--- examples/hide-columns-print/index.js | 101 ++--- examples/infinite-scrolling/index.js | 139 +++--- examples/large-data-set/index.js | 146 ++++--- examples/on-download/index.js | 1 - examples/on-table-init/index.js | 3 +- examples/resizable-columns/index.js | 79 ++-- examples/selectable-rows/index.js | 106 +++-- examples/serverside-filters/index.js | 63 ++- examples/serverside-sorting/cities.js | 1 + examples/serverside-sorting/index.js | 24 +- examples/simple-no-toolbar/index.js | 23 +- examples/text-localization/index.js | 96 ++--- examples/themes/index.js | 13 +- 44 files changed, 1770 insertions(+), 1451 deletions(-) diff --git a/examples/Router/ExamplesGrid.js b/examples/Router/ExamplesGrid.js index 371d3e2f9..2e21f35dd 100644 --- a/examples/Router/ExamplesGrid.js +++ b/examples/Router/ExamplesGrid.js @@ -1,8 +1,8 @@ -import {Link} from "react-router-dom"; +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 { Card, CardContent, Grid, Typography } from '@mui/material'; +import React from 'react'; +import examples from '../examples'; import TextField from '@mui/material/TextField'; const PREFIX = 'ExamplesGrid'; @@ -12,70 +12,79 @@ const classes = { card: `${PREFIX}-card`, cardContent: `${PREFIX}-cardContent`, link: `${PREFIX}-link`, - label: `${PREFIX}-label` + 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.container}`]: { + flexGrow: 1, + justifyContent: 'center', + alignItems: 'center', + marginTop: 16, + }, + [`& .${classes.card}`]: { + '&:hover': { + background: 'lightgrey', + fontWeight: 500, }, - [`& .${classes.card}`]: { - '&:hover': { - background: 'lightgrey', - fontWeight: 500, - } + }, + [`& .${classes.cardContent}`]: { + '&:last-child': { + padding: 8, }, - [`& .${classes.cardContent}`]: { - '&:last-child': { - padding: 8, - } - }, - [`& .${classes.link}`]: { - textDecoration: 'none', - }, - [`& .${classes.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; + 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)} + /> @@ -84,7 +93,9 @@ class ExamplesGrid extends React.Component { - {label} + + {label} + @@ -96,4 +107,4 @@ class ExamplesGrid extends React.Component { } } -export default (ExamplesGrid); +export default ExamplesGrid; diff --git a/examples/Router/index.js b/examples/Router/index.js index 6349adce4..a54bb19d5 100644 --- a/examples/Router/index.js +++ b/examples/Router/index.js @@ -1,19 +1,16 @@ import React from 'react'; -import { styled } from '@mui/material/styles'; +import { createTheme, styled, ThemeProvider } from '@mui/material/styles'; import ReactDOM from 'react-dom'; -import { HashRouter as Router, Route, Switch } from 'react-router-dom'; +import { HashRouter as Router, Route, Switch, withRouter } from 'react-router-dom'; 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 PREFIX = 'index'; const classes = { root: `${PREFIX}-root`, - contentWrapper: `${PREFIX}-contentWrapper` + contentWrapper: `${PREFIX}-contentWrapper`, }; const StyledApp = styled(App)({ @@ -37,7 +34,7 @@ class Examples extends React.Component { }; render() { - const { } = this.props; + const {} = this.props; var returnHomeStyle = { padding: '0px', margin: '20px 0 20px 0' }; @@ -76,7 +73,7 @@ class Examples extends React.Component { } } -const StyledExamples = withRouter((Examples)); +const StyledExamples = withRouter(Examples); function App() { return ( 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 1c2ab505e..a1f9508a7 100644 --- a/examples/custom-components/TableViewCol.js +++ b/examples/custom-components/TableViewCol.js @@ -7,6 +7,7 @@ import Button from '@mui/material/Button'; import FormControl from '@mui/material/FormControl'; import FormGroup from '@mui/material/FormGroup'; import FormControlLabel from '@mui/material/FormControlLabel'; + const PREFIX = 'MUIDataTableViewCol'; const classes = { @@ -17,14 +18,10 @@ const classes = { checkbox: `${PREFIX}-checkbox`, checkboxRoot: `${PREFIX}-checkboxRoot`, checked: `${PREFIX}-checked`, - label: `${PREFIX}-label` + label: `${PREFIX}-label`, }; -const StyledFormControl = styled(FormControl)(( - { - theme - } -) => ({ +const StyledFormControl = styled(FormControl)(({ theme }) => ({ [`&.${classes.root}`]: { padding: '16px 24px 16px 24px', fontFamily: 'Roboto', @@ -58,11 +55,10 @@ const StyledFormControl = styled(FormControl)(( fontSize: '15px', marginLeft: '8px', color: theme.palette.text.primary, - } + }, })); const TableViewCol = ({ columns, options, components = {}, onColumnUpdate, updateColumns }) => { - const textLabels = options.textLabels.viewColumns; const CheckboxComponent = components.Checkbox || Checkbox; 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 4f1ce77cd..6fc6d6d95 100644 --- a/examples/customize-footer/CustomFooter.js +++ b/examples/customize-footer/CustomFooter.js @@ -1,17 +1,16 @@ -import React from "react"; +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"; +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 PREFIX = 'CustomFooter'; const classes = {}; -const StyledTableFooter = styled(TableFooter)({ -}); +const StyledTableFooter = styled(TableFooter)({}); class CustomFooter extends React.Component { - handleRowChange = event => { this.props.changeRowsPerPage(event.target.value); }; @@ -21,12 +20,12 @@ class CustomFooter extends React.Component { }; render() { - const { count, 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 ( @@ -34,7 +33,7 @@ class CustomFooter extends React.Component { - + @@ -57,7 +56,6 @@ class CustomFooter extends React.Component { ); } - } -export default (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 12baf19a9..52a3e07fc 100644 --- a/examples/customize-footer/index.js +++ b/examples/customize-footer/index.js @@ -14,15 +14,11 @@ const PREFIX = 'Example'; const classes = { footerCell: `${PREFIX}-footerCell`, - stickyFooterCell: `${PREFIX}-stickyFooterCell` + 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 - } -) => ({ +const Root = styled('div')(({ theme }) => ({ [`& .${classes.footerCell}`]: { backgroundColor: theme.palette.background.paper, borderBottom: 'none', @@ -32,14 +28,13 @@ const Root = styled('div')(( position: 'sticky', bottom: 0, zIndex: 100, - } + }, })); function Example() { const [resizableColumns, setResizableColumns] = useState(false); const [stickyFooter, setStickyFooter] = useState(true); - const columns = ['Name', 'Title', 'Location', 'Age', 'Salary']; let data = [ @@ -146,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 9da5f22c4..2741ac629 100644 --- a/examples/customize-search-render/CustomSearchRender.js +++ b/examples/customize-search-render/CustomSearchRender.js @@ -4,19 +4,16 @@ 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'; + const PREFIX = 'CustomSearchRender'; const classes = { main: `${PREFIX}-main`, searchText: `${PREFIX}-searchText`, - clearIcon: `${PREFIX}-clearIcon` + clearIcon: `${PREFIX}-clearIcon`, }; -const StyledGrow = styled(Grow)(( - { - theme - } -) => ({ +const StyledGrow = styled(Grow)(({ theme }) => ({ [`& .${classes.main}`]: { display: 'flex', flex: '1 0 auto', @@ -30,7 +27,7 @@ const StyledGrow = styled(Grow)(( '&:hover': { color: theme.palette.error.main, }, - } + }, })); class CustomSearchRender extends React.Component { @@ -53,7 +50,7 @@ class CustomSearchRender extends React.Component { }; render() { - const { options, onHide, searchText } = this.props; + const { options, onHide, searchText } = this.props; return ( @@ -78,4 +75,4 @@ class CustomSearchRender extends React.Component { } } -export default (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 016e83f06..d502435be 100644 --- a/examples/customize-styling/index.js +++ b/examples/customize-styling/index.js @@ -1,28 +1,21 @@ import React from 'react'; -import { styled } from '@mui/material/styles'; +import { createTheme, styled } from '@mui/material/styles'; import MUIDataTable from '../../src/'; import { ThemeProvider } from '@mui/styles'; -import { createTheme } from '@mui/material/styles'; import Switch from '@mui/material/Switch'; import FormGroup from '@mui/material/FormGroup'; import FormControlLabel from '@mui/material/FormControlLabel'; import clsx from 'clsx'; -import { CacheProvider } from '@emotion/react'; -import createCache from '@emotion/cache'; const PREFIX = 'ExampleCard.js'; const classes = { BusinessAnalystRow: `${PREFIX}-BusinessAnalystRow`, GreyLine: `${PREFIX}-GreyLine`, - NameCell: `${PREFIX}-NameCell` + NameCell: `${PREFIX}-NameCell`, }; -const StyledThemeProvider = styled(ThemeProvider)(( - { - theme - } -) => ({ +const StyledThemeProvider = styled(ThemeProvider)(({ theme }) => ({ [`& .${classes.BusinessAnalystRow}`]: { '& td': { backgroundColor: '#FAA' }, }, @@ -33,7 +26,7 @@ const StyledThemeProvider = styled(ThemeProvider)(( [`& .${classes.NameCell}`]: { fontWeight: 900, - } + }, })); class Example extends React.Component { @@ -115,7 +108,7 @@ class Example extends React.Component { [this.props.classes.NameCell]: value === 'Mel Brooks', }), style: { - borderRight: '2px solid blue', + //borderRight: '2px solid blue' }, }; }, @@ -245,4 +238,4 @@ class Example extends React.Component { } } -export default (Example); +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 d67bdb6f0..a0b689d3f 100644 --- a/examples/customize-toolbar/CustomToolbar.js +++ b/examples/customize-toolbar/CustomToolbar.js @@ -1,32 +1,31 @@ -import React from "react"; +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"; +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` + iconButton: `${PREFIX}-iconButton`, }; // TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. const Root = styled('div')({ - [`& .${classes.iconButton}`]: { - }, + [`& .${classes.iconButton}`]: {}, }); class CustomToolbar extends React.Component { - handleClick = () => { - console.log("clicked on icon!"); - } + console.log('clicked on icon!'); + }; render() { - const { } = this.props; + const {} = this.props; return ( - + @@ -34,7 +33,6 @@ class CustomToolbar extends React.Component { ); } - } -export default (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 974a73ce4..6f829ba11 100644 --- a/examples/customize-toolbarselect/CustomToolbarSelect.js +++ b/examples/customize-toolbarselect/CustomToolbarSelect.js @@ -1,26 +1,26 @@ -import React from "react"; +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"; +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 PREFIX = 'CustomToolbarSelect'; const classes = { iconButton: `${PREFIX}-iconButton`, iconContainer: `${PREFIX}-iconContainer`, - inverseIcon: `${PREFIX}-inverseIcon` + inverseIcon: `${PREFIX}-inverseIcon`, }; const Root = styled('div')({ - [`& .${classes.iconButton}`]: { - }, + [`& .${classes.iconButton}`]: {}, [`&.${classes.iconContainer}`]: { - marginRight: "24px", + marginRight: '24px', }, [`& .${classes.inverseIcon}`]: { - transform: "rotate(90deg)", + transform: 'rotate(90deg)', }, }); @@ -46,21 +46,21 @@ class CustomToolbarSelect extends React.Component { }; render() { - const { } = this.props; + const {} = this.props; return ( - + - + - + - + @@ -70,4 +70,4 @@ class CustomToolbarSelect extends React.Component { } } -export default (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..ac0fa1107 100644 --- a/examples/expandable-rows/index.js +++ b/examples/expandable-rows/index.js @@ -2,9 +2,8 @@ import React from 'react'; import MUIDataTable, { ExpandButton } from '../../src/'; import TableRow from '@mui/material/TableRow'; import TableCell from '@mui/material/TableCell'; -import { createTheme, ThemeProvider } from '@mui/material/styles'; -import { CacheProvider } from '@emotion/react'; -import createCache from '@emotion/cache'; +import { ThemeProvider } from '@mui/styles'; +import { createTheme } from '@mui/material/styles'; const muiCache = createCache({ key: 'mui-datatables', @@ -127,17 +126,15 @@ class Example extends React.Component { }; return ( - - - - - + + + ); } } 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 ee86ea89c..39e2e0df8 100644 --- a/examples/infinite-scrolling/index.js +++ b/examples/infinite-scrolling/index.js @@ -1,55 +1,43 @@ -import React, { Fragment, Component } from "react"; -import { styled } from '@mui/material/styles'; -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 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` + 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 - } -) => ({ +const Root = styled('div')(({ theme }) => ({ [`& .${classes.root}`]: { - width: "100%", - overflowX: "auto", + width: '100%', + overflowX: 'auto', height: 300, - flexGrow: 1 + flexGrow: 1, }, [`& .${classes.head}`]: { backgroundColor: theme.palette.primary.main, - color: "#fff", - position: "sticky", - fontSize: ".6rem", - top: 0 + color: '#fff', + position: 'sticky', + fontSize: '.6rem', + top: 0, }, [`& .${classes.table}`]: { minWidth: 700, - height: 200 + height: 200, }, [`& .${classes.tableCell}`]: { - fontSize: ".6rem" - } + fontSize: '.6rem', + }, })); class MessageManager extends Component { @@ -58,7 +46,7 @@ class MessageManager extends Component { this.props = props; this.state = { - filteredMessages: [] + filteredMessages: [], }; } @@ -68,27 +56,24 @@ 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], }); }} /> @@ -98,46 +83,46 @@ class MessageManager extends Component { } 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) { @@ -153,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 { } = this.props; + const {} = this.props; const { filteredMessages } = this.state; return ( - + ); } } + MessageManager.propTypes = { - classes: PropTypes.object.isRequired + classes: PropTypes.object.isRequired, }; -export default (MessageManager); \ 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/examples/themes/index.js b/examples/themes/index.js index b2e0107cb..649656e4c 100644 --- a/examples/themes/index.js +++ b/examples/themes/index.js @@ -1,8 +1,7 @@ import React from 'react'; import MUIDataTable from '../../src/'; -import { createTheme, ThemeProvider } from '@mui/material/styles'; -import createCache from '@emotion/cache'; -import { CacheProvider } from '@emotion/react'; +import { ThemeProvider } from '@mui/styles'; +import { createTheme } from '@mui/material/styles'; const muiCache = createCache({ key: 'mui-datatables', @@ -92,11 +91,9 @@ class Example extends React.Component { }); return ( - - - - - + + + ); } } From c20a794f05ef347adfc0c269c97753e4b14ebf49 Mon Sep 17 00:00:00 2001 From: Ashfaq Date: Sun, 20 Feb 2022 20:19:17 +0530 Subject: [PATCH 08/12] fix: Fixed the cache provider issue with the examples --- examples/Router/index.js | 2 + examples/customize-styling/index.js | 61 +++++++++++++++++------------ examples/expandable-rows/index.js | 24 ++++++------ examples/themes/index.js | 13 +++--- 4 files changed, 60 insertions(+), 40 deletions(-) diff --git a/examples/Router/index.js b/examples/Router/index.js index a54bb19d5..55af81e0f 100644 --- a/examples/Router/index.js +++ b/examples/Router/index.js @@ -5,6 +5,8 @@ import { HashRouter as Router, Route, Switch, withRouter } from 'react-router-do import ExamplesGrid from './ExamplesGrid'; import examples from '../examples'; import Button from '@mui/material/Button'; +import { CacheProvider } from '@emotion/react'; +import createCache from '@emotion/cache'; const PREFIX = 'index'; diff --git a/examples/customize-styling/index.js b/examples/customize-styling/index.js index d502435be..2c304abda 100644 --- a/examples/customize-styling/index.js +++ b/examples/customize-styling/index.js @@ -1,11 +1,17 @@ import React from 'react'; -import { createTheme, styled } from '@mui/material/styles'; +import { createTheme, styled, ThemeProvider } from '@mui/material/styles'; import MUIDataTable from '../../src/'; -import { ThemeProvider } from '@mui/styles'; import Switch from '@mui/material/Switch'; import FormGroup from '@mui/material/FormGroup'; import FormControlLabel from '@mui/material/FormControlLabel'; import clsx from 'clsx'; +import { CacheProvider } from '@emotion/react'; +import createCache from '@emotion/cache'; + +const muiCache = createCache({ + key: 'mui-datatables', + prepend: true, +}); const PREFIX = 'ExampleCard.js'; @@ -212,28 +218,35 @@ class Example extends React.Component { }; return ( - - - - } - label="Dense Table" - /> - - } - label="Responsive Vertical Table" - /> - - - + + + + + } + label="Dense Table" + /> + + } + label="Responsive Vertical Table" + /> + + + + ); } } diff --git a/examples/expandable-rows/index.js b/examples/expandable-rows/index.js index ac0fa1107..3e324e5cd 100644 --- a/examples/expandable-rows/index.js +++ b/examples/expandable-rows/index.js @@ -2,8 +2,8 @@ import React from 'react'; import MUIDataTable, { ExpandButton } from '../../src/'; import TableRow from '@mui/material/TableRow'; import TableCell from '@mui/material/TableCell'; -import { ThemeProvider } from '@mui/styles'; -import { createTheme } from '@mui/material/styles'; +import { createTheme, ThemeProvider } from '@mui/material/styles'; +import createCache from '@emotion/cache'; const muiCache = createCache({ key: 'mui-datatables', @@ -126,15 +126,17 @@ class Example extends React.Component { }; return ( - - - + + + + + ); } } diff --git a/examples/themes/index.js b/examples/themes/index.js index 649656e4c..b2e0107cb 100644 --- a/examples/themes/index.js +++ b/examples/themes/index.js @@ -1,7 +1,8 @@ import React from 'react'; import MUIDataTable from '../../src/'; -import { ThemeProvider } from '@mui/styles'; -import { createTheme } from '@mui/material/styles'; +import { createTheme, ThemeProvider } from '@mui/material/styles'; +import createCache from '@emotion/cache'; +import { CacheProvider } from '@emotion/react'; const muiCache = createCache({ key: 'mui-datatables', @@ -91,9 +92,11 @@ class Example extends React.Component { }); return ( - - - + + + + + ); } } From e764da3a0690fa3f7c6ccdc900b76535ed6e4d88 Mon Sep 17 00:00:00 2001 From: Ashfaq Date: Sun, 20 Feb 2022 20:28:53 +0530 Subject: [PATCH 09/12] fix: Fixed the issue with the example --- examples/Router/ExamplesGrid.js | 2 -- examples/expandable-rows/index.js | 1 + 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/examples/Router/ExamplesGrid.js b/examples/Router/ExamplesGrid.js index 2e21f35dd..231cab5f3 100644 --- a/examples/Router/ExamplesGrid.js +++ b/examples/Router/ExamplesGrid.js @@ -54,8 +54,6 @@ class ExamplesGrid extends React.Component { }; render() { - const { classes } = this.props; - // Sort Examples alphabetically const examplesSorted = {}; Object.keys(examples) diff --git a/examples/expandable-rows/index.js b/examples/expandable-rows/index.js index 3e324e5cd..c05cafacc 100644 --- a/examples/expandable-rows/index.js +++ b/examples/expandable-rows/index.js @@ -3,6 +3,7 @@ import MUIDataTable, { ExpandButton } from '../../src/'; import TableRow from '@mui/material/TableRow'; import TableCell from '@mui/material/TableCell'; import { createTheme, ThemeProvider } from '@mui/material/styles'; +import { CacheProvider } from '@emotion/react'; import createCache from '@emotion/cache'; const muiCache = createCache({ From a2edb424ef1d97fb2ccaa6761289cb51969cdf3f Mon Sep 17 00:00:00 2001 From: Ashfaq Date: Sun, 20 Feb 2022 20:52:15 +0530 Subject: [PATCH 10/12] fix: Updated the examples to fix the classes issue --- examples/customize-styling/index.js | 45 ++++++++++++++--------------- examples/expandable-rows/index.js | 14 ++++----- 2 files changed, 29 insertions(+), 30 deletions(-) diff --git a/examples/customize-styling/index.js b/examples/customize-styling/index.js index 2c304abda..d653cee47 100644 --- a/examples/customize-styling/index.js +++ b/examples/customize-styling/index.js @@ -13,7 +13,7 @@ const muiCache = createCache({ prepend: true, }); -const PREFIX = 'ExampleCard.js'; +const PREFIX = 'customize-styling'; const classes = { BusinessAnalystRow: `${PREFIX}-BusinessAnalystRow`, @@ -21,7 +21,7 @@ const classes = { NameCell: `${PREFIX}-NameCell`, }; -const StyledThemeProvider = styled(ThemeProvider)(({ theme }) => ({ +const StyledThemeProvider = styled(`div`)(({ theme }) => ({ [`& .${classes.BusinessAnalystRow}`]: { '& td': { backgroundColor: '#FAA' }, }, @@ -44,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: { @@ -90,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', @@ -111,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', @@ -201,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' }, }; @@ -219,7 +218,7 @@ class Example extends React.Component { return ( - + 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', + }, }, }, }, From d5361b1c37e478618d7f81df15742ce0655d2f25 Mon Sep 17 00:00:00 2001 From: Ashfaq Date: Sun, 20 Feb 2022 21:34:11 +0530 Subject: [PATCH 11/12] fix: Fixed the custom toolbar component --- examples/customize-toolbar/CustomToolbar.js | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/examples/customize-toolbar/CustomToolbar.js b/examples/customize-toolbar/CustomToolbar.js index a0b689d3f..d624ed354 100644 --- a/examples/customize-toolbar/CustomToolbar.js +++ b/examples/customize-toolbar/CustomToolbar.js @@ -10,8 +10,7 @@ const classes = { iconButton: `${PREFIX}-iconButton`, }; -// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. -const Root = styled('div')({ +const StyledTooltip = styled(Tooltip)({ [`& .${classes.iconButton}`]: {}, }); @@ -24,13 +23,11 @@ class CustomToolbar extends React.Component { const {} = this.props; return ( - - - - - - - + + + + + ); } } From 4ea5d0db46f24ba5a77eb6eba1995fedf9de16f8 Mon Sep 17 00:00:00 2001 From: Ashfaq Date: Sun, 20 Feb 2022 21:38:29 +0530 Subject: [PATCH 12/12] refractor: Removed the tss react dependency --- package.json | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) 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",