Within my React.js component, I have implemented a table using react-table along with some material-ui components displayed alongside the table:

import React from 'react'
import { useTable, useGlobalFilter, usePagination } from 'react-table'
import { makeGetRequest } from "../state/actions";
import PropTypes from "prop-types";
import { connect } from "react-redux";
//Material UI imports
import { styled } from '@mui/material/styles';
import Paper from '@mui/material/Paper';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import ButtonGroup from '@mui/material/ButtonGroup';
import TextField from '@mui/material/TextField';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import Select from '@mui/material/Select';

const Item = styled(Paper)(({ theme }) => ({
  ...theme.typography.body2,
  padding: theme.spacing(1),
  textAlign: 'center',
  color: theme.palette.text.secondary,

}));

export const GlobalFilter = ({ filter, setFilter }) => {
  return (
    <span>
      <TextField 
        id="outlined-basic" 
        label="Search" 
        variant="outlined"
        size="small"
        value={filter || ''}
        onChange={e => setFilter(e.target.value)} />
    </span>
  )
}

function Table({ columns, data }) {

  const handleEntriesChange = (event) => {
    setPageSize(event.target.value);
  };
    
  // Use the state and functions returned from useTable to build your UI
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
    page,
    pageOptions,
    state: { pageIndex, pageSize },
    previousPage,
    nextPage,
    canPreviousPage,
    canNextPage,
    setPageSize,
    state,
    setGlobalFilter,
    } = useTable(
        { columns, data, initialState: { pageSize: 10 }},
        useGlobalFilter, usePagination,
        )

  const { globalFilter } = state

  // Render the UI for your table
  return (
      <>
      <Box sx={{ minWidth: 120 }}>
          <InputLabel id="entries-label">Show Entries</InputLabel>
          <Select
            labelId="entries-label"
            id="entries-label"
            value={pageSize}
            label="Entries"
            onChange={handleEntriesChange}
          >
            <MenuItem value={10}>10</MenuItem>
            <MenuItem value={20}>20</MenuItem>
            <MenuItem value={50}>50</MenuItem>
            <MenuItem value={100}>100</MenuItem>
          </Select>
      </Box>
        <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter}/>
      <table {...getTableProps()}>
          <thead>
          {headerGroups.map(headerGroup => (
              <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map(column => (
                  <th {...column.getHeaderProps({
                    style: {  minWidth: column.minWidth, width: column.width },
                    })}>
                    {column.render('Header')}
                  </th>
              ))}
              </tr>
          ))}
          </thead>
          <tbody {...getTableBodyProps()}>
          {page.map(row => {
              prepareRow(row)
              return (
              <tr {...row.getRowProps()}>
                  {row.cells.map(cell => {
                  return  <td  {...cell.getCellProps()}>
                            {cell.column.Header=='LOCKER' ?
                              cell.render('Cell')
                             : 
                              cell.render('Cell')} 
                          </td>
                  })}
              </tr>
              )
          })}
          </tbody>
      </table>
        <ButtonGroup aria-label="button group">
          <Button variant="outlined" onClick={() => previousPage()} disabled={!canPreviousPage}>Previous</Button>
          <Button variant="contained" >{pageIndex + 1}</Button>
          <Button variant="outlined" onClick={() => nextPage()} disabled={!canNextPage}>Next</Button>
        </ButtonGroup>
      </>
  )
}

function LockerListTable(props) {

  const columns = React.useMemo(
      () => [
        {
          Header: '#',
          accessor: 'id',
          width: 200,
          minWidth: 20
        },
        {
          Header: 'LOCKER',
          accessor: 'locker_name',
          width: 1000,
          minWidth: 100
        },
        {
          Header: 'LOCATION',
          accessor: 'location',
          width: 1000,
          minWidth: 100
        },
        ],[]
  )
  
    const data = React.useMemo(() => props.locker_list_data, [props])
  
  return (
      <Table columns={columns} data={data} />
  )
}

LockerListTable.propTypes = {
  locker_list_data: PropTypes.array.isRequired,
};

const mapStateToProps = (state, ownProps) => {
  return { locker_list_data: state.handleAPI.locker_list_data };
};

const mapDispatchToProps = (dispatch) => {
  return {
    makeGetRequest: (url, componentName) => dispatch(makeGetRequest(url, componentName)),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(LockerListTable);

I've also applied custom CSS styling to the table, where the border has been set to 'border:none':

.table{
    font-size: 13px;
    text-align: center;
    width: 100%;
    margin: auto;
}

table.table-bordered_low_stock > thead > tr > th{
    border: none;
    padding-top: 3px;
    padding-bottom: 3px;
}

tbody tr:nth-child(odd){
    background: #e0e0e0;
}

tbody tr:nth-child(even){
    background: #bdbdbd;
}

th {
  background-color: #343A40 ;
  color: white;
  
}

Here is an image preview of the table: https://i.stack.imgur.com/8fiYm.png

I'm currently facing issues removing the white border lines between the rows and columns in the table. I've attempted various solutions from stackoverflow without success so far. Any advice would be greatly appreciated!