I was trying to add the data i have to a table using react-table and MDBDataTable for some reason i am getting key error and i was able to form the table but the data is not getting added to the table. you can check

https://codesandbox.io/embed/clever-microservice-91p8z0?fontsize=14&hidenavigation=1&theme=dark

import React from "react";
import styled from "styled-components";
import { useTable, useSortBy, useFilters } from "react-table";
import { MDBDataTable } from "mdbreact";

const Styles = styled.div`
  padding: 1rem;

  table {
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
  }

  table td,
  table th {
    border: 1px solid #ddd;
    padding: 8px;
  }

  table tr:nth-child(even) {
    background-color: #f2f2f2;
  }

  table tr:hover {
    background-color: #ddd;
  }

  table th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: center;
    background-color: #04aa6d;
    color: white;
  }
`;

function Table({ columns, data }) {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
  } = useTable({
    columns,
    data
  });

  // Render the UI for your table
  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map((headerGroup) => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map((column) => (
              <th {...column.getHeaderProps()}>{column.render("Header")}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row, i) => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map((cell) => {
                return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

function App() {
  const columns = [
    { Header: "Drug", accessor: "drug", width: 550 },
    { Header: "Molecule", accessor: "molecule" },
    { Header: "prediction", accessor: "prediction" }
  ];

  const data = {
    result: {
      DB04571: { "CC1=CC2=CC3=C(OC(=O)C=C3C)C(C)=C2O1": -4.204354286193848 },
      DB00460: {
        "COC(=O)CCC1=C2NC(\\C=C3/N=C(/C=C4\\N\\C(=C/C5=N/C(=C\\2)/C(CCC(O)=O)=C5C)C(C=C)=C4C)C2=CC=C([C@@H](C(=O)OC)[C@@]32C)C(=O)OC)=C1C": -6.578990459442139
      },
      DB00855: { "NCC(=O)CCC(O)=O": -3.666782855987549 },
      DB09536: { "O=[Ti]=O": -3.1173954010009766 },
      DB01600: { "CC(C(O)=O)C1=CC=C(S1)C(=O)C1=CC=CC=C1": -4.327569961547852 },
      DB09000: {
        "CC(CN(C)C)CN1C2=CC=CC=C2SC2=C1C=C(C=C2)C#N": -4.615994930267334
      }
    }
  };

  const normalizeData = (data) =>
    Object.keys(data).map((key) => ({
      drug: key,
      molecule: Object.keys(data[key]),
      prediction: Object.values(data[key])
    }));

  const data_two = {
    columns: columns,
    rows: normalizeData(data.result)
  };

  return (
    <Styles>
      {/* <Table columns={columns} data={normalizeData(data.result)} /> */}
      <MDBDataTable striped bordered small data={data_two} />
    </Styles>
  );
}

export default App;

CodePudding user response：

You need to add field and label key in column array.

Please replace column array with this

const columns = [
    { label: "Drug", field: "drug" },
    { label: "Molecule", field: "molecule" },
    { label: "prediction", field: "prediction" }
  ];

Working code

import React from "react";
import styled from "styled-components";
import { useTable, useSortBy, useFilters } from "react-table";
import { MDBDataTable } from "mdbreact";

const Styles = styled.div`
  padding: 1rem;

  table {
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
  }

  table td,
  table th {
    border: 1px solid #ddd;
    padding: 8px;
  }

  table tr:nth-child(even) {
    background-color: #f2f2f2;
  }

  table tr:hover {
    background-color: #ddd;
  }

  table th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: center;
    background-color: #04aa6d;
    color: white;
  }
`;

function Table({ columns, data }) {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
  } = useTable({
    columns,
    data
  });

  // Render the UI for your table
  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map((headerGroup) => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map((column) => (
              <th {...column.getHeaderProps()}>{column.render("Header")}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row, i) => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map((cell) => {
                return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

function App() {
  const columns = [
    { label: "Drug", field: "drug", width: 550 },
    { label: "Molecule", field: "molecule" },
    { label: "prediction", field: "prediction" }
  ];

  const data = {
    result: {
      DB04571: { "CC1=CC2=CC3=C(OC(=O)C=C3C)C(C)=C2O1": -4.204354286193848 },
      DB00460: {
        "COC(=O)CCC1=C2NC(\\C=C3/N=C(/C=C4\\N\\C(=C/C5=N/C(=C\\2)/C(CCC(O)=O)=C5C)C(C=C)=C4C)C2=CC=C([C@@H](C(=O)OC)[C@@]32C)C(=O)OC)=C1C": -6.578990459442139
      },
      DB00855: { "NCC(=O)CCC(O)=O": -3.666782855987549 },
      DB09536: { "O=[Ti]=O": -3.1173954010009766 },
      DB01600: { "CC(C(O)=O)C1=CC=C(S1)C(=O)C1=CC=CC=C1": -4.327569961547852 },
      DB09000: {
        "CC(CN(C)C)CN1C2=CC=CC=C2SC2=C1C=C(C=C2)C#N": -4.615994930267334
      }
    }
  };

  const normalizeData = (data) =>
    Object.keys(data).map((key) => ({
      drug: key,
      molecule: Object.keys(data[key])[0],
      prediction: Object.values(data[key])[0]
    }));

  const data_two = {
    columns: columns,
    rows: normalizeData(data.result)
  };

  return (
    <Styles>
      {/* <Table columns={columns} data={normalizeData(data.result)} /> */}
      <MDBDataTable striped bordered small data={data_two} />
    </Styles>
  );
}

export default App;