Skip to content

A material-table wrapper to display a dialog for add, edit and delete. It also allows Formik/YUP validation.

License

Notifications You must be signed in to change notification settings

shamseerahammedm/material-table-formik

 
 

Repository files navigation

Material Table Formik with Dialogs

This package is a simple wrapper for material-table.

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.

Screenshot

Example Display

Requirement

To use material-table-formik, you must use react@16.8.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";

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 acceepts 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 localisations for the dialog

Author

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

Built with TSDX

About

A material-table wrapper to display a dialog for add, edit and delete. It also allows Formik/YUP validation.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 96.3%
  • HTML 3.7%