https://github.com/domino987/material-table-formik
A material-table wrapper to display a dialog for add, edit and delete. It also allows Formik/YUP validation.
https://github.com/domino987/material-table-formik
formik material-table material-ui react yup
Last synced: 6 months ago
JSON representation
A material-table wrapper to display a dialog for add, edit and delete. It also allows Formik/YUP validation.
- Host: GitHub
- URL: https://github.com/domino987/material-table-formik
- Owner: Domino987
- License: mit
- Created: 2020-02-03T19:52:44.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T04:57:28.000Z (almost 3 years ago)
- Last Synced: 2025-03-26T11:51:09.528Z (7 months ago)
- Topics: formik, material-table, material-ui, react, yup
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/material-table-formik
- Size: 2.93 MB
- Stars: 8
- Watchers: 3
- Forks: 6
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Material Table Core Formik with Dialogs
This package is a simple wrapper for [material-table-core](https://github.com/material-table-core/core).
It displays dialogs instead of the inline edit for the Add, Update and Delete actions.
Additionally, it allows the validation with [Formik](https://github.com/jaredpalmer/formik) and [YUP](https://github.com/jquense/yup) for these actions as well.
## Now with Grid Support
Add [Mui Grid Props](https://mui.com/api/grid/) with gridProps to the columns to order the edit fields within the dialog.
```
gridProps: { xs: 12, md: 6 }
```
## Screenshot
## Requirement
To use material-table-formik, you must use react@17.2.0 or greater which includes hooks.
## Installation
This package is distributed via [npm](https://www.npmjs.com/package/material-table-formik).
```
$ yarn add material-table-formik
# or
$ npm install --save material-table-formik
```
## Getting Started
Simply exchange the material table import:
```
import MaterialTable from "material-table-core";
```
with
```
import MaterialTable from "material-table-formik";
```
This will display the edit/update/delete action in a separate dialog instead inline.
## Props
In addition to the material table props, it also accepts these optional props:
| Name | Type | Description |
| ----------------- | --------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
| validate | (value: RowData) => void \| object \| Promise>; | The Formik validation to be applied to each field |
| validationSchema | any \| (() => any) | The YUP validation schema |
| localization | deleteHeader?: string
deleteAction?: string | The added localizations for the dialog |
| columns.gridProps | [Material-ui Grid Props](https://material-ui.com/api/grid/) | The columns are extended to allow grid props for positioning of the fields within the dialog |
## Author
- [Dominik Engel](https://github.com/Domino987)
This project follows the all-contributors specification. Contributions of any kind welcome!
Built with [TSDX](https://github.com/jaredpalmer/tsdx)