I am building a dynamic editable table with MUI, react.js, node.js and SQL Server. When I visit my web app table, it shows an empty row. I’m new to this, please assist.

It shows me a blank page but it’s meant to display information from my database. Below are my three core files – please I’m confused at this point.

Here is my tablecomponent.js:

import React, { useState, useEffect } from 'react';
import {
  Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Button, IconButton,
  TextField, Autocomplete
} from '@mui/material';
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
import { useTable, usePagination, useFilters, useSortBy } from 'react-table';
import axios from 'axios'; // Make sure axios is imported

const countryOptions = ['United States', 'Canada', 'United Kingdom', 'Germany', 'France', 'Australia', 'India'];

const TableComponent = ({ columns, data }) => {
  const [editableRowIndex, setEditableRowIndex] = useState(null);
  const [tableData, setTableData] = useState(data);

  useEffect(() => {
    console.log('tableData:', tableData); // Debug to see if tableData is correctly populated
    setTableData(data);
  }, [data]);
  
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    prepareRow,
    page,
    nextPage,
    previousPage,
    canNextPage,
    canPreviousPage,
    pageOptions,
    state: { pageIndex },
  } = useTable(
    {
      columns,
      data: tableData,
      autoResetPage: false,
      autoResetFilters: false,
    },
    useFilters,
    useSortBy,
    usePagination
  );

  // Handle edit and save
  const handleEditClick = (rowIndex) => {
    setEditableRowIndex(rowIndex);
  };

  const handleSaveClick = async () => {
    const row = tableData[editableRowIndex]; // Get the row being edited
    try {
      // Update the database with the edited row data
      await axios.put(`http://localhost:5000/api/data/${row.id}`, row);
  
      // Update the tableData state with the new row data
      const updatedData = tableData.map((item, index) => {
        if (index === editableRowIndex) {
          return row; // Replace the old row with the new updated row
        }
        return item; // Leave other rows unchanged
      });
  
      setTableData(updatedData); // Set the updated data
      setEditableRowIndex(null); // Exit edit mode
  
    } catch (error) {
      console.error('Error updating data:', error);
    }
  };
  
  const handleDeleteClick = async (rowIndex) => {
    const row = tableData[rowIndex];
    try {
      await axios.delete(`http://localhost:5000/api/data/${row.id}`);
      const updatedData = tableData.filter((_, index) => index !== rowIndex);
      setTableData(updatedData);
    } catch (error) {
      console.error('Error deleting data:', error);
    }
  };

  const handleCancelClick = () => {
    setEditableRowIndex(null);
  };

  const handleCellChange = (e, rowIndex, columnId) => {
    const value = e.target.value;
    const updatedData = tableData.map((row, index) => {
      if (index === rowIndex) {
        return {
          ...row,
          [columnId]: value,
        };
      }
      return row;
    });
    setTableData(updatedData);
  };

  const handleAutocompleteChange = (event, newValue, rowIndex, columnId) => {
    const updatedData = tableData.map((row, index) => {
      if (index === rowIndex) {
        return {
          ...row,
          [columnId]: newValue || '',
        };
      }
      return row;
    });
    setTableData(updatedData);
  };

  return (
    <TableContainer component={Paper}>
      <Table {...getTableProps()} sx={{ minWidth: 650 }}>
        <TableHead>
          {headerGroups.map(headerGroup => (
            <TableRow {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map(column => (
                <TableCell {...column.getHeaderProps()}>
                  <div style={{ display: 'flex', alignItems: 'center' }}>
                    <div {...column.getSortByToggleProps()} style={{ cursor: 'pointer' }}>
                      {column.render('Header')}
                      <span>
                        {column.isSorted ? (column.isSortedDesc ? ' 🔽' : ' 🔼') : ''}
                      </span>
                    </div>
                    {column.canFilter && (
                      <IconButton size="small">
                        <ArrowDropDownIcon />
                        {column.render('Filter')}
                      </IconButton>
                    )}
                  </div>
                </TableCell>
              ))}
              <TableCell>Actions</TableCell>
            </TableRow>
          ))}
        </TableHead>
        <TableBody {...getTableBodyProps()}>
          {page.map((row, i) => {
            prepareRow(row);
            return (
              <TableRow {...row.getRowProps()}>
                {row.cells.map(cell => (
                  <TableCell {...cell.getCellProps()} sx={{ '&:nth-of-type(odd)': { backgroundColor: '#f9f9f9' }, '&:hover': { backgroundColor: '#f1f1f1' } }}>
                    {editableRowIndex === i ? (
                      cell.column.id === 'country' ? (
                        <Autocomplete
                          options={countryOptions}
                          value={cell.value || ''}
                          onChange={(event, newValue) =>
                            handleAutocompleteChange(event, newValue, i, cell.column.id)
                          }
                          renderInput={(params) => (
                            <TextField {...params} variant="outlined" />
                          )}
                        />
                      ) : (
                        <TextField
                          value={cell.value}
                          onChange={(e) => handleCellChange(e, i, cell.column.id)}
                          variant="outlined"
                        />
                      )
                    ) : (
                      cell.render('Cell')
                    )}
                  </TableCell>
                ))}
                <TableCell>
                  {editableRowIndex === i ? (
                    <>
                      <Button onClick={handleSaveClick}>Save</Button>
                      <Button onClick={handleCancelClick}>Cancel</Button>
                    </>
                  ) : (
                    <>
                      <Button onClick={() => handleEditClick(i)}>Edit</Button>
                      <Button onClick={() => handleDeleteClick(i)}>Delete</Button>
                    </>
                  )}
                </TableCell>
              </TableRow>
            );
          })}
        </TableBody>
      </Table>
      <div style={{ marginTop: '10px' }}>
        <Button onClick={previousPage} disabled={!canPreviousPage}>
          Previous
        </Button>
        <span style={{ margin: '0 15px' }}>
          Page{' '}
          <strong>
            {pageIndex + 1} of {pageOptions.length}
          </strong>{' '}
        </span>
        <Button onClick={nextPage} disabled={!canNextPage}>
          Next
        </Button>
      </div>
    </TableContainer>
  );
};  

