Showing data from database into MaterialTable React JS

317 Views Asked by At

I'm new in React, I do not know how to show different type of data. In the code below it looks like I can get the data and save it in setTableData, but I cannot show it in table.

function Home(props) {
  const [tableData, setTableData] = useState([]);

  useEffect(() => {
    async function loadUsers() {
      axios
        .get(`http://localhost/fastlink/FetchData.php`, {})
        .then((res) => {
          const data = res.data;
          console.log(data);
          setTableData(data);
        })
        .catch((error) => {
          console.log(error);
        });
    }

    loadUsers();
  }, []);

  const [columns, setColumns] = useState([
    { title: "Name", field: "name" },
    { title: "Email", field: "email" },
  ]);

  return (
    <div
      style={{
        flexGrow: "1",
        padding: "theme.spacing(3)",
        width: "80%",
        float: "right",
      }}
    >
      <MaterialTable
        icons={tableIcons}
        style={{ marginTop: "10%" }}
        title="All Users"
        columns={columns}
        data={tableData}
        editable={{
          onRowAdd: (newData) =>
            new Promise((resolve, reject) => {
              setTimeout(() => {
                setTableData([...tableData, newData]);

                resolve();
              }, 1000);
            }),
          onRowUpdate: (newData, oldData) =>
            new Promise((resolve, reject) => {
              setTimeout(() => {
                const dataUpdate = [...tableData];
                const index = oldData.tableData.id;
                dataUpdate[index] = newData;
                setTableData([...dataUpdate]);

                resolve();
              }, 1000);
            }),
          onRowDelete: (oldData) =>
            new Promise((resolve, reject) => {
              setTimeout(() => {
                const dataDelete = [...tableData];
                const index = oldData.tableData.id;
                dataDelete.splice(index, 1);
                setTableData([...dataDelete]);

                resolve();
              }, 1000);
            }),
        }}
      />
    </div>
  );
}

This image is the data in my database, I want to show Name and email in my Material-Table

0

There are 0 best solutions below