# How to implement an editable Table component?
**URL:** https://forum.builder.io/t/how-to-implement-an-editable-table-component/5397
**Category:** General
**Tags:** react, nextjs
**Created:** [April 18, 2024, 12:04pm UTC](https://forum.builder.io/t/how-to-implement-an-editable-table-component/5397 "2024-04-18T12:04:18Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@RadisLuo](https://forum.builder.io/u/RadisLuo)
#### Post date: [April 18, 2024, 12:04pm UTC](https://forum.builder.io/t/how-to-implement-an-editable-table-component/5397/1 "2024-04-18T12:04:18Z")
How to implement a table component as shown in the image above, which allows for editing content as well as adding or removing Rows and Columns?
---
### Author:  [@manish-sharma](https://forum.builder.io/u/manish-sharma)
#### Post date: [April 18, 2024, 12:35pm UTC](https://forum.builder.io/t/how-to-implement-an-editable-table-component/5397/2 "2024-04-18T12:35:22Z")
Hello @RadisLuo,
Welcome to the [builder.io](http://builder.io) forum post.
To create a table, you can use the Box element. Here’s a fiddle for reference: [Builder.io: Visual Development Platform](https://builder.io/fiddle/324c83ddaa28461ea8d9ff269cb2d8a6)
However, if you need more control over table rows and columns, we recommend creating a custom component instead.
> **[Intro to Integrating Custom Components - Builder.io](https://www.builder.io/c/docs/custom-components-intro)**
>
> Drag and drop with your components, right within your existing site or app. Build and optimize digital experiences for any tech stack, visually.
Thanks,
---
### Author:  [@RadisLuo](https://forum.builder.io/u/RadisLuo)
#### Post date: [April 18, 2024, 12:48pm UTC](https://forum.builder.io/t/how-to-implement-an-editable-table-component/5397/3 "2024-04-18T12:48:16Z")
Can I implement it through Next.js code? If possible, how would I go about doing that?
---
### Author:  [@manish-sharma](https://forum.builder.io/u/manish-sharma)
#### Post date: [April 18, 2024, 1:06pm UTC](https://forum.builder.io/t/how-to-implement-an-editable-table-component/5397/4 "2024-04-18T13:06:09Z")
Hello @RadisLuo,
You can certainly create a custom component for editable table using Next Js code and register it with builder to be used in the editor.
I would suggest using formik component to create editable component and then register it with builder
> **[Overview | Formik](https://formik.org/docs/overview)**
>
> Formik documentation, tutorial, guides, and examples
> **[Registering Custom Components - Builder.io](https://www.builder.io/c/docs/custom-components-setup)**
>
> Drag and drop with your components, right within your existing site or app. Build and optimize digital experiences for any tech stack, visually.
---
### Author:  [@RadisLuo](https://forum.builder.io/u/RadisLuo)
#### Post date: [April 18, 2024, 1:57pm UTC](https://forum.builder.io/t/how-to-implement-an-editable-table-component/5397/5 "2024-04-18T13:57:09Z")
The component is editable, but how is the input data within the component connected to the builder’s InputType? Otherwise, the data entered will be lost when the page is refreshed.
---
### Author:  [@manish-sharma](https://forum.builder.io/u/manish-sharma)
#### Post date: [April 18, 2024, 2:28pm UTC](https://forum.builder.io/t/how-to-implement-an-editable-table-component/5397/6 "2024-04-18T14:28:37Z")
Hello @RadisLuo,
When registering a custom component, create input props and use them in your custom component, you can change these inputs from the builder app and they will not be lost.
---
### Author:  [@RadisLuo](https://forum.builder.io/u/RadisLuo)
#### Post date: [May 13, 2024, 8:33am UTC](https://forum.builder.io/t/how-to-implement-an-editable-table-component/5397/7 "2024-05-13T08:33:52Z")
[https://forum.builder.io/t/pnpm-install-sdk-react-isolated-vm-error/5520，How](https://forum.builder.io/t/pnpm-install-sdk-react-isolated-vm-error/5520%EF%BC%8CHow) should we resolve this issue?