Need some hint to be able to create an editable table

Topic: Need some hint to be able to create an editable table

marrielle.aboujaoude free asked 5 years ago

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.)

Add comment

Konrad Stępień staff answered 5 years ago

0 0 Best answer

Hi <a href="/profile/?id=76727" target="_blank" rel="nofollow">@marrielle.aboujaoude</a>

Every data about DataTableEditable you can find on this page: <a href="https://mdbootstrap.com/docs/react/tables/editable/#" target="_blank">https://mdbootstrap.com/docs/react/tables/editable/#</a>!

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 <code>Age</code>) and field must be a <code>Number</code> then script remove red colour.

<pre class="prettyprint"><code>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;
</code></pre>

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.

Please insert min. 20 characters.

Hi @marrielle.aboujaoude

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.

Add comment

Konrad Stępień staff answered 5 years ago

0 0 Best answer

Hi @marrielle.aboujaoude,

How we can reproduce the problem?

Best regards, Konrad.

marrielle.aboujaoude free 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 free 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" } }} />

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"
 }
 }}
 />

Please insert min. 15 characters.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: 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

marrielle.aboujaoude

87Support score
10Questions 4Answers 0Snippets