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
                  onAdd={(newRow) => setBasicData({ ...basicData, rows: [...basicData.rows, newRow] })}
                  onModify={(modifiedData) => setBasicData({ ...basicData, rows: modifiedData })}
                  onDelete={(id) => setBasicData({ ...basicData, rows: basicData.rows.filter((row, i) => i !== id) })}
                  entries={5}
                  data={basicData}
                  entriesOptions={[5, 10, 15]}
                />
              );
            }

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
                  mode='modal'
                  data={modalData}
                  entriesOptions={[5, 10, 15]}
                  entries={5}
                  onAdd={(newRow) => setModalData({ ...modalData, rows: [...modalData.rows, newRow] })}
                  onModify={(modifiedData) => setModalData({ ...modalData, rows: modifiedData })}
                  onDelete={(id) => setModalData({ ...modalData, rows: modalData.rows.filter((row, i) => i !== id) })}
                />
              );
            }

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
                  onAdd={(newRow) => setBasicData({ ...basicData, rows: [...basicData.rows, newRow] })}
                  onModify={(modifiedData) => setBasicData({ ...basicData, rows: modifiedData })}
                  onDelete={(id) => setBasicData({ ...basicData, rows: basicData.rows.filter((row, i) => i !== id) })}
                  entries={5}
                  data={basicData}
                  entriesOptions={[5, 10, 15]}
                />
              );
            }

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}
                  onAdd={(newRow) => setDisableData({ ...disableData, rows: [...disableData.rows, newRow] })}
                  onModify={(modifiedData) => setDisableData({ ...disableData, rows: modifiedData })}
                  onDelete={(id) => setDisableData({ ...disableData, rows: disableData.rows.filter((row, i) => i !== id) })}
                  entries={5}
                  data={disableData}
                  entriesOptions={[5, 10, 15]}
                />
              );
            }

Confirm delete

If you want to prevent data from being accidentally removed, you can set a confirm option to true. In this case, Table Editor will show a Popconfirm element before removing an entry. 

        
            
            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 [confirmData, setConfirmData] = useState({
                columns: advancedColumns,
                rows: advancedRows,
              });

              return (
                <MDBTableEditor
                  confirmDelete
                  data={confirmData}
                  entriesOptions={[5, 10, 15]}
                  entries={5}
                  onAdd={(newRow) => setConfirmData({ ...confirmData, rows: [...confirmData.rows, newRow] })}
                  onModify={(modifiedData) => setConfirmData({ ...confirmData, rows: modifiedData })}
                  onDelete={(id) => setConfirmData({ ...confirmData, rows: confirmData.rows.filter((row, i) => i !== id) })}
                />
              );
            }

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 [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
                    isLoading={loading}
                    data={asyncData}
                    entriesOptions={[5, 10, 15]}
                    entries={5}
                    onAdd={(newRow) => setAsyncData({ ...asyncData, rows: [...asyncData.rows, newRow] })}
                    onModify={(modifiedData) => setAsyncData({ ...asyncData, rows: modifiedData })}
                    onDelete={(id) => setAsyncData({ ...asyncData, rows: asyncData.rows.filter((row, i) => i !== id) })}
                  />
                </>
              );
            }

Custom rows

The add() method takes an optional argument - a row which values will be preloaded into a new entry.

Note: for this particular use, a row has to be an object.

Note: as adding buttons are initialized manually, they won't be automatically disabled in the edit mode.

M.B.

(5 Avenue 26, New York)

Berkley & Clark

(43th Street 12, New York)

D&D Inc.

(14 Street 67, New York)

Thomas & Co.

