import React, { useState } from 'react';

import {

  Table,

  TableBody,

  TableCell,

  TableContainer,

  TableHead,

  TableRow,

  Paper,

  IconButton,

} from '@mui/material';

import EditIcon from '@mui/icons-material/Edit';

import DeleteIcon from '@mui/icons-material/Delete';

​

const ReusableTable = ({ data, columns, actions }) => {

  const [selectedRow, setSelectedRow] = useState(null);

​

  const handleRowClick = (index) => {

    setSelectedRow(index);

  };

​

  return (

    <TableContainer component={Paper}>

      <Table>

        <TableHead>

          <TableRow>

            {columns.map((column) => (

              <TableCell key={column.key}>{column.label}</TableCell>

            ))}

            <TableCell>Actions</TableCell>

          </TableRow>

        </TableHead>

        <TableBody>

          {data.map((row, index) => (

            <TableRow

              key={index}

              onClick={() => handleRowClick(index)}

              selected={index === selectedRow}

              hover

            >

              {columns.map((column) => (

                <TableCell key={column.key}>{row[column.key]}</TableCell>

              ))}

              <TableCell>

                {actions.map((action, actionIndex) => (

                  <IconButton

                    key={actionIndex}

                    onClick={(e) => {

                      e.stopPropagation();

                      action.onClick(e, row);

                    }}

                  >

                    {action.icon}

                  </IconButton>

                ))}

              </TableCell>

            </TableRow>

          ))}

        </TableBody>

      </Table>

    </TableContainer>

  );

};

​

// Example usage

const TableExample = () => {

  const data = [

    { id: 1, name: 'John Doe', age: 25 },

    { id: 2, name: 'Jane Doe', age: 30 },

    // Add more data as needed

  ];

​

  const columns = [

    { key: 'id', label: 'ID' },

    { key: 'name', label: 'Name' },

    { key: 'age', label: 'Age' },

    // Add more columns as needed

  ];

​

  const handleEdit = (e, row) => {

    console.log(`Edit action clicked for ID ${row.id}`);

    // Add your edit logic here

  };

​

  const handleDelete = (e, row) => {

    console.log(`Delete action clicked for ID ${row.id}`);

    // Add your delete logic here

  };

​

  const actions = [

    { icon: <EditIcon />, onClick: handleEdit },

    { icon: <DeleteIcon />, onClick: handleDelete },

    // Add more actions as needed

  ];

​

  return <ReusableTable data={data} columns={columns} actions={actions} />;

};

​

export default TableExample;