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) })}
/>
);
}
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.
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
confirmDelete
data={advancedData}
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 & 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&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 & 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. |