Table editor

React Bootstrap 5 Table editor plugin

Table Editor is a useful tool for displaying and managing data. The component works similarly to the React Datatable (docs) with an additional column for action buttons.

Responsive interactive built with the latest Bootstrap 5. Creates editable tables. Delete or edit rows directly or via modal editor.

Note: Read the API tab to find all available options and advanced customization


Basic example

You can initialize the component with MDBTableEditor.


Company Address Employees
Smith & Johnson Park Lane 2, London 30
P.J. Company Oak Street 7, Aberdeen 80
Food & Wine Netherhall Gardens 3, Hampstead 12
IT Service Warwick Road 14, London 17
A. Jonson Gallery Oaklands Avenue 2, London 4
F.A. Architects Frognal Way 7, Hampstead 4
        
            
            import React, { useState } from 'react';
            import { MDBTableEditor } from 'mdb-react-table-editor';

            export default function App() {
              const basicColumns = [
                {
                  width: 250,
                  label: 'Company',
                  field: 'company',
                },
                {
                  width: 250,
                  label: 'Address',
                  field: 'address',
                  sort: false,
                },
                {
                  width: 250,
                  label: 'Employees',
                  field: 'employees',
                  sort: false,
                },
              ];

              const basicRows = [
                {
                  company: 'Smith & Johnson',
                  address: 'Park Lane 2, London',
                  employees: 30,
                },
                {
                  company: 'P.J. Company',
                  address: 'Oak Street 7, Aberdeen',
                  employees: 80,
                },
                {
                  company: 'Food & Wine',
                  address: 'Netherhall Gardens 3, Hampstead',
                  employees: 12,
                },
                {
                  company: 'IT Service',
                  address: 'Warwick Road 14, London',
                  employees: 17,
                },
                {
                  company: 'A. Jonson Gallery',
                  address: 'Oaklands Avenue 2, London',
                  employees: 4,
                },
                {
                  company: 'F.A. Architects',
                  address: 'Frognal Way 7, Hampstead',
                  employees: 4,
                },
              ];

              const [basicData, setBasicData] = useState({
                columns: basicColumns,
                rows: basicRows,
              });

              return (
                <MDBTableEditor
                  data={basicData}
                  entriesOptions={[5, 10, 15]}
                  setData={(e: any) => setBasicData({ ...basicData, rows: e })}
                />
              );
            }
          
        
    

Modal

To change the default editing mode (inline) to the modal version, set property modal to true.

        
            
            import React, { useState } from 'react';
            import { MDBTableEditor } from 'mdb-react-table-editor';

            export default function App() {
              const advancedColumns = [
                {
                  width: 250,
                  label: 'Company',
                  field: 'company',
                },
                {
                  width: 250,
                  sort: false,
                  defaultValue: 'Warsaw',
                  options: ['London', 'Warsaw', 'New York'],
                  inputType: 'select',
                  label: 'Office',
                  field: 'office',
                },
                {
                  width: 250,
                  inputType: 'number',
                  defaultValue: 1,
                  label: 'Employees',
                  field: 'employees',
                },
                {
                  width: 100,
                  defaultValue: false,
                  inputType: 'checkbox',
                  label: 'International',
                  field: 'international',
                },
              ];

              const advancedRows = [
                {
                  company: 'Smith & Johnson',
                  office: 'London',
                  employees: 30,
                  international: true,
                },
                {
                  company: 'P.J. Company',
                  office: 'London',
                  employees: 80,
                  international: false,
                },
                {
                  company: 'Food & Wine',
                  office: 'London',
                  employees: 12,
                  international: false,
                },
                {
                  company: 'IT Service',
                  office: 'London',
                  employees: 17,
                  international: false,
                },
                {
                  company: 'A. Jonson Gallery',
                  office: 'London',
                  employees: 4,
                  international: false,
                },
                {
                  company: 'F.A. Architects',
                  office: 'London',
                  employees: 4,
                  international: false,
                },
              ];

              const [modalData, setModalData] = useState({
                columns: advancedColumns,
                rows: advancedRows,
              });

              return (
                <MDBTableEditor
                  modal
                  data={modalData}
                  entriesOptions={[5, 10, 15]}
                  setData={(e: any) => setModalData({ ...modalData, rows: e })}
                />
              );
            }
          
        
    

Inputs example

Table Editor supports several input types - for example, if you wish to force a user to enter only Boolean values in one column, you can set its inputType to a checkbox.

