Updating Data Using Editable Table

Topic: Updating Data Using Editable Table

sedonawebservices pro asked 5 years ago

Hi.

I am able to use the Editable Table component for displaying data, but I don't understand how to trigger an update to a database using a pre-made component such as this (may be relevant to your Table templates in general).

While this is not directly related to your components, it could be helpful to provide an example of this in your documentation.

But for now, could you briefly describe how to do this? (or point me in the right direction)?

Also, it seems that the Editable Table component uses an Array of Arrays for handling the data, which seems practically useless (or difficult o implement), if we are trying to edit items and saving them to a database?

Jonathan

Ron Sargeant free commented 5 years ago

I have a very similar problem. I am trying to use the Table Editor component to edit active data. I am using Flask to generate my pages and the data going into the table is live data. The initial presentation of the data as a table works well. I activate the edits (as per example page), then get the edit icon at the end of each row. However, if I click one of those edits, the expected redraw of that section is corrupted. I get a short section of HTML text showing where there should be icons.

If I use static data to build this table (as happens in the MDB example page) it works as expected, so there appears to be nothing missing in css or js declarations on that page.

I haven't yet seen an example of MDB table data that is not based on a static data block embedded in the page. I understand it is difficult to make such an example on a public server but a tutorial on processing database entries through editable tables would be an excellent addition to the lessons you have now. At present I can't see MDB being of any use to me unless I can overcome this problem.

I have a very similar problem. I am trying to use the Table Editor component to edit active data. I am using Flask to generate my pages and the data going into the table is live data. The initial presentation of the data as a table works well. I activate the edits (as per example page), then get the edit icon at the end of each row. However, if I click one of those edits, the expected redraw of that section is corrupted. I get a short section of HTML text showing where there should be icons.If I use static data to build this table (as happens in the MDB example page) it works as expected, so there appears to be nothing missing in css or js declarations on that page.I haven't yet seen an example of MDB table data that is not based on a static data block embedded in the page. I understand it is difficult to make such an example on a public server but a tutorial on processing database entries through editable tables would be an excellent addition to the lessons you have now. At present I can't see MDB being of any use to me unless I can overcome this problem.

Please insert min. 15 characters.

Anna Morawska staff commented 5 years ago

Hi there,

thank you for your comment, we will try to deliver a tutorial explaining how to deal with it.

Add comment

marrielle.aboujaoude free answered 5 years ago

0 0 Best answer

Did any one found a solution to update the database using editable table ?

Konrad Stępień staff commented 5 years ago

Hi@Rabie.jabasini

Can you expand your answer?

What do you mean by "update"?

Best, Konrad.

Add comment

Jakub Mandra staff answered 5 years ago

2 0 Best answer

Hi,

maybe this very simple app with dataTable and REST api will help you:

<pre class="prettyprint"><code>import React from "react";
import { MDBDataTable, MDBBtn, MDBInput } from "mdbreact";
import './App.css';

class TableEditablePage extends React.Component {
  state = {
    columns: [
      {
        field: 'title',
        label: 'Title'
      },
      {
        field: 'year',
        label: 'Year'
      },
      {
        field: 'genre',
        label: 'Genre'
      },
      {
        field: 'delete',
        label: 'Delete'
      }
    ],
    rows: [],
    input: ''
  }

componentDidMount() {
    this.getMovies();
  }

getMovies = () => {
 fetch("https://man-movies-api.herokuapp.com/movies", {
 method: "GET",
 })
 .then(res => res.json())
 .then(json => {
 let rows = [];
 json.movies.forEach(item => rows.push({
 id: item._id,
 title: item.title,
 year: item.year,
 genre: item.genre,
 delete: <MDBBtn onClick={() => this.deleteMovie(item._id)}>X</MDBBtn>
 }));

this.setState({ rows });
      })
      .catch(err => console.error(err));
  }

addMovie = () => {
    fetch("https://man-movies-api.herokuapp.com/movies", {
      method: "POST",
      body: JSON.stringify({
        title: this.state.input
      }),
      headers: {
        'Content-Type': 'application/json'
      }
    })
      .then(res => {
        if (res.ok) this.getMovies();
      })
      .catch(err => console.error(err));
  }

updateInput = (value) => this.setState({ input: value });

deleteMovie = (id) => {
    fetch(`https://man-movies-api.herokuapp.com/movies/${id}`, {
      method: "DELETE"
    })
      .then(res => {
        if (res.ok) this.getMovies();
      })
      .catch(err => console.error(err));
  }

render() {
 return (
 <>
 <MDBDataTable
 striped
 bordered
 hover
 data={{ columns: this.state.columns, rows: this.state.rows }}
 />

<MDBInput value={this.state.input} getValue={this.updateInput} label="Insert movie title" />
 <MDBBtn onClick={this.addMovie} disabled={!this.state.input.length}>Add item</MDBBtn>
 </>
 );
 }
};

