React-form-data-table NPM

React Form Data Table

Features

Supports search string, records per page and pagination
Dynamic form elements to manipulate and save your data
UX available with light and dark theme
Adaptive for tablet and mobile viewports
Ajax put, post, update etc.. can be configured.
Row element onChange event, to update changes in row data, using dynamic form elements
Clone your custom data to data table
Show tooltip for elements
Configure Footer total with tailor made requirements
Configure pagination as you wish
Add a custom class name to change data table style. (Note:) This table is styled using display: grid with grid-template-columns

A Demo is always awesome

https://bharani-palani.github.io/react-form-data-table

Usage

<ReactFormDataTable
  data={[
    {id: 10000, name: "John", age: 21, salary: 50000},
    {id: 10003, name: "Woo", age: 28, salary: 60000}
    ...
  ]}
/>

Props

Property	Type	Default	Sample
data	Array		Refer Data Table
TableAliasRows	Array		ID, Name, Age, Salary
showTotal	Array		salary
rowElements	Array		Refer rowElements table
insertCloneData	Array		{id: 10002, name: "Woo", age: 31, salary: 70000}
showTooltipFor	Array		name
apiInstance	Object		Refer below table
defaultValues	Object	{ }	{age: "21"}
config	Object	{ }	Refer Config table
className	String		`my-custom-table`
defaultValues	Object	{ }	{ age: 21 } Note: value will be added to element during adding rows in table
cellWidth	String	`12rem`	20rem or 200px
theme	String	light	`light` or `dark`
onTableUpdate()	function		Callback after table form is updated
insertCloneData	Array		Clone your custom data to the top of your table.Refer Data Table

Data Table

Config sample

See https://www.w3schools.com/jsref/jsref_tolocalestring.asp for locale, currency and maxDecimal settings

Note:

currency can be USD, INR etc..
currentPage can be "first" or "last"

rowElements

Value	Render element	Type	Description
textbox	`<input />`	String	Text box to enter strings
number	`<input />`	String	Text box to enter numbers
textarea	`<textarea />`	String	Text area to enter paragraphs
checkbox	`<button />`	String	+ and - buttons to add or remove. Note: Should always be in the first position in array of objects. See to that the values are unique to update values accordingly. Watch Demo
radio	`<input type="radio" />`	Object	Refer radio sample below
multiChoice	`<PreDefined />`	Object	Refer multiChoice sample below
date	`<PreDefined />`	Object	Drop down date picker. Ex: `new Date()`
dateTime	`<PreDefined />`	Object	Drop down date and time picker. Ex: `new Date()`

radio sample

multiChoice sample

Note:

If value is string("Mobile"), single select drop down is rendered.
If value is array("Mobile", "Email"), multi select select drop down is rendered. Array can be empty.
"searchable" key is default to true, which helps to search values from the list. To disable search functionality, you can set it to false. This feaure is only for multi select select drop.

apiInstance

We use Axios for xmlHttpRequest()

Property	Type	Sample
Table	String	EmployeeMySqlTable
baseURL	String	https://myapiservices.com
headers	Object	{ Authorization: `MySecretHashKey` }
ajaxApiUrl	String	/V1/updateEmployeeInformation
payloadKeyName	String	`postData` `putData` `payload` etc..
ajaxType	String	`put` `post` `update` etc..
onAjaxCallBack	Function	(data) => showMessage(data)
ajaxButtonName	String	`Save`
onReFetchData	Function `Only success callback`	(data) => reRenderTableFromApi(data)