material-react-table/apps/material-react-table-docs/components/mdx/CompatibilityTable.tsx at d79c69ac8efa0d1fdd4df3b71aed7eefa3742b00 · KevinVandy/material-react-table · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
import React from 'react';
import {
  MRT_ColumnDef,
  MRT_TableContainer,
  useMaterialReactTable,
} from '@glebcha/material-react-table';

const columns: MRT_ColumnDef<any>[] = [
  {
    accessorKey: 'mrtVersion',
    header: 'MRT',
  },
  {
    accessorKey: 'reactVersion',
    header: 'React',
    size: 100,
  },
  {
    accessorKey: 'muiVersion',
    header: 'Material UI',
    size: 100,
  },
  {
    accessorKey: 'muiIconsVersion',
    header: ' MUI Icons',
    size: 100,
  },
  {
    accessorKey: 'muiXDatePickers',
    header: 'MUI X Date Pickers',
  },
  {
    accessorKey: 'emotionVersion',
    header: 'Emotion',
    size: 100,
  },
  {
    accessorKey: 'pigmentCSS',
    header: 'Pigment CSS',
  },
];

const data = [
  {
    mrtVersion: '1.x',
    muiVersion: '5.0+',
    muiXDatePickers: 'Optional',
    reactVersion: '17.0+',
    muiIconsVersion: '5.0+',
    emotionVersion: '11.0+',
    pigmentCSS: '-',
  },
  {
    mrtVersion: '2.x',
    muiVersion: '5.13+',
    muiXDatePickers: '6.15+',
    reactVersion: '17.0+',
    muiIconsVersion: '5.0+',
    emotionVersion: '11.0+',
    pigmentCSS: '-',
  },
  {
    mrtVersion: '3.x (This Version)',
    muiVersion: '6.0+',
    muiXDatePickers: '7.15.0+',
    reactVersion: '18.0+',
    muiIconsVersion: '6.0+',
    emotionVersion: '11.0+',
    pigmentCSS: 'Optional',
  },
  {
    mrtVersion: '4.x (Next Version)',
    muiVersion: '6.0+',
    muiXDatePickers: '7.15.0+',
    reactVersion: '18.0+',
    muiIconsVersion: '6.0+',
    emotionVersion: 'Optional',
    pigmentCSS: 'Optional',
  },
];

export const CompatibilityTable = () => {
  const table = useMaterialReactTable({
    columns,
    data,
    defaultColumn: {
      muiTableHeadCellProps: {
        sx: {
          fontSize: '16px',
        },
      },
      muiTableBodyCellProps: ({ row }) => ({
        sx: (theme) => ({
          fontSize: '16px',
          fontWeight: row.original.mrtVersion.includes('This Version')
            ? 'bold'
            : 'normal',
          color: row.original.mrtVersion.includes('This Version')
            ? `${theme.palette.primary.main}`
            : 'inherit',
        }),
      }),
    },
    enableColumnActions: false,
    initialState: {
      sorting: [
        {
          id: 'mrtVersion',
          desc: true,
        },
      ],
    },
  });
  return <MRT_TableContainer table={table} />;
};