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 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
- > This Project is based on `@tanstack/react-table` v8, which itself is still in beta, so therefore this package is also still in alpha/beta
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 v8 (beta)
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, Material UI, and React Table
24
+ - Written from the ground up in TypeScript
23
25
  - All internal Material UI components are easily customizable
24
26
 
25
- ## This project is in alpha, but will go into beta _soon<sup>TM</sup>_, so feel free to install and explore
27
+ Join the [Discord](https://discord.gg/5wqyRx6fnm) server to join in on the development discussion or ask questions
26
28
 
27
- View the [docs (alpha) site](https://www.material-react-table.com/)
29
+ View the [Docs Site](https://www.material-react-table.com/)
28
30
 
29
- View a basic [example](https://codesandbox.io/s/github/KevinVandy/material-react-table/tree/main/material-react-table-docs/examples/basic/sandbox?file=/src/TS.tsx)
31
+ See all [Props and Options](https://www.material-react-table.com/docs/api)
30
32
 
31
- View additional [storybook examples](https://www.material-react-table.dev/)
33
+ ---
32
34
 
33
- View the [github source code](https://github.com/KevinVandy/material-react-table) and [github open issues](https://github.com/KevinVandy/material-react-table/issues)
35
+ ## Quick Examples
34
36
 
35
- Join the [discord](https://discord.gg/5wqyRx6fnm) server to join in on the development discussion or ask questions
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
- ### Features (All Features work and are MVP, but are still being polished)
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 (react-dnd)
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 v5)
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`, `react-virtual` and `react-dnd`_ are internal dependencies, so you don't need to install them yourself.
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
- ### Contributors
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
+