(2 Avenue 54, New York)

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

            export default function App() {
              const basicColumns: AdvancedHeader[] = [
                {
                  width: 250,
                  label: 'Company',
                  field: 'company',
                },
                {
                  width: 250,
                  label: 'Address',
                  field: 'address',
                },
                {
                  width: 250,
                  label: 'City',
                  field: 'city',
                },
              ];
            
              const basicRows: AdvancedRecord[] = [
                { company: 'Smith & Johnson', address: 'Park Lane 2', city: 'London' },
                { company: 'P.J. Company', address: 'Oak Street 7', city: 'Aberdeen' },
                { company: 'Food & Wine', address: 'Netherhall Gardens 3', city: 'Hampstead' },
                { company: 'IT Service', address: 'Warwick Road 14', city: 'London' },
                { company: 'A. Jonson Gallery', address: 'Oaklands Avenue 2', city: 'London' },
                { company: 'F.A. Architects', address: 'Frognal Way 7', city: 'Hampstead' },
              ];

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

              const [customLoaded, setCustomLoaded] = useState({
                row1: false,
                row2: false,
                row3: false,
                row4: false,
              });

              const { row1, row2, row3, row4 } = customLoaded;

              const loadCustom = (row: AdvancedRecord, name: string) => {
                setCustomRows({ ...customRows, rows: [...customRows.rows, row] });
            
                setCustomLoaded({ ...customLoaded, [name]: true });
              };

              return (
                <>
                  <MDBRow>
                    <MDBCol md='3' sm='6' className='p-3'>
                      <h4>M.B.</h4>
                      <p>(5 Avenue 26, New York)</p>
        
                      <MDBBtn
                        onClick={() =>
                          loadCustom(
                            {
                              company: 'M.B.',
                              address: '5 Avenue 26',
                              city: 'New York',
                            },
                            'row1'
                          )
                        }
                        disabled={row1}
                        size='sm'
                        className='add-entry-button'
                      >
                        {row1 ? 'Loaded' : 'Load into table'}
                      </MDBBtn>
                    </MDBCol>
                    <MDBCol md='3' sm='6' className='p-3'>
                      <h4>Berkley &amp; Clark</h4>
                      <p>(43th Street 12, New York)</p>
        
                      <MDBBtn
                        onClick={() =>
                          loadCustom(
                            {
                              company: 'Berkley & Clark.',
                              address: '43th Street 12',
                              city: 'New York',
                            },
                            'row2'
                          )
                        }
                        disabled={row2}
                        size='sm'
                        className='add-entry-button'
                      >
                        {row2 ? 'Loaded' : 'Load into table'}
                      </MDBBtn>
                    </MDBCol>
                    <MDBCol md='3' sm='6' className='p-3'>
                      <h4>D&amp;D Inc.</h4>
                      <p>(14 Street 67, New York)</p>
        
                      <MDBBtn
                        onClick={() =>
                          loadCustom(
                            {
                              company: 'D&D Inc.',
                              address: '14 Street 67',
                              city: 'New York',
                            },
                            'row3'
                          )
                        }
                        disabled={row3}
                        size='sm'
                        className='add-entry-button'
                      >
                        {row3 ? 'Loaded' : 'Load into table'}
                      </MDBBtn>
                    </MDBCol>
                    <MDBCol md='3' sm='6' className='p-3'>
                      <h4>Thomas &amp; Co.</h4>
                      <p>(2 Avenue 54, New York)</p>
        
                      <MDBBtn
                        onClick={() =>
                          loadCustom(
                            {
                              company: 'Thomas & Co.',
                              address: '2 Avenue 54',
                              city: 'New York',
                            },
                            'row4'
                          )
                        }
                        disabled={row4}
                        size='sm'
                        className='add-entry-button'
                      >
                        {row4 ? 'Loaded' : 'Load into table'}
                      </MDBBtn>
                    </MDBCol>
                  </MDBRow>
        
                  <MDBTableEditor
                    search={false}
                    data={customRows}
                    entriesOptions={[5, 10, 15]}
                    entries={5}
                    onAdd={(newRow) => setCustomRows({ ...customRows, rows: [...customRows.rows, newRow] })}
                    onModify={(modifiedData) => setCustomRows({ ...customRows, rows: modifiedData })}
                    onDelete={(id) => setCustomRows({ ...customRows, rows: customRows.rows.filter((row, i) => i !== id) })}
                  />
                </>
              );
            }

