material-react-table 0.22.0 → 0.22.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +90 -18
- package/dist/MaterialReactTable.d.ts +158 -152
- package/dist/filtersFns.d.ts +22 -22
- package/dist/material-react-table.cjs.development.js.map +1 -1
- package/dist/material-react-table.cjs.production.min.js.map +1 -1
- package/dist/material-react-table.esm.js.map +1 -1
- package/dist/sortingFns.d.ts +2 -2
- package/dist/table/MRT_TableRoot.d.ts +1 -1
- package/dist/utils.d.ts +7 -7
- package/package.json +6 -6
- package/src/MaterialReactTable.tsx +189 -174
- package/src/filtersFns.ts +22 -22
- package/src/sortingFns.ts +6 -6
- package/src/table/MRT_TableRoot.tsx +9 -10
- package/src/utils.ts +28 -22
package/README.md
CHANGED
@@ -3,48 +3,59 @@
|
|
3
3
|
<a href="https://npmjs.com/package/material-react-table" target="_blank_">
|
4
4
|
<img alt="" src="https://badgen.net/npm/v/material-react-table" />
|
5
5
|
</a>
|
6
|
-
<a href="https://bundlephobia.com/result?p=material-react-table" target="_blank_">
|
7
|
-
<img alt="" src="https://badgen.net/bundlephobia/minzip/material-react-table@latest" />
|
8
|
-
</a>
|
9
6
|
<a href="https://npmjs.com/package/material-react-table" target="_blank_">
|
10
7
|
<img alt="" src="https://img.shields.io/npm/dm/material-react-table.svg" />
|
11
8
|
</a>
|
9
|
+
<a href="https://bundlephobia.com/result?p=material-react-table" target="_blank_">
|
10
|
+
<img alt="" src="https://badgen.net/bundlephobia/minzip/material-react-table@latest" />
|
11
|
+
</a>
|
12
12
|
<a href="https://github.com/KevinVandy/material-react-table" target="_blank_">
|
13
13
|
<img alt="" src="https://img.shields.io/github/stars/KevinVandy/material-react-table.svg?style=social&label=Star" />
|
14
14
|
</a>
|
15
15
|
|
16
16
|
---
|
17
17
|
|
18
|
-
|
18
|
+
## About
|
19
|
+
|
20
|
+
> This project is still in alpha, but is expected to enter beta by August 2022, and a stable 1.0 release shortly thereafter.
|
19
21
|
|
20
|
-
- A fully featured Material UI V5 implementation of Tanstack React Table
|
22
|
+
- A fully featured Material UI V5 implementation of Tanstack React Table V8
|
21
23
|
- Inspired by material-table and the MUI X DataGrid
|
22
|
-
- Written from the ground up in TypeScript
|
24
|
+
- Written from the ground up in TypeScript
|
23
25
|
- All internal Material UI components are easily customizable
|
24
26
|
|
25
|
-
|
27
|
+
Join the [Discord](https://discord.gg/5wqyRx6fnm) server to join in on the development discussion or ask questions
|
26
28
|
|
27
|
-
View the [
|
29
|
+
View the [Docs Site](https://www.material-react-table.com/)
|
28
30
|
|
29
|
-
|
31
|
+
See all [Props and Options](https://www.material-react-table.com/docs/api)
|
30
32
|
|
31
|
-
|
33
|
+
---
|
32
34
|
|
33
|
-
|
35
|
+
## Quick Examples
|
34
36
|
|
35
|
-
|
37
|
+
- [Basic Table](https://www.material-react-table.com/docs/examples/basic/) (See Default Features)
|
38
|
+
- [Minimal Table](https://www.material-react-table.com/docs/examples/minimal/) (Turn off Features)
|
39
|
+
- [Advanced Table](https://www.material-react-table.com/docs/examples/advanced/) (See some of the Advanced Features)
|
40
|
+
- [Remote Data](https://www.material-react-table.com/docs/examples/remote/) (Server-side Pagination, Sorting, and Filtering)
|
41
|
+
- [React Query](https://www.material-react-table.com/docs/examples/react-query/) (Server-side Pagination, Sorting, and Filtering)
|
42
|
+
- [Virtualized Rows](https://www.material-react-table.com/docs/examples/virtualized/) (20,000 rows at once!)
|
43
|
+
|
44
|
+
View additional [storybook examples](https://www.material-react-table.dev/)
|
36
45
|
|
37
46
|
---
|
38
47
|
|
39
|
-
|
48
|
+
## Features (All Features work and are MVP, but are still being polished)
|
40
49
|
|
41
50
|
_All features can easily be enabled/disabled_
|
42
51
|
|
52
|
+
- [x] < 35kb gzipped - [Bundlephobia](https://bundlephobia.com/package/material-react-table)
|
53
|
+
- [x] Advanced TypeScript Generics Support (TypeScript Optional)
|
43
54
|
- [x] Click To Copy Cell Values
|
44
55
|
- [x] Column Actions
|
45
56
|
- [x] Column Grouping (Group By and Aggregates)
|
46
57
|
- [x] Column Hiding
|
47
|
-
- [x] Column Ordering via Drag'n'Drop
|
58
|
+
- [x] Column Ordering via Drag'n'Drop
|
48
59
|
- [x] Column Pinning
|
49
60
|
- [x] Column Resizing (work in progress)
|
50
61
|
- [x] Customize Icons
|
@@ -72,9 +83,11 @@ _All features can easily be enabled/disabled_
|
|
72
83
|
|
73
84
|
---
|
74
85
|
|
86
|
+
## Getting Started
|
87
|
+
|
75
88
|
### Installation
|
76
89
|
|
77
|
-
1. Install Peer Dependencies (Material UI
|
90
|
+
1. Install Peer Dependencies (Material UI V5)
|
78
91
|
|
79
92
|
```bash
|
80
93
|
npm install @mui/material @mui/icons-material @emotion/react @emotion/styled
|
@@ -86,14 +99,73 @@ npm install @mui/material @mui/icons-material @emotion/react @emotion/styled
|
|
86
99
|
npm install material-react-table
|
87
100
|
```
|
88
101
|
|
89
|
-
_`@tanstack/react-table`,
|
102
|
+
> _`@tanstack/react-table`, `@tanstack/react-virtual`, and `@tanstack/match-sorter-utils`_ are internal dependencies, so you don't need to install them yourself.
|
90
103
|
|
91
104
|
---
|
92
105
|
|
93
|
-
###
|
106
|
+
### Usage
|
107
|
+
|
108
|
+
> Read the full usage docs [here](https://www.material-react-table.com/docs/usage/)
|
109
|
+
|
110
|
+
```jsx
|
111
|
+
import React, { useMemo } from 'react';
|
112
|
+
import MaterialReactTable from 'material-react-table';
|
113
|
+
|
114
|
+
export default function App() {
|
115
|
+
const columns = useMemo(
|
116
|
+
() => [
|
117
|
+
{
|
118
|
+
accessorKey: 'name', //simple recommended way to define a column
|
119
|
+
header: 'Name',
|
120
|
+
muiTableHeadCellProps: { sx: { color: 'green' } }, //custom props
|
121
|
+
},
|
122
|
+
{
|
123
|
+
accessorFn: (row) => row.age, //alternate way
|
124
|
+
id: 'age', //id required if you use accessorFn instead of accessorKey
|
125
|
+
header: 'Age',
|
126
|
+
Header: <i style={{ color: 'red' }}>Age</i>, //optional custom markup
|
127
|
+
},
|
128
|
+
],
|
129
|
+
[],
|
130
|
+
);
|
131
|
+
|
132
|
+
//simple data example
|
133
|
+
//Check out https://www.material-react-table.com/docs/examples/remote for a more realistic example
|
134
|
+
const data = useMemo(
|
135
|
+
() => [
|
136
|
+
{
|
137
|
+
name: 'John',
|
138
|
+
age: 30,
|
139
|
+
},
|
140
|
+
{
|
141
|
+
name: 'Sara',
|
142
|
+
age: 25,
|
143
|
+
},
|
144
|
+
],
|
145
|
+
[],
|
146
|
+
);
|
147
|
+
|
148
|
+
return (
|
149
|
+
<MaterialReactTable
|
150
|
+
columns={columns}
|
151
|
+
data={data}
|
152
|
+
enableColumnOrdering //enable some features
|
153
|
+
enableRowSelection
|
154
|
+
enableStickyHeader
|
155
|
+
/>
|
156
|
+
);
|
157
|
+
}
|
158
|
+
```
|
159
|
+
|
160
|
+
_Open in [Code Sandbox](https://codesandbox.io/s/simple-material-react-table-example-t5c3ji)_
|
161
|
+
|
162
|
+
---
|
163
|
+
|
164
|
+
## Contributors
|
94
165
|
|
95
166
|
<a href="https://github.com/kevinvandy/material-react-table/graphs/contributors">
|
96
167
|
<img src="https://contrib.rocks/image?repo=kevinvandy/material-react-table" />
|
97
168
|
</a>
|
98
169
|
|
99
|
-
PRs are Welcome, but please discuss in [GitHub Discussions](https://github.com/KevinVandy/material-react-table/discussions) or the [Discord Server](https://discord.gg/5wqyRx6fnm) first!
|
170
|
+
PRs are Welcome, but please discuss in [GitHub Discussions](https://github.com/KevinVandy/material-react-table/discussions) or the [Discord Server](https://discord.gg/5wqyRx6fnm) first!
|
171
|
+
|