My datatable is showing 0 of 0 results even displaying a populated table using react

My datatable is showing 0 of 0 results even displaying a populated table using react

GuildbGuildb Posts: 3Questions: 1Answers: 0
edited November 20 in Free community support

This is my return element from the react that is populatingand creating the table

return (
    <div>
      <h3>{title}</h3>
      <div className="d-sm-flex align-items-center mb-4">
        <table  id="table_id" className="display table" style={{ width: `100%` }}>
          <thead>
            <tr>
              <th>Name</th>
              <th>Type</th>
              <th>Country</th>
              <th>Region</th>
              <th>Description</th>
              <th>Rec</th>
              <th></th>
              <th></th>
              <th></th>
            </tr>
          </thead>
          <tfoot>
            <tr>
              <th>Name</th>
              <th>Type</th>
              <th>Country</th>
              <th>Region</th>
              <th>Description</th>
              <th>Rec</th>
              <th></th>
              <th></th>
              <th></th>
            </tr>
          </tfoot>
          <tbody>
            {poi.length > 0 ? (
              poi.map((item) => (
                <tr key={item.id}>
                  <td>{item.name}</td>
                  <td>{item.type}</td>
                  <td>{item.country}</td>
                  <td>{item.region}</td>
                  <td>{item.description}</td>
                  <td>{item.recommendations}</td>
                  <td>
                    <button className="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm" id="recomendbut" onClick={() => recommend(item.id)}>
                      Recommend
                    </button>
                  </td>
                  <td>
                    <button className="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm" id="shareBtn" onClick={() => sharePoi(item.id)}>
                      Share
                    </button>
                  </td>
                  <td>
                    <button className="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm" id="detePoi" onClick={() => deletePoi(item.id)}>
                      Delete
                    </button>
                  </td>
                </tr>
              ))
            ) :""}
          </tbody>
        </table>
      </div>
    </div>

and i am using the react hook to say that this table is a datatable

React.useEffect(()=>{
        $(document).ready(function () {
          $('#table_id').DataTable();
      });  
      }, []);

basically the same as this guy in this thread https://datatables.net/forums/discussion/62505/datatable-showing-0-to-0-of-0-entries

but with react

anyone knows how to fix this ?

Answers

  • allanallan Posts: 60,303Questions: 1Answers: 9,791 Site admin

    You can't let both DataTables and React control the same DOM. If one changes the DOM, the other won't know about it. It looks to me like you are having React render the <tbody> content?

    Instead use the data property to feed DataTables the poi array.

    The one thing that I don't have an answer to is how to use React events for your buttons.

    I plan to look into creating a proper, fully supported, React plug-in for DataTables in the new year, after DataTables 2 has been released.

    Regards,
    Allan

  • GuildbGuildb Posts: 3Questions: 1Answers: 0

    Hello allan, yes react is rendering the whole page.

    what/how you mean to use the data option to feed the datatable ?

  • allanallan Posts: 60,303Questions: 1Answers: 9,791 Site admin

    There is an example here. i.e. Let DataTables render the table DOM - otherwise weird things are going to happen if both DataTables and React try to control the same elements.

    Allan

  • GuildbGuildb Posts: 3Questions: 1Answers: 0

    Okay thank you I will give it a try :)

Sign In or Register to comment.