first, make sure you have installed Nextjs 12 + TypeScript
these are the dependencies im using
{ "dependencies": { //... "@material-ui/core": "^4.12.4", "@material-ui/icons": "^4.11.3", "@mui/lab": "^5.0.0-alpha.91", "@mui/material": "^5.9.1", "@mui/styles": "^5.9.2", "@mui/utils": "^5.9.1", "material-table": "^1.69.3", }, "devDependencies": { // ... "@types/react-beautiful-dnd": "^13.1.2", } } yes, im using Material Table 1.69.3 because of this stackoverflow answer
lets install all the dependencies
npm i material-table@1.69.3 @material-ui/core @material-ui/icons @mui/lab @mui/material @mui/styles @mui/utils @types/react-beautiful-dnd according to this issues, we need to add components/PatchedPagination.tsx
// https://github.com/mbrn/material-table/pull/2937#issuecomment-879017952 import MaterialTable, { MaterialTableProps } from 'material-table' import { TablePagination, TablePaginationProps } from '@material-ui/core' function PatchedPagination(props: TablePaginationProps) { const { ActionsComponent, onChangePage, onChangeRowsPerPage, ...tablePaginationProps } = props return ( <TablePagination {...tablePaginationProps} // @ts-expect-error onChangePage was renamed to onPageChange onPageChange={onChangePage} onRowsPerPageChange={onChangeRowsPerPage} ActionsComponent={(subprops) => { const { onPageChange, ...actionsComponentProps } = subprops return ( // @ts-expect-error ActionsComponent is provided by material-table <ActionsComponent {...actionsComponentProps} onChangePage={onPageChange} /> ) }} /> ) } export default PatchedPagination create pages/basic-table.tsx
import { forwardRef } from 'react' import { resetServerContext } from 'react-beautiful-dnd' import MaterialTable from 'material-table' import PatchedPagination from '../components/PatchedPagination' // icons import AddBox from '@material-ui/icons/AddBox' import ArrowDownward from '@material-ui/icons/ArrowDownward' import Check from '@material-ui/icons/Check' import ChevronLeft from '@material-ui/icons/ChevronLeft' import ChevronRight from '@material-ui/icons/ChevronRight' import Clear from '@material-ui/icons/Clear' import DeleteOutline from '@material-ui/icons/DeleteOutline' import Edit from '@material-ui/icons/Edit' import FilterList from '@material-ui/icons/FilterList' import FirstPage from '@material-ui/icons/FirstPage' import LastPage from '@material-ui/icons/LastPage' import Remove from '@material-ui/icons/Remove' import SaveAlt from '@material-ui/icons/SaveAlt' import Search from '@material-ui/icons/Search' import ViewColumn from '@material-ui/icons/ViewColumn' // types import type { Icons } from 'material-table' import type { GetServerSideProps } from 'next' const tableIcons: Icons = { Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />), Check: forwardRef((props, ref) => <Check {...props} ref={ref} />), Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />), Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />), DetailPanel: forwardRef((props, ref) => ( <ChevronRight {...props} ref={ref} /> )), Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />), Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />), Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />), FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />), LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />), NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />), PreviousPage: forwardRef((props, ref) => ( <ChevronLeft {...props} ref={ref} /> )), ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />), Search: forwardRef((props, ref) => <Search {...props} ref={ref} />), SortArrow: forwardRef((props, ref) => <ArrowDownward {...props} ref={ref} />), ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />), ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />), } // more detail why using resetServerContext // https://stackoverflow.com/a/64242579 export const getServerSideProps: GetServerSideProps = async () => { resetServerContext() return { props: {} } } function BasicTable() { return ( <MaterialTable icons={tableIcons} title="Basic Filtering Preview" columns={[ { title: 'Name', field: 'name' }, { title: 'Surname', field: 'surname' }, { title: 'Birth Year', field: 'birthYear', type: 'numeric' }, { title: 'Birth Place', field: 'birthCity', lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' }, }, ]} data={[ { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 }, { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34, }, ]} options={{ filtering: true, }} components={{ Pagination: PatchedPagination }} /> ) } export default BasicTable done!
Top comments (0)