export default TableComponent; 

Here is my

import React, { useState, useEffect } from 'react';
import TableComponent from './TableComponent';
import DropdownNumberFilter from './DropdownNumberFilter'; // Make sure you have this filter defined
import DropdownTextFilter from './DropdownTextFilter'; // Make sure you have this filter defined
import axios from 'axios';

const columns = [
  {
    Header: 'Name',
    accessor: 'name',
    Filter: DropdownTextFilter,
  },
  {
    Header: 'Age',
    accessor: 'age',
    Filter: DropdownNumberFilter,
  },
  {
    Header: 'Country',
    accessor: 'country',
    Filter: DropdownTextFilter,
  },
];

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:5000/api/data')
      .then(response => {
        console.log(response.data); // Check if data is fetched correctly
        setData(response.data);
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  }, []);

  return (
    <div>
      <h1>Custom Filter Table with Actions</h1>
      <TableComponent columns={columns} data={data} />
    </div>
  );
}

export default App;

Here is my serve.js file:

// backend/server.js

const express = require('express');
const sql = require('mssql');
const app = express();
const PORT = 5000;
const cors = require('cors');
app.use(cors());
app.use(express.json());



const pool = new sql.ConnectionPool({
  user: 'sa',
  password: 'password',
  server: 'DESKTOP-OA96LT5',
  database: 'mydynamicDB',
  options: {
    encrypt: false,
    trustServerCertificate: true,
    instanceName: 'SQLEXPRESS',
  }
});

pool.connect().then(() => {
  console.log('Connected to SQL Server');

  app.get('/api/data', async (req, res) => {
    try {
      const result = await pool.request().query('SELECT * FROM Friends');
      res.json(result.recordset);  // Sends the data to the frontend
    } catch (err) {
      console.error('Query failed: ', err);
      res.status(500).send('Server error');
    }
  });

}).catch(err => {
  console.error('Database connection failed: ', err);
});

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

app.post('/api/data', async (req, res) => {
    try {
      const { name, age, country } = req.body;
      await pool.request()
        .input('name', sql.VarChar, name)
        .input('age', sql.Int, age)
        .input('country', sql.VarChar, country)
        .query('INSERT INTO Friends (name, age, country) VALUES (@name, @age, @country)');
      res.status(201).send('Friend added successfully');
    } catch (err) {
      console.error('Insert query failed: ', err);
      res.status(500).send('Server error');
    }
  });
  app.put('/api/data/:id', async (req, res) => {
    try {
      const { id } = req.params;
      const { name, age, country } = req.body;
      await pool.request()
        .input('id', sql.Int, id)
        .input('name', sql.VarChar, name)
        .input('age', sql.Int, age)
        .input('country', sql.VarChar, country)
        .query('UPDATE Friends SET name = @name, age = @age, country = @country WHERE id = @id');
      res.status(200).send('Friend updated successfully');
    } catch (err) {
      console.error('Update query failed: ', err);
      res.status(500).send('Server error');
    }
  });
  app.delete('/api/data/:id', async (req, res) => {
    try {
      const { id } = req.params;
      await pool.request()
        .input('id', sql.Int, id)
        .query('DELETE FROM Friends WHERE id = @id');
      res.status(200).send('Friend deleted successfully');
    } catch (err) {
      console.error('Delete query failed: ', err);
      res.status(500).send('Server error');
    }
  });