Notifications

In this example, handlers for custom events trigger notifications after adding/deleting/updating an entry. 

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

            export default function App() {
              const advancedColumns: AdvancedHeader[] = [
                {
                  width: 250,
                  label: 'Company',
                  field: 'company',
                },
                {
                  width: 250,
                  sort: false,
                  defaultValue: 'Warsaw',
                  options: ['London', 'Warsaw', 'New York'],
                  inputType: 'select' as 'number' | 'select' | 'checkbox',
                  label: 'Office',
                  field: 'office',
                },
                {
                  width: 250,
                  inputType: 'number' as 'number' | 'select' | 'checkbox',
                  defaultValue: 1,
                  label: 'Employees',
                  field: 'employees',
                },
                {
                  width: 100,
                  defaultValue: false,
                  inputType: 'checkbox' as 'number' | 'select' | 'checkbox',
                  label: 'International',
                  field: 'international',
                },
              ];
          
              const advancedRows: AdvancedRecord[] = [
                {
                  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 [notificationData, setNotificationData] = useState({
                columns: advancedColumns,
                rows: advancedRows,
              });

              const [addAlert, setAddAlert] = useState(false);
              const [deleteAlert, setDeleteAlert] = useState(false);
              const [updateAlert, setUpdateAlert] = useState(false);

              const [alertBody, setAlertBody] = useState({ company: '', office: '' });

              return (
                <>
                  <MDBTableEditor
                    data={notificationData}
                    entriesOptions={[5, 10, 15]}
                    entries={5}
                    onAdd={(newRow) => {
                      setAlertBody({ company: newRow.company as string, office: newRow.office as string });
                      setNotificationData({ ...notificationData, rows: [...notificationData.rows, newRow] });
        
                      setAddAlert(true);
                      setTimeout(() => {
                        setAddAlert(false);
                      }, 2000);
                    }}
                    onModify={(modifiedData, id) => {
                      setAlertBody({
                        company: modifiedData[id].company as string,
                        office: modifiedData[id].office as string,
                      });
                      setNotificationData({ ...notificationData, rows: modifiedData });
        
                      setUpdateAlert(true);
                      setTimeout(() => {
                        setUpdateAlert(false);
                      }, 2000);
                    }}
                    onDelete={(id) => {
                      setAlertBody({
                        company: notificationData.rows[id].company as string,
                        office: notificationData.rows[id].office as string,
                      });
                      setNotificationData({ ...notificationData, rows: notificationData.rows.filter((row, i) => i !== id) });
        
                      setDeleteAlert(true);
                      setTimeout(() => {
                        setDeleteAlert(false);
                      }, 2000);
                    }}
                  />

                  <MDBAlert open={addAlert} color='success' autohide width={360} position='top-right' delay={2000} appendToBody>
                    <strong>New entry: </strong>
                    {alertBody.company} ({alertBody.office})
                  </MDBAlert>
                  <MDBAlert
                    open={updateAlert}
                    color='primary'
                    autohide
                    width={360}
                    position='top-right'
                    delay={2000}
                    appendToBody
                  >
                    <strong>Updated entry: </strong>
                    {alertBody.company} ({alertBody.office})
                  </MDBAlert>
                  <MDBAlert open={deleteAlert} color='danger' autohide width={360} position='top-right' delay={2000} appendToBody>
                    <strong>Deleted entry: </strong>
                    {alertBody.company} ({alertBody.office})
                  </MDBAlert>
                </>
              );
            }

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-ui-kit';

Properties

MDBTableEditor

Name Type Default Description Example
actionHeader ReactNode 'Actions' Header for action buttons <MDBTableEditor actionHeader='custom header' />
actionPosition String 'start' | 'end' Decides where to render an action column (start/end) <MDBTableEditor actionPosition='end' />
advancedSearch SelectData[] - Allows searching only for values in specific column <MDBTableEditor advancedSearch={[ { text: 'All columns', value: '' }, { text: 'Company', value: 'company' }, { text: 'Office', value: 'office' }, ]} />
allText string 'All' Changes text for All in the pagination select. <MDBTableEditor allText='test' />
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' />
cancelText ReactNode 'Cancel' Text displayed in cancel buttons <MDBTableEditor cancelText='Cancel' />
confirmText ReactNode 'Delete' Text displayed in confirm buttons (Popconfirm) <MDBTableEditor confirmText='custom confirm text' />
confirmMessage ReactNode 'Are you sure you want to delete this entry?' Text displayed in a Popconfirm element <MDBTableEditor confirmMessage='custom confirm message' />
color string - Adds a color class to a TableEditor (f.e 'bg-dark') <MDBTableEditor color='primary' />
data DataType - Data passed to the TableEditor. <MDBTableEditor data={data} />
dark boolean false Changes a font color to white. <MDBTableEditor dark />
editable boolean true Enable the edit mode. <MDBTableEditor editable />
editItemHeader ReactNode 'Edit item' A header of modal <MDBTableEditor editItemHeader='Adding item' />
entries number 10 Number of visible entries (pagination). <MDBTableEditor entries={25} />
entriesOptions number[] [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 />
format (field: string | number | symbol, value: number) => CSSProperties | undefined; - Allows formatting cells <MDBTableEditor format={(field, value) => { if (field === 'age' && value > 60) { return { backgroundColor: '#999' }; } }} />
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 />
isLoading boolean false Set the loading mode. <MDBTableEditor isLoading />
loaderClass string 'bg-primary' The class name for a loader (loading mode). <MDBTableEditor loaderClass='bg-warning' />
loadingMessage ReactNode 'Loading results...' A message displayed while loading data. <MDBTableEditor loadingMessage='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 string - Sets a maximum height of a TableEditor - can be either a string ('10%') or a number of pixels. <MDBTableEditor maxHeight='560px' />
mode 'table' | 'modal' 'table' Set table editor mode. <MDBTableEditor mode='modal' />
newItemHeader ReactNode 'New item' A header of modal <MDBTableEditor newItemHeader='Adding item' />
noFoundMessage ReactNode 'No matching results found' A message displayed when a table is empty. <MDBTableEditor noFoundMessage='Not found...' />
ofText ReactNode 'of' 'of' text in the pagination <MDBTableEditor ofText='z' />
pagination boolean true Shows/hides the pagination panel. <MDBTableEditor pagination={false} />
saveText ReactNode 'Save' Text displayed in the save button (modal)
rowsText string 'Rows per page': A text indicating a number of rows per page. <MDBTableEditor rowsText='Rows:' />
search boolean false Enable search in the table. <MDBTableEditor search />
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 />
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' />
searchInputProps Record<string, unknown> - Props for the search input <MDBTableEditor searchInputProps={{ className: 'test' }} />

Properties

DataType

        
                  
              type DataType = {
                columns: ColumnsType;
                rows: RowsType;
              };

ColumnsType

        
                  
              type AdvancedHeader = {
                label: string;
                field: keyof AdvancedRecord;
                sort?: boolean;
                width?: number;
                fixed?: string;
                fixedValue?: number;
                defaultValue?: unknown;
                options?: string[];
                inputType?: 'number' | 'select' | 'checkbox';
              };
              
              type ColumnsType = AdvancedHeader[];

RowsType

        
                  
              type AdvancedRecord = Record<string, unknown>;
    
              type RowsType = AdvancedRecord[];

Events

Name Type Description
onRowClick (row: RecordsType) => void Event emitted after clicking on a row.
onAdd (row: AdvancedRecord) => void This event fires after adding a new row.
onModify (rows: RowsType, id: number) => void This event fires when user modifies row.
onDelete (id: number) => void This event fires after deleting a row.