export default TableEditablePage;
</code></pre>

Please insert min. 20 characters.

Hi,

maybe this very simple app with dataTable and REST api will help you:

import React from "react";
import { MDBDataTable, MDBBtn, MDBInput } from "mdbreact";
import './App.css';

class TableEditablePage extends React.Component {
  state = {
    columns: [
      {
        field: 'title',
        label: 'Title'
      },
      {
        field: 'year',
        label: 'Year'
      },
      {
        field: 'genre',
        label: 'Genre'
      },
      {
        field: 'delete',
        label: 'Delete'
      }
    ],
    rows: [],
    input: ''
  }

  componentDidMount() {
    this.getMovies();
  }

  getMovies = () => {
    fetch("https://man-movies-api.herokuapp.com/movies", {
      method: "GET",
    })
      .then(res => res.json())
      .then(json => {
        let rows = [];
        json.movies.forEach(item => rows.push({
          id: item._id,
          title: item.title,
          year: item.year,
          genre: item.genre,
          delete: <MDBBtn onClick={() => this.deleteMovie(item._id)}>X</MDBBtn>
        }));

        this.setState({ rows });
      })
      .catch(err => console.error(err));
  }

  addMovie = () => {
    fetch("https://man-movies-api.herokuapp.com/movies", {
      method: "POST",
      body: JSON.stringify({
        title: this.state.input
      }),
      headers: {
        'Content-Type': 'application/json'
      }
    })
      .then(res => {
        if (res.ok) this.getMovies();
      })
      .catch(err => console.error(err));
  }

  updateInput = (value) => this.setState({ input: value });

  deleteMovie = (id) => {
    fetch(`https://man-movies-api.herokuapp.com/movies/${id}`, {
      method: "DELETE"
    })
      .then(res => {
        if (res.ok) this.getMovies();
      })
      .catch(err => console.error(err));
  }

  render() {
    return (
      <>
        <MDBDataTable
          striped
          bordered
          hover
          data={{ columns: this.state.columns, rows: this.state.rows }}
        />

        <MDBInput value={this.state.input} getValue={this.updateInput} label="Insert movie title" />
        <MDBBtn onClick={this.addMovie} disabled={!this.state.input.length}>Add item</MDBBtn>
      </>
    );
  }
};

export default TableEditablePage;

Philippe Yu free commented 5 years ago

Hi, thanks for your answer ! That's not bad, but it's not using component MDBTableEditable, do you have a template for this ?

Philippe Yu free commented 5 years ago

Forget it, it helped me a lot ! Thanks !

Aliaksandr Andrasiuk staff commented 5 years ago

Glad we could help you!

Happy codding!

Roméo N'GUESSAN free commented 4 years ago

Merci pour votre reponse

Add comment

Philippe Yu free answered 5 years ago

0 0 Best answer

Hi sedonawebservices,

I would like to know how did you display data, and did you find a solution for updating your database ? If you have any examples, that would be great :)

Philippe Yu free commented 5 years ago

I mean fetch or axios :)

Add comment

Closed

This topic is closed.

FREE CONSULTATION

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

Status

Closed

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB React
MDB Version: 4.8.4
Device: Desktop
Browser: Chrome
OS: OS X
Provided sample code: No
Provided link: No

sedonawebservices

Pro User 109Support score
9Questions 6Answers 0Snippets