Supported input types:

  • Text (default)
  • Number
  • Checkbox - displays a checkbox in edit mode and true/false value otherwise
  • Select - additionally requires an array of options
        
            
            import React, { useState } from 'react';
            import { MDBTableEditor } from 'mdb-react-table-editor';

            export default function App() {
              const advancedColumns = [
                {
                  width: 250,
                  label: 'Company',
                  field: 'company',
                },
                {
                  width: 250,
                  sort: false,
                  defaultValue: 'Warsaw',
                  options: ['London', 'Warsaw', 'New York'],
                  inputType: 'select',
                  label: 'Office',
                  field: 'office',
                },
                {
                  width: 250,
                  inputType: 'number',
                  defaultValue: 1,
                  label: 'Employees',
                  field: 'employees',
                },
                {
                  width: 100,
                  defaultValue: false,
                  inputType: 'checkbox',
                  label: 'International',
                  field: 'international',
                },
              ];

              const advancedRows = [
                {
                  company: 'Smith & Johnson',
                  office: 'London',
                  employees: 30,
                  international: true,
                },
                {
                  company: 'P.J. Company',
                  office: 'London',
                  employees: 80,
                  international: false,
                },
                {
                  company: 'Food & Wine',
                  office: 'London',
                  employees: 12,
                  international: false,
                },
                {
                  company: 'IT Service',
                  office: 'London',
                  employees: 17,
                  international: false,
                },
                {
                  company: 'A. Jonson Gallery',
                  office: 'London',
                  employees: 4,
                  international: false,
                },
                {
                  company: 'F.A. Architects',
                  office: 'London',
                  employees: 4,
                  international: false,
                },
              ];

              const [basicData, setBasicData] = useState({
                columns: advancedColumns,
                rows: advancedRows,
              });


              return (
                <MDBTableEditor
                  data={basicData}
                  entriesOptions={[5, 10, 15]}
                  setData={(e: any) => setBasicData({ ...basicData, rows: e })}
                />
              );
            }
          
        
    

Disable edit

You can disable editing for a table by setting its editable property to false. A user won't be able to change its value in the edit mode.

        
            
            import React, { useState } from 'react';
            import { MDBTableEditor } from 'mdb-react-table-editor';

            export default function App() {
              const advancedColumns = [
                {
                  width: 250,
                  label: 'Company',
                  field: 'company',
                },
                {
                  width: 250,
                  sort: false,
                  defaultValue: 'Warsaw',
                  options: ['London', 'Warsaw', 'New York'],
                  inputType: 'select',
                  label: 'Office',
                  field: 'office',
                },
                {
                  width: 250,
                  inputType: 'number',
                  defaultValue: 1,
                  label: 'Employees',
                  field: 'employees',
                },
                {
                  width: 100,
                  defaultValue: false,
                  inputType: 'checkbox',
                  label: 'International',
                  field: 'international',
                },
              ];

              const advancedRows = [
                {
                  company: 'Smith & Johnson',
                  office: 'London',
                  employees: 30,
                  international: true,
                },
                {
                  company: 'P.J. Company',
                  office: 'London',
                  employees: 80,
                  international: false,
                },
                {
                  company: 'Food & Wine',
                  office: 'London',
                  employees: 12,
                  international: false,
                },
                {
                  company: 'IT Service',
                  office: 'London',
                  employees: 17,
                  international: false,
                },
                {
                  company: 'A. Jonson Gallery',
                  office: 'London',
                  employees: 4,
                  international: false,
                },
                {
                  company: 'F.A. Architects',
                  office: 'London',
                  employees: 4,
                  international: false,
                },
              ];

              const [disableData, setDisableData] = useState({
                columns: advancedColumns,
                rows: advancedRows,
              });

              return (
                <MDBTableEditor
                  editable={false}
                  data={disableData}
                  entriesOptions={[5, 10, 15]}
                  setData={(e: any) => setDisableData({ ...disableData, rows: e })}
                />
              );
            }
          
        
    


Async data

