Skip to content

Commit 3a676a6

Browse files
patorjkpatorjk
committed
Merge branch 'garronej-update_to_tss_v4'
2 parents 5c8cd7c + 4da5952 commit 3a676a6

File tree

7 files changed

+5048
-4460
lines changed

7 files changed

+5048
-4460
lines changed

‎README.md‎

Lines changed: 23 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -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

@@ -365,13 +372,6 @@ Using Material-UI theme overrides will allow you to customize styling to your li
365372
import React from "react";
366373
import MUIDataTable from "mui-datatables";
367374
import { createTheme, ThemeProvider } from '@mui/material/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-
});
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
}

‎examples/Router/index.js‎

Lines changed: 25 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,6 @@ 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
}

‎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)