material-react-table 0.7.0-alpha.2 → 0.7.0-alpha.5
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 +29 -19
- package/dist/MaterialReactTable.d.ts +1 -1
- package/dist/buttons/MRT_CopyButton.d.ts +1 -2
- package/dist/material-react-table.cjs.development.js +17 -5
- package/dist/material-react-table.cjs.development.js.map +1 -1
- package/dist/material-react-table.cjs.production.min.js +1 -1
- package/dist/material-react-table.cjs.production.min.js.map +1 -1
- package/dist/material-react-table.esm.js +17 -5
- package/dist/material-react-table.esm.js.map +1 -1
- package/package.json +4 -4
- package/src/MaterialReactTable.tsx +5 -1
- package/src/buttons/MRT_CopyButton.tsx +1 -2
- package/src/localization.ts +0 -1
- package/src/table/MRT_TableRoot.tsx +4 -3
- package/src/toolbar/MRT_TablePagination.tsx +5 -2
package/README.md
CHANGED
|
@@ -1,47 +1,57 @@
|
|
|
1
1
|
# Material React Table
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
-
|
|
3
|
+
> This Project is based on react-table v8, which itself is still in alpha, and therefore this package is also still in alpha
|
|
4
|
+
|
|
5
|
+
- A fully featured Material UI v5 implementation of react-table v8 (alpha)
|
|
6
|
+
- Inspired by material-table and the MUI X DataGrid
|
|
7
|
+
- Written from the ground up in TypeScript, Material UI, and React Table
|
|
8
|
+
- All internal Material UI components are easily customizable
|
|
6
9
|
|
|
7
10
|
## This project is in alpha, but feel free to install and explore
|
|
8
11
|
|
|
9
|
-
View the docs (alpha) site
|
|
12
|
+
View the [docs (alpha) site](https://www.material-react-table.com/)
|
|
10
13
|
|
|
11
|
-
View additional storybook examples
|
|
14
|
+
View additional [storybook examples](https://www.material-react-table.dev/)
|
|
12
15
|
|
|
13
|
-
View the source code and open issues
|
|
16
|
+
View the [github source code](https://github.com/KevinVandy/material-react-table) and [github open issues](https://github.com/KevinVandy/material-react-table/issues)
|
|
14
17
|
|
|
15
|
-
Join the discord
|
|
18
|
+
Join the [discord](https://discord.gg/5wqyRx6fnm) server to join in on the development discussion
|
|
16
19
|
|
|
17
20
|
<br />
|
|
18
21
|
|
|
19
|
-
### Features (Still In Active Development)
|
|
22
|
+
### Features (Some Still In Active Development)
|
|
20
23
|
|
|
21
|
-
- [
|
|
22
|
-
- [ ] Column Resizing (in dev)
|
|
23
|
-
- [x] Cell Editing
|
|
24
|
+
- [x] Click To Copy Cell Values
|
|
24
25
|
- [x] Column Actions
|
|
25
26
|
- [x] Column Hiding
|
|
26
|
-
- [x]
|
|
27
|
+
- [x] Column Grouping (Group By and Aggregates)
|
|
28
|
+
- [ ] Column Ordering (react-dnd planned)
|
|
29
|
+
- [x] Column Pinning
|
|
30
|
+
- [x] Column Resizing (work in progress)
|
|
31
|
+
- [x] Custom Icons
|
|
32
|
+
- [x] Custom Styling and internal Mui Components
|
|
33
|
+
- [ ] Data Editing (work in progress)
|
|
27
34
|
- [x] Dense Padding Toggle
|
|
28
|
-
- [x] Localization
|
|
29
35
|
- [x] Filtering
|
|
30
|
-
- [x]
|
|
36
|
+
- [x] Fullscreen
|
|
37
|
+
- [ ] Global Search (Advanced search options!)
|
|
31
38
|
- [x] HeaderGroups
|
|
32
|
-
- [x]
|
|
39
|
+
- [x] Localization i18n
|
|
40
|
+
- [x] Pagination (supports client-side and server-side)
|
|
33
41
|
- [x] Row Actions
|
|
34
|
-
- [x] Selection
|
|
42
|
+
- [x] Row Selection
|
|
43
|
+
- [x] SSR compatible
|
|
35
44
|
- [x] Sorting
|
|
36
45
|
- [x] Toolbars
|
|
37
|
-
- [x] Tree Data
|
|
46
|
+
- [x] Tree Data / Expanding Subrows
|
|
47
|
+
- [ ] Virtualization (planned)
|
|
38
48
|
|
|
39
49
|
### Installation
|
|
40
50
|
|
|
41
|
-
1. Install Peer Dependencies (
|
|
51
|
+
1. Install Peer Dependencies (Material UI v5)
|
|
42
52
|
|
|
43
53
|
```bash
|
|
44
|
-
npm install @mui/material @mui/icons-material @emotion/react @emotion/styled
|
|
54
|
+
npm install @mui/material @mui/icons-material @emotion/react @emotion/styled
|
|
45
55
|
```
|
|
46
56
|
|
|
47
57
|
2. Install material-react-table
|
|
@@ -351,5 +351,5 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
|
|
|
351
351
|
}>;
|
|
352
352
|
}) => ReactNode;
|
|
353
353
|
};
|
|
354
|
-
declare const _default: <D extends Record<string, any> = {}>({ enableColumnActions, enableColumnFilters, enableDensePaddingToggle, enableExpandAll, enableFullScreenToggle, enableGlobalFilter, enableHiding, enablePagination, enableSelectAll, enableSorting, enableStickyHeader,
|
|
354
|
+
declare const _default: <D extends Record<string, any> = {}>({ enableColumnActions, enableColumnFilters, enableDensePaddingToggle, enableExpandAll, enableFullScreenToggle, enableGlobalFilter, enableHiding, enablePagination, enableSelectAll, enableSorting, enableStickyHeader, icons, localization, positionActionsColumn, positionPagination, positionToolbarActions, positionToolbarAlertBanner, ...rest }: MaterialReactTableProps<D>) => JSX.Element;
|
|
355
355
|
export default _default;
|
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import { FC
|
|
1
|
+
import { FC } from 'react';
|
|
2
2
|
import { MRT_Cell, MRT_TableInstance } from '..';
|
|
3
3
|
interface Props {
|
|
4
4
|
cell: MRT_Cell;
|
|
5
|
-
children: ReactNode;
|
|
6
5
|
tableInstance: MRT_TableInstance;
|
|
7
6
|
}
|
|
8
7
|
export declare const MRT_CopyButton: FC<Props>;
|
|
@@ -1470,6 +1470,11 @@ var MRT_TablePagination = function MRT_TablePagination(_ref) {
|
|
|
1470
1470
|
SelectProps: {
|
|
1471
1471
|
sx: {
|
|
1472
1472
|
m: '0 1rem 0 1ch'
|
|
1473
|
+
},
|
|
1474
|
+
MenuProps: {
|
|
1475
|
+
MenuListProps: {
|
|
1476
|
+
disablePadding: true
|
|
1477
|
+
}
|
|
1473
1478
|
}
|
|
1474
1479
|
},
|
|
1475
1480
|
component: "div",
|
|
@@ -1480,7 +1485,7 @@ var MRT_TablePagination = function MRT_TablePagination(_ref) {
|
|
|
1480
1485
|
onRowsPerPageChange: handleChangeRowsPerPage,
|
|
1481
1486
|
page: pageIndex,
|
|
1482
1487
|
rowsPerPage: pageSize,
|
|
1483
|
-
rowsPerPageOptions: [5, 10, 20, 25, 50, 100],
|
|
1488
|
+
rowsPerPageOptions: [5, 10, 15, 20, 25, 30, 50, 100],
|
|
1484
1489
|
showFirstButton: showFirstLastPageButtons,
|
|
1485
1490
|
showLastButton: showFirstLastPageButtons
|
|
1486
1491
|
}, tablePaginationProps, {
|
|
@@ -2899,17 +2904,18 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
|
|
|
2899
2904
|
}, [props.data, props.isLoading]); //@ts-ignore
|
|
2900
2905
|
|
|
2901
2906
|
var tableInstance = reactTable.useTable(table, _extends({}, props, {
|
|
2902
|
-
//@ts-ignore
|
|
2903
|
-
filterTypes: defaultFilterFNs,
|
|
2904
|
-
globalFilterType: currentGlobalFilterType,
|
|
2905
2907
|
columnFilterRowsFn: reactTable.columnFilterRowsFn,
|
|
2906
2908
|
columns: columns,
|
|
2907
2909
|
data: data,
|
|
2910
|
+
debugAll: false,
|
|
2908
2911
|
expandRowsFn: reactTable.expandRowsFn,
|
|
2912
|
+
//@ts-ignore
|
|
2913
|
+
filterTypes: defaultFilterFNs,
|
|
2909
2914
|
getSubRows: (_props$getSubRows = props.getSubRows) != null ? _props$getSubRows : function (originalRow) {
|
|
2910
2915
|
return originalRow.subRows;
|
|
2911
2916
|
},
|
|
2912
2917
|
globalFilterRowsFn: reactTable.globalFilterRowsFn,
|
|
2918
|
+
globalFilterType: currentGlobalFilterType,
|
|
2913
2919
|
groupRowsFn: reactTable.groupRowsFn,
|
|
2914
2920
|
idPrefix: idPrefix,
|
|
2915
2921
|
onPaginationChange: function onPaginationChange(updater) {
|
|
@@ -2943,7 +2949,13 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
|
|
|
2943
2949
|
});
|
|
2944
2950
|
};
|
|
2945
2951
|
|
|
2946
|
-
var _excluded$5 = ["enableColumnActions", "enableColumnFilters", "enableDensePaddingToggle", "enableExpandAll", "enableFullScreenToggle", "enableGlobalFilter", "enableHiding", "enablePagination", "enableSelectAll", "enableSorting", "enableStickyHeader", "
|
|
2952
|
+
var _excluded$5 = ["enableColumnActions", "enableColumnFilters", "enableDensePaddingToggle", "enableExpandAll", "enableFullScreenToggle", "enableGlobalFilter", "enableHiding", "enablePagination", "enableSelectAll", "enableSorting", "enableStickyHeader", "icons", "localization", "positionActionsColumn", "positionPagination", "positionToolbarActions", "positionToolbarAlertBanner"];
|
|
2953
|
+
|
|
2954
|
+
window.performance = window.performance || {
|
|
2955
|
+
now: function now() {
|
|
2956
|
+
return new Date().getTime();
|
|
2957
|
+
}
|
|
2958
|
+
};
|
|
2947
2959
|
var MaterialReactTable = (function (_ref) {
|
|
2948
2960
|
var _ref$enableColumnActi = _ref.enableColumnActions,
|
|
2949
2961
|
enableColumnActions = _ref$enableColumnActi === void 0 ? true : _ref$enableColumnActi,
|