While awaiting data from API, you can prevent a user from interacting with Table Editor by managing loading property.


        
            
            import React, { useState, useEffect } from 'react';
            import { MDBTableEditor } from 'mdb-react-table-editor';
            import { MDBBtn, MDBIcon } from 'mdb-react-ui-kit';

            export default function App() {
              const advancedColumns = [
                {
                  width: 250,
                  label: 'Company',
                  field: 'company',
                },
                {
                  width: 250,
                  sort: false,
                  defaultValue: 'Warsaw',
                  options: ['London', 'Warsaw', 'New York'],
                  inputType: 'select',
                  label: 'Office',
                  field: 'office',
                },
                {
                  width: 250,
                  inputType: 'number',
                  defaultValue: 1,
                  label: 'Employees',
                  field: 'employees',
                },
                {
                  width: 100,
                  defaultValue: false,
                  inputType: 'checkbox',
                  label: 'International',
                  field: 'international',
                },
              ];

              const advancedRows = [
                {
                  company: 'Smith & Johnson',
                  office: 'London',
                  employees: 30,
                  international: true,
                },
                {
                  company: 'P.J. Company',
                  office: 'London',
                  employees: 80,
                  international: false,
                },
                {
                  company: 'Food & Wine',
                  office: 'London',
                  employees: 12,
                  international: false,
                },
                {
                  company: 'IT Service',
                  office: 'London',
                  employees: 17,
                  international: false,
                },
                {
                  company: 'A. Jonson Gallery',
                  office: 'London',
                  employees: 4,
                  international: false,
                },
                {
                  company: 'F.A. Architects',
                  office: 'London',
                  employees: 4,
                  international: false,
                },
              ];

              const [loading, setLoading] = useState(false);

              const [asyncData, setAsyncData] = useState({
                columns: [
                  { label: 'Company', field: 'company' },
                  { label: 'Email', field: 'email' },
                  { label: 'Name', field: 'name' },
                  { label: 'Phone', field: 'phone' },
                ],
                rows: [],
              });

              useEffect(() => {
                if (loading) {
                  fetch('https://jsonplaceholder.typicode.com/users')
                    .then((response) => response.json())
                    .then((data) =>
                      setTimeout(() => {
                        setAsyncData({
                          columns: asyncData.columns,
                          rows: data.map((user: any) => ({
                            ...user,
                            address: `${user.address.city}, ${user.address.street}`,
                            company: user.company.name,
                          })),
                        });
                      }, 3000)
                    );
                }
              }, [loading, asyncData.columns]);

              useEffect(() => {
                if (asyncData.rows.length === 0) {
                  setLoading(true);
                } else {
                  setLoading(false);
                }
              }, [asyncData.rows]);

              return (
                <>
                  <MDBBtn className='mb-4' onClick={() => setAsyncData({ ...asyncData, rows: [] })}>
                    Reload data
                    <MDBIcon icon='sync' className='ms-2' />
                  </MDBBtn>

                  <MDBTableEditor
                    loading={loading}
                    data={asyncData}
                    entriesOptions={[5, 10, 15]}
                    setData={(e: any) => setAsyncData({ ...asyncData, rows: e })}
                  />
                </>
              );
            }
          
        
    

Dark

Dark mode can be applied to both modal and inline versions - firstly, add a CSS class which changes the background color to your page. Secondly, pass the same class name to the color option of your Table Editor (f.e. 'bg-dark'). Now change the font to light by setting dark attribute to true.


Company Address Employees
Smith & Johnson Park Lane 2, London 30
P.J. Company Oak Street 7, Aberdeen 80
Food & Wine Netherhall Gardens 3, Hampstead 12
IT Service Warwick Road 14, London 17
A. Jonson Gallery Oaklands Avenue 2, London 4
F.A. Architects Frognal Way 7, Hampstead 4
        
            
            import React, { useState } from 'react';
            import { MDBTableEditor } from 'mdb-react-table-editor';

            export default function App() {
              const advancedColumns = [
                {
                  width: 250,
                  label: 'Company',
                  field: 'company',
                },
                {
                  width: 250,
                  sort: false,
                  defaultValue: 'Warsaw',
                  options: ['London', 'Warsaw', 'New York'],
                  inputType: 'select',
                  label: 'Office',
                  field: 'office',
                },
                {
                  width: 250,
                  inputType: 'number',
                  defaultValue: 1,
                  label: 'Employees',
                  field: 'employees',
                },
                {
                  width: 100,
                  defaultValue: false,
                  inputType: 'checkbox',
                  label: 'International',
                  field: 'international',
                },
              ];

              const advancedRows = [
                {
                  company: 'Smith & Johnson',
                  office: 'London',
                  employees: 30,
                  international: true,
                },
                {
                  company: 'P.J. Company',
                  office: 'London',
                  employees: 80,
                  international: false,
                },
                {
                  company: 'Food & Wine',
                  office: 'London',
                  employees: 12,
                  international: false,
                },
                {
                  company: 'IT Service',
                  office: 'London',
                  employees: 17,
                  international: false,
                },
                {
                  company: 'A. Jonson Gallery',
                  office: 'London',
                  employees: 4,
                  international: false,
                },
                {
                  company: 'F.A. Architects',
                  office: 'London',
                  employees: 4,
                  international: false,
                },
              ];

              const [darkData, setDarkData] = useState({
                columns: advancedColumns,
                rows: advancedRows,
              });

              return (
                <MDBTableEditor
                  dark
                  data={darkData}
                  entriesOptions={[5, 10, 15]}
                  setData={(e: any) => setDarkData({ ...darkData, rows: e })}
                />
              );
            }
          
        
    

