Topic: Need some hint to be able to create an editable table
Expected behavior i'm not able to add regulation for every field specially when i want the character length to be more than 5 characters and the email regulation
Actual behavior I'm trying to use the editable table (https://mdbootstrap.com/docs/react/tables/editable/#!)
Resources (screenshots, code snippets etc.)
How we can reproduce the problem?
Best regards, Konrad.
marrielle.aboujaoude commented 5 years ago
can you show me where can i add a function to be able to detect every field if it's required or no and if it contain the correct validation or no?
marrielle.aboujaoude commented 5 years ago
I need to be able to add function to every click in this editable table, like the following: ({ icon: "not_interested", color: rowData.enabled == true ? "grey-color" : "red-color", tooltip: "Block " + rowData.enabled, onClick: (event, rowData) => this.open( "Block", rowData.enabled, rowData.userName, rowData.email, rowData.roleName, rowData.tableData.id ), }) ]} editable={{ onRowAdd: newData => new Promise((resolve, reject) => { setTimeout(() => { { const data = this.state.data; data.push(newData); this.setState({ data }, () => resolve()); this.addData(newData); } resolve(); }, 1000); }), onRowUpdate: (newData, oldData) => new Promise((resolve, reject) => { setTimeout(() => { { const data = this.state.data; const index = data.indexOf(oldData); data[index] = newData; this.setState({ data }, () => resolve()); this.updateData(newData); } resolve(); }, 1000); }), onRowDelete: oldData => new Promise((resolve, reject) => { setTimeout(() => { { let data = this.state.data; const index = data.indexOf(oldData); data.splice(index, 1); this.setState({ data }, () => resolve()); this.deleteRow(oldData.userName); } resolve(); }, 1000); }), onRowBlock: (newData, oldData) => new Promise((resolve, reject) => { setTimeout(() => { { const data = this.state.data; const index = data.indexOf(oldData); data[index] = newData; this.setState({ data }, () => resolve()); //this.updateData(newData); } resolve(); }, 1000); }) }} localization={{ pagination: { labelRowsPerPage: '{from}-{to} of {count}' }, toolbar: { nRowsSelected: '{0} row(s) selected' }, header: { actions: 'Actions' }, body: { emptyDataSourceMessage: 'No records to display', filterRow: { filterTooltip: 'Filter' }, Row: "20" } }} />
Every data about DataTableEditable you can find on this page: https://mdbootstrap.com/docs/react/tables/editable/#!
But... For this time it is not possible with method from table editable. I made the script to add the class or remove class for element what you want.
This code gets your field what you changing and then gets the name of Header (for me it is Age) and field must be a Number then script remove red colour.
import {
MDBCard,
MDBCardBody,
MDBCardHeader,
MDBTableEditable
} from 'mdbreact';
import React from 'react';
class TableEditablePage extends React.Component {
state = {
columns: ['Person Name', 'Age', 'Company Name', 'Country', 'City'],
data: [
['Aurelia Vega', 30, 'Deepends', 'Spain', 'Madrid'],
['Guerra Cortez', 45, 'Insectus', 'USA', 'San Francisco'],
['Guadalupe House', 26, 'Isotronic', 'Germany', 'Frankfurt am Main'],
['Elisa Gallagher', 31, 'Portica', 'United Kingdom', 'London']
]
};
addClass = e => {
const target = e.target;
this.checkHeader(target) === 'Age' && isNaN(Number(target.innerHTML))
? !target.classList.contains('red-text') &&
target.classList.add('red-text')
: target.classList.remove('red-text');
};
checkHeader = target => {
const childs = target.closest('tr').childNodes;
const index = Array.from(childs).indexOf(target);
const heads = target.closest('table').querySelectorAll('thead tr th');
const head = heads[index].innerHTML;
return head;
};
render() {
return (
<MDBCard>
<MDBCardHeader
tag='h3'
className='text-center font-weight-bold text-uppercase py-4'
>
Table Editable
</MDBCardHeader>
<MDBCardBody>
<MDBTableEditable
data={this.state.data}
columns={this.state.columns}
onKeyUp={this.addClass}
striped
bordered
/>
</MDBCardBody>
</MDBCard>
);
}
}
export default TableEditablePage;
If you have any suggestion what properties I can add to the component, please tell me about it.
I will try to add it in the near future.
Best regards, Konrad.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.21.0
- Device: laptop
- Browser: chrome
- OS: windows
- Provided sample code: No
- Provided link: Yes