Skip to content

Commit 2ce6c87

Browse files
patorjkpatorjk
authored
Merge branch 'master' into fix/global-print-styles
2 parents af295a9 + 3a676a6 commit 2ce6c87

9 files changed

Lines changed: 5086 additions & 4332 deletions

File tree

‎README.md‎

Lines changed: 27 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<img src="https://user-images.githubusercontent.com/19170080/34070522-e15d32e2-e235-11e7-8af5-fa704cdcad56.png" />
33
</div>
44

5-
# MUI-Datatables - Datatables for Material-UI
5+
# MUI-Datatables - Datatables for MUI (formerly Material-UI)
66

77
[![Build Status](https://travis-ci.org/gregnb/mui-datatables.svg?branch=master)](https://travis-ci.org/gregnb/mui-datatables)
88
[![NPM Downloads](https://img.shields.io/npm/dt/mui-datatables.svg?style=flat)](https://npmcharts.com/compare/mui-datatables?minimal=true)
@@ -18,20 +18,27 @@ Version 3 has been released! You can read about the [updates here](https://githu
1818
</div>
1919

2020
# Table of contents
21-
* [Install](#install)
22-
* [Demo](#demo)
23-
* [Compatibility](#compatibility)
24-
* [Usage](#usage)
25-
* [API](#api)
26-
* [Customize Columns](#customize-columns)
27-
* [Plug-ins](#plug-ins)
28-
* [Customize Styling](#customize-styling)
29-
* [Custom Components](#custom-components)
30-
* [Remote Data](#remote-data)
31-
* [Localization](#localization)
32-
* [Contributing](#contributing)
33-
* [License](#licence)
34-
* [Thanks](#thanks)
21+
- [MUI-Datatables - Datatables for MUI (formerly Material-UI)](#mui-datatables---datatables-for-mui-formerly-material-ui)
22+
- [Table of contents](#table-of-contents)
23+
- [Install](#install)
24+
- [Compatibility](#compatibility)
25+
- [Demo](#demo)
26+
- [Usage](#usage)
27+
- [API](#api)
28+
- [&lt;MUIDataTable />](#muidatatable-)
29+
- [Options:](#options)
30+
- [Customize Columns](#customize-columns)
31+
- [Column:](#column)
32+
- [Column Options:](#column-options)
33+
- [Plug-ins](#plug-ins)
34+
- [Available Plug-ins:](#available-plug-ins)
35+
- [Customize Styling](#customize-styling)
36+
- [Custom Components](#custom-components)
37+
- [Remote Data](#remote-data)
38+
- [Localization](#localization)
39+
- [Contributing](#contributing)
40+
- [License](#license)
41+
- [Thanks](#thanks)
3542

3643
## Install
3744

@@ -47,7 +54,7 @@ If your project doesn't already use them, you need to install mui v5 and it's ic
4754
| ^2.0.0 | ^3.0.0 | `@material-ui/core`,`@material-ui/icons` |
4855
| ^3.0.0 | ^4.10.0 | `@material-ui/core`,`@material-ui/icons` |
4956
| ^3.8.0 | ^4.12.0 | `@material-ui/core`,`@material-ui/icons` |
50-
| ^4.0.0 | ^5.0.0 | `@mui/material`,`@mui/icons-material` |
57+
| ^4.0.0 | ^5.9.3 | `@mui/material`,`@mui/icons-material` |
5158

5259
## Demo
5360

@@ -178,7 +185,7 @@ The component accepts the following props:
178185
|**`customTableBodyFooterRender`**|function||Render a footer under the table body but above the table's standard footer. This is useful for creating footers for individual columns. [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/customize-footer/index.js)
179186
|**`customToolbar`**|function||Render a custom toolbar `function({displayData}) => React Component`
180187
|**`customToolbarSelect`**|function||Render a custom selected rows toolbar. `function(selectedRows, displayData, setSelectedRows) => void`
181-
|**`download`**|boolean or string|true|Show/hide download icon from toolbar. Possible values:<p><ul><li>true: Button is visiable and clickable.</li><li>false: Button is not visible.</li><li>disabled: Button is visible, but not clickable.</li></ul></p>
188+
|**`download`**|boolean or string|true|Show/hide download icon from toolbar. Possible values:<p><ul><li>true: Button is visible and clickable.</li><li>false: Button is not visible.</li><li>disabled: Button is visible, but not clickable.</li></ul></p>
182189
|**`downloadOptions`**|object|see ->|An object of options to change the output of the CSV file:<p><ul><li>`filename`: string</li><li>`separator`: string</li><li>`filterOptions`: object<ul><li>`useDisplayedColumnsOnly`: boolean</li><li>`useDisplayedRowsOnly`: boolean</li></ul></li></ul></p><p>Default Value:`{filename: 'tableDownload.csv', separator: ','}`</p>
183190
|**`draggableColumns`**|object|{}|An object of options describing how dragging columns should work. The options are: <p><ul><li>`enabled:boolean`: Indicates if draggable columns are enabled. Defaults to false.</li><li>`transitionTime:number`: The time in milliseconds it takes for columns to swap positions. Defaults to 300.</li></ul></p>To disable the dragging of a particular column, see the "draggable" option in the columns options. Dragging a column to a new position updates the columnOrder array and triggers the onColumnOrderChange callback.
184191
|**`elevation`**|number|4|Shadow depth applied to Paper component.
@@ -364,14 +371,7 @@ Using Material-UI theme overrides will allow you to customize styling to your li
364371
```js
365372
import React from "react";
366373
import MUIDataTable from "mui-datatables";
367-
import { createTheme, ThemeProvider } from '@material-ui/core/styles';
368-
import { CacheProvider } from "@emotion/react";
369-
import createCache from "@emotion/cache";
370-
371-
const muiCache = createCache({
372-
"key": "mui",
373-
"prepend": true
374-
});
374+
import { createTheme, ThemeProvider } from '@mui/material/styles';
375375

376376
class BodyCellExample extends React.Component {
377377

@@ -390,11 +390,9 @@ class BodyCellExample extends React.Component {
390390
render() {
391391

392392
return (
393-
<CacheProvider value={muiCache}>
394393
<ThemeProvider theme={this.getMuiTheme()}>
395-
<MUIDataTable title={"ACME Employee list"} data={data} columns={columns} options={options} />
394+
<MUIDataTable title={"ACME Employee list"} data={data} columns={columns} options={options} />
396395
</ThemeProvider>
397-
</CacheProvider>
398396
);
399397

400398
}
@@ -407,7 +405,7 @@ class BodyCellExample extends React.Component {
407405
You can pass custom components to further customize the table:
408406
```js
409407
import React from "react";
410-
import Chip from '@material-ui/core/Chip';
408+
import Chip from '@mui/material/Chip';
411409
import MUIDataTable, { TableFilterList } from "mui-datatables";
412410

413411
const CustomChip = ({ label, onDelete }) => {

‎examples/Router/index.js‎

Lines changed: 29 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
import React from 'react';
2-
import ReactDOM from 'react-dom';
2+
import { createRoot } from 'react-dom/client';
33
import { HashRouter as Router, Route, Switch, withRouter } from 'react-router-dom';
44
import { withStyles } from 'tss-react/mui';
55
import ExamplesGrid from './ExamplesGrid';
66
import examples from '../examples';
77
import Button from '@mui/material/Button';
88
import { createTheme, ThemeProvider } from '@mui/material/styles';
9-
import { CacheProvider } from '@emotion/react';
10-
import createCache from '@emotion/cache';
119

1210
const styles = {
1311
root: {
@@ -19,11 +17,6 @@ const styles = {
1917
},
2018
};
2119

22-
const muiCache = createCache({
23-
key: 'mui-datatables',
24-
prepend: true,
25-
});
26-
2720
class Examples extends React.Component {
2821
returnHome = () => {
2922
this.props.history.push('/');
@@ -37,34 +30,32 @@ class Examples extends React.Component {
3730
const defaultTheme = createTheme();
3831

3932
return (
40-
<CacheProvider value={muiCache}>
41-
<ThemeProvider theme={defaultTheme}>
42-
<main className={classes.root}>
43-
<div className={classes.contentWrapper}>
44-
<Switch>
45-
<Route path="/" exact render={() => <ExamplesGrid examples={examples} />} />
46-
{Object.keys(examples).map((label, index) => (
47-
<Route
48-
key={index}
49-
path={`/${label.replace(/\s+/g, '-').toLowerCase()}`}
50-
exact
51-
component={examples[label]}
52-
/>
53-
))}
54-
</Switch>
55-
<div>
56-
{this.props.location.pathname !== '/' && (
57-
<div style={returnHomeStyle}>
58-
<Button color="primary" onClick={this.returnHome}>
59-
Back to Example Index
60-
</Button>
61-
</div>
62-
)}
63-
</div>
33+
<ThemeProvider theme={defaultTheme}>
34+
<main className={classes.root}>
35+
<div className={classes.contentWrapper}>
36+
<Switch>
37+
<Route path="/" exact render={() => <ExamplesGrid examples={examples} />} />
38+
{Object.keys(examples).map((label, index) => (
39+
<Route
40+
key={index}
41+
path={`/${label.replace(/\s+/g, '-').toLowerCase()}`}
42+
exact
43+
component={examples[label]}
44+
/>
45+
))}
46+
</Switch>
47+
<div>
48+
{this.props.location.pathname !== '/' && (
49+
<div style={returnHomeStyle}>
50+
<Button color="primary" onClick={this.returnHome}>
51+
Back to Example Index
52+
</Button>
53+
</div>
54+
)}
6455
</div>
65-
</main>
66-
</ThemeProvider>
67-
</CacheProvider>
56+
</div>
57+
</main>
58+
</ThemeProvider>
6859
);
6960
}
7061
}
@@ -78,5 +69,6 @@ function App() {
7869
</Router>
7970
);
8071
}
81-
82-
ReactDOM.render(<App />, document.getElementById('app-root'));
72+
const container = document.getElementById('app-root');
73+
const root = createRoot(container);
74+
root.render(<App />);

‎examples/customize-styling/index.js‎

Lines changed: 27 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,6 @@ import Switch from '@mui/material/Switch';
77
import FormGroup from '@mui/material/FormGroup';
88
import FormControlLabel from '@mui/material/FormControlLabel';
99
import clsx from 'clsx';
10-
import { CacheProvider } from '@emotion/react';
11-
import createCache from '@emotion/cache';
12-
13-
const muiCache = createCache({
14-
key: 'mui-datatables',
15-
prepend: true,
16-
});
1710

1811
const customStyles = theme => ({
1912
BusinessAnalystRow: {
@@ -210,35 +203,33 @@ class Example extends React.Component {
210203
};
211204

212205
return (
213-
<CacheProvider value={muiCache}>
214-
<ThemeProvider theme={this.getMuiTheme()}>
215-
<FormGroup row>
216-
<FormControlLabel
217-
control={
218-
<Switch
219-
checked={this.state.denseTable}
220-
onChange={this.toggleDenseTable}
221-
value="denseTable"
222-
color="primary"
223-
/>
224-
}
225-
label="Dense Table"
226-
/>
227-
<FormControlLabel
228-
control={
229-
<Switch
230-
checked={this.state.vertical}
231-
onChange={this.toggleResponsive}
232-
value="vertical"
233-
color="primary"
234-
/>
235-
}
236-
label="Responsive Vertical Table"
237-
/>
238-
</FormGroup>
239-
<MUIDataTable title={'ACME Employee list'} data={data} columns={columns} options={options} />
240-
</ThemeProvider>
241-
</CacheProvider>
206+
<ThemeProvider theme={this.getMuiTheme()}>
207+
<FormGroup row>
208+
<FormControlLabel
209+
control={
210+
<Switch
211+
checked={this.state.denseTable}
212+
onChange={this.toggleDenseTable}
213+
value="denseTable"
214+
color="primary"
215+
/>
216+
}
217+
label="Dense Table"
218+
/>
219+
<FormControlLabel
220+
control={
221+
<Switch
222+
checked={this.state.vertical}
223+
onChange={this.toggleResponsive}
224+
value="vertical"
225+
color="primary"
226+
/>
227+
}
228+
label="Responsive Vertical Table"
229+
/>
230+
</FormGroup>
231+
<MUIDataTable title={'ACME Employee list'} data={data} columns={columns} options={options} />
232+
</ThemeProvider>
242233
);
243234
}
244235
}

‎examples/expandable-rows/index.js‎

Lines changed: 9 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,6 @@ import MUIDataTable, { ExpandButton } from '../../src/';
33
import TableRow from '@mui/material/TableRow';
44
import TableCell from '@mui/material/TableCell';
55
import { createTheme, ThemeProvider } from '@mui/material/styles';
6-
import { CacheProvider } from '@emotion/react';
7-
import createCache from '@emotion/cache';
8-
9-
const muiCache = createCache({
10-
key: 'mui-datatables',
11-
prepend: true,
12-
});
136

147
class Example extends React.Component {
158
render() {
@@ -127,17 +120,15 @@ class Example extends React.Component {
127120
};
128121

129122
return (
130-
<CacheProvider value={muiCache}>
131-
<ThemeProvider theme={theme}>
132-
<MUIDataTable
133-
title={'ACME Employee list'}
134-
data={data}
135-
columns={columns}
136-
options={options}
137-
components={components}
138-
/>
139-
</ThemeProvider>
140-
</CacheProvider>
123+
<ThemeProvider theme={theme}>
124+
<MUIDataTable
125+
title={'ACME Employee list'}
126+
data={data}
127+
columns={columns}
128+
options={options}
129+
components={components}
130+
/>
131+
</ThemeProvider>
141132
);
142133
}
143134
}

‎examples/themes/index.js‎

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,6 @@
11
import React from 'react';
22
import MUIDataTable from '../../src/';
33
import { createTheme, ThemeProvider } from '@mui/material/styles';
4-
import createCache from '@emotion/cache';
5-
import { CacheProvider } from '@emotion/react';
6-
7-
const muiCache = createCache({
8-
key: 'mui-datatables',
9-
prepend: true,
10-
});
114

125
class Example extends React.Component {
136
render() {
@@ -92,11 +85,9 @@ class Example extends React.Component {
9285
});
9386

9487
return (
95-
<CacheProvider value={muiCache}>
96-
<ThemeProvider theme={theme}>
97-
<MUIDataTable title={'ACME Employee list'} data={data} columns={columns} options={options} />
98-
</ThemeProvider>
99-
</CacheProvider>
88+
<ThemeProvider theme={theme}>
89+
<MUIDataTable title={'ACME Employee list'} data={data} columns={columns} options={options} />
90+
</ThemeProvider>
10091
);
10192
}
10293
}

0 commit comments

Comments
 (0)