Table editor - API


Import

        
            
            import { MDBTableEditor } from 'mdb-react-table-editor';
          
        
    

Properties

MDBTableEditor

Name Type Default Description Example
modal Boolean false Sets the mode to modal <MDBTableEditor modal />
bordered Boolean false Adds borders to a TableEditor <MDBTableEditor bordered />
borderless Boolean false Removes all borders from a TableEditor <MDBTableEditor borderless />
borderColor String Changes a border color to one of main colors <MDBTableEditor borderColor='red' />
clickableRows Function Makes rows clickable <MDBTableEditor clickableRows={() => console.log('click')} />
color String Adds a color class to a TableEditor (f.e 'bg-dark') <MDBTableEditor color='primary' />
dark Boolean false Changes a font color to white <MDBTableEditor dark />
className String '' Add custom class to MDBTableEditor <MDBTableEditor className="class" />
entries Number 10 Number of visible entries (pagination) <MDBTableEditor entries={25} />
entriesOptions Array [10, 25, 50, 200] Options available to choose from in a pagination select (rows per page) <MDBTableEditor entriesOptions=[10, 20, 60] />
fixedHeader Boolean false When it's set to true, the table's header will remain visible while scrolling <MDBTableEditor fixedHeader />
fullPagination Boolean false Displays additional buttons for the first and last pages <MDBTableEditor fullPagination />
hover Boolean false Changes the background color of a hovered row <MDBTableEditor hover />
loading Boolean false Sets the loading mode - disables interactions and displays a loader <MDBTableEditor loading />
loaderClass String 'bg-primary' The class name for a loader (loading mode) <MDBTableEditor loaderClass='bg-warning' />
loadingMessage String 'Loading results...' A message displayed while loading data <MDBTableEditor loaderClass='Loading...' />
maxWidth String Sets a maximum width of a TableEditor - can be either a string ('10%') or a number of pixels. <MDBTableEditor maxWidth='560px' />
maxHeight Number|String Sets a maximum height of a TableEditor - can be either a string ('10%') or a number of pixels. <MDBTableEditor maxHeight='560px' />
selectable Boolean false Enables selecting rows with checkboxes <MDBTableEditor selectable />
selectedRows Array Contains selected data <MDBTableEditor selectedRows={selectedRows} />
setSelectedRows Function Sets selected data <MDBTableEditor setSelectedRows={setSelectedRows} />
multi Boolean false Allows selecting multiple rows (selectable mode) <MDBTableEditor selectable multi />
noFoundMessage String 'No matching results found' A message displayed when a table is empty <MDBTableEditor noFoundMessage='Not found...' />
pagination Boolean true Shows/hides the pagination panel <MDBTableEditor pagination={false} />
sm Boolean false Decreases a row's paddings <MDBTableEditor sm />
striped Boolean false Slightly changes the background's color in every other row <MDBTableEditor striped />
rowsText String 'Rows per page': A text indicating a number of rows per page <MDBTableEditor rowsText='Rows:' />
search Boolean false Enables search in the table <MDBTableEditor search />
sortField String '' Allows default sorting of the table column <MDBTableEditor sortField='ColumnName' />
sortOrder String 'asc' Defines the default sorting direction <MDBTableEditor sortField='ColumnName' sortOrder='desc' />
advancedSearch Boolean false Enables advanced search in the table <MDBTableEditor advancedSearch />
tag String 'table' Defines tag of the MDBTableEditor element <MDBTableEditor tag="section" />