Package Exports

material-table-formik
material-table-formik/dist/index.js
material-table-formik/dist/material-table-formik.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (material-table-formik) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Material Table Core Formik with Dialogs

This package is a simple wrapper for material-table-core.

It displays dialogs instead of the inline edit for the Add, Update and Delete actions.

Additionally, it allows the validation with Formik and YUP for these actions as well.

Now with Grid Support

Add Mui Grid Props with gridProps to the columns to order the edit fields within the dialog.

gridProps: { xs: 12, md: 6 }

Screenshot

Example Display

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.

$ 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<FormikErrors>;	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	The columns are extended to allow grid props for positioning of the fields within the dialog

Author

Dominik Engel

This project follows the all-contributors specification. Contributions of any kind welcome!

Built with TSDX