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 })}
/>
);
}
Advanced Search
You can create more advanced searching functionality and allow a user to specify in which column to search for a given phrase.
Search fields need to be disabled manually in the edit mode.
in:
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 [advancedData, setAdvancedData] = useState({
columns: advancedColumns,
rows: advancedRows,
});
return (
<MDBTableEditor
search={false}
advancedSearch={[
{ text: 'All columns', value: 'all', selected: true },
{ text: 'Company', value: 'company' },
{ text: 'Office', value: 'office' },
]}
data={advancedData}
entriesOptions={[5, 10, 15]}
setData={(e: any) => setAdvancedData({ ...advancedData, 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
|
() => any | |
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<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 />
|
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
|
number | 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<any> | |
Contains selected data |
<MDBTableEditor selectedRows={selectedRows} />
|
setSelectedRows
|
React.Dispatch<React.SetStateAction<any>> | |
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
|
React.ComponentProps<any> | 'table' |
Defines tag of the MDBTableEditor element |
<MDBTableEditor tag="section" />
|