1. **Installation**
At first we need to Install reactGrid package using `npm install @silevis/reactgrid`
2. **Create Form Item**
After installation complete create a new file in `folder/view/shared/form/items/` name as ReactGridFormItem.tsx. (name is not specified , you can give any name whatever you want)
3. **Now Time To Setup Our File**
a. At first we need to Import these required items into our ReactGridFormItem.
```js
import { ReactGrid } from '@silevis/reactgrid';
import '@silevis/reactgrid/styles.css'; // Import ReactGrid styles
import { useEffect } from 'react';
import { useFormContext } from 'react-hook-form';
import FormErrors from 'src/view/shared/form/formErrors';
```
b. Then add getRows functionality for react-grid
```js
const getRows = (columns, data) => {
const headerRow = {
rowId: 'header',
cells: columns?.map((c) => ({
type: 'header',
text: c.text,
})),
};
return [
headerRow,
...data.map((row) => {
return {
rowId: row.id,
cells: columns?.map((c, idx) => ({
type: 'number', // You can add your value type like "text","email","time" and more..
value: row.cells[idx]?.value,
})),
};
}),
];
};
```
c. Now add this code into your form item ( You can replace ReactGridFormItem to your file name ).
```js
const ReactGridFormItem = (props) => {
const { label, name, hint, required, columns } = props;
const {
register,
formState: { touchedFields, errors, isSubmitted },
setValue,
watch,
} = useFormContext();
const errorMessage = FormErrors.errorMessage(
name,
errors,
touchedFields,
isSubmitted,
);
useEffect(() => {
register(name);
}, [register, name]);
const originalValue = watch(name) || [];
const handleCellChange = (changes) => {
const newRows = [...originalValue];
changes.forEach(({ rowId, columnId, newCell }) => {
const row = newRows.find((r) => r.id === rowId);
const cell = row?.cells?.find(
(c) => c.columnId === columnId,
);
if (cell) {
cell.value = newCell.value;
}
});
setValue(name, newRows, { shouldValidate: true });
};
const addRow = (e) => {
e.preventDefault();
const newId = originalValue.length + 1;
const newRow = {
id: newId,
cells: columns?.map((c) => ({
type: 'number',
columnId: c.columnId,
value: '',
})),
};
setValue(name, [...originalValue, newRow], {
shouldValidate: true,
});
};
const rows = getRows(columns, originalValue);
return (
{Boolean(label) && (
)}
);
};
export default ReactGridFormItem;
```
d. Now create a columns array where you use ReactGridFormItem.
```js
const columns = [
{ columnId: 'col1', text: 'Column-1', width: 80 },
{ columnId: 'col2', text: 'Column-2', width: 80 },
{ columnId: 'col3', text: 'Column-3', width: 80 },
{ columnId: 'col4', text: 'Column-4', width: 80 },
{ columnId: 'col5', text: 'Column-5', width: 80 },
{ columnId: 'col6', text: 'Column-6', width: 80 },
{ columnId: 'col7', text: 'Column-7', width: 80 },
{ columnId: 'col8', text: 'Column-8', width: 80 },
{ columnId: 'col9', text: 'Column-9', width: 80 },
{ columnId: 'col10', text: 'Column-10', width: 80 },
];
```
e. Now use your ReactGridFormItem.
```js
```
\- Full Code Example.
a. Full ReactGridFormItem code
```js
import { ReactGrid } from '@silevis/reactgrid';
import '@silevis/reactgrid/styles.css'; // Import ReactGrid styles
import { useEffect } from 'react';
import { useFormContext } from 'react-hook-form';
import FormErrors from 'src/view/shared/form/formErrors';
// import styled from 'styled-components';
const getRows = (columns, data) => {
const headerRow = {
rowId: 'header',
cells: columns?.map((c) => ({
type: 'header',
text: c.text,
})),
};
return [
headerRow,
...data.map((row) => {
return {
rowId: row.id,
cells: columns?.map((c, idx) => ({
type: 'number',
value: row.cells[idx]?.value,
})),
};
}),
];
};
const ReactGridFormItem = (props) => {
const { label, name, hint, required, columns } = props;
const {
register,
formState: { touchedFields, errors, isSubmitted },
setValue,
watch,
} = useFormContext();
const errorMessage = FormErrors.errorMessage(
name,
errors,
touchedFields,
isSubmitted,
);
useEffect(() => {
register(name);
}, [register, name]);
const originalValue = watch(name) || [];
const handleCellChange = (changes) => {
const newRows = [...originalValue];
changes.forEach(({ rowId, columnId, newCell }) => {
const row = newRows.find((r) => r.id === rowId);
const cell = row?.cells?.find(
(c) => c.columnId === columnId,
);
if (cell) {
cell.value = newCell.value;
}
});
setValue(name, newRows, { shouldValidate: true });
};
const addRow = (e) => {
e.preventDefault();
const newId = originalValue.length + 1;
const newRow = {
id: newId,
cells: columns?.map((c) => ({
type: 'number',
columnId: c.columnId,
value: '',
})),
};
setValue(name, [...originalValue, newRow], {
shouldValidate: true,
});
};
const rows = getRows(columns, originalValue);
return (
{errorMessage}
{Boolean(hint) && (
{hint}
)}
{Boolean(label) && (
)}
);
};
export default ReactGridFormItem;
```
b. Uses ReactGridFormItem
```js
import { yupResolver } from '@hookform/resolvers/yup';
import { useState } from 'react';
import { FormProvider, useForm } from 'react-hook-form';
import { useDispatch } from 'react-redux';
import { i18n } from 'src/i18n';
import yupFormSchemas from 'src/modules/shared/yup/yupFormSchemas';
import { AppDispatch } from 'src/modules/store';
import ButtonIcon from 'src/view/shared/ButtonIcon';
import ReactGridFormItem from 'src/view/shared/form/items/ReactGridFormItem';
import FormWrapper from 'src/view/shared/styles/FormWrapper';
import * as yup from 'yup';
const schema = yup.object().shape({
roles: yupFormSchemas.stringArray(
i18n('user.fields.roles'),
),
});
// columnId - columnId is your each column id
// text - text is column name which is show in your browser
// width - width is each column width
const columns = [
{ columnId: 'col1', text: 'Column-1', width: 80 },
{ columnId: 'col2', text: 'Column-2', width: 80 },
{ columnId: 'col3', text: 'Column-3', width: 80 },
{ columnId: 'col4', text: 'Column-4', width: 80 },
{ columnId: 'col5', text: 'Column-5', width: 80 },
{ columnId: 'col6', text: 'Column-6', width: 80 },
{ columnId: 'col7', text: 'Column-7', width: 80 },
{ columnId: 'col8', text: 'Column-8', width: 80 },
{ columnId: 'col9', text: 'Column-9', width: 80 },
{ columnId: 'col10', text: 'Column-10', width: 80 },
];
function Examples(props) {
const dispatch = useDispatch();
const [initialValues] = useState(() => props.user || {});
const form = useForm({
resolver: yupResolver(schema as yup.AnyObjectSchema),
mode: 'all',
defaultValues: initialValues,
});
const onSubmit = (values) => {
// Add your code
};
return (
);
}
export default Examples;
```
**Preview:**
![preview]( "Preview image"){errorMessage}
{Boolean(hint) && (
{hint}
)}