title: Create dynamic action column in React Material UI Table
body: <p>I have a DataTable component that contains Material React Table. I pass the column and row data as props to the DataTable component. I now wanted to add an action column having option like edit and delete. I got stuck here. I provide my code below, kindly provide solution</p>
  
  <pre><code>&lt;DataTable
                      columns={COLUMN_DATA}
                      columnsUniqueKey='colId'
                      rowsUniqueKey='rowId'
                      rows={ROW_DATA}
                      pagination={false}
   /&gt; 
  
  import React from 'react';
  import moment from "moment";
  import StatusLabel from "../../../../components/StatusLabel/StatusLabel";
  import { Button } from '@material-ui/core';
  
  
  export const COLUMN_DATA = [
      {
          id: "key",
          label: "Key",
      },
      {
          id: "value",
          label: "Value",
      },
      {
          id: "createdAt",
          label: "Create At",
      },
      {
          id: "updatedAt",
          label: "Updated At",
      },
      {
          id: "actions",
          label: "Actions",
      }
  ]
  
  
  const createData = (key, value, createdAt, updatedAt, actions) =&gt; {
      return {
          key,
          value,
          createdAt,
          updatedAt,
          actions
      };
  }
  
  
  export const ROW_DATA = [
      createData(
          'IP',
          '12.22.12.10',
          moment().subtract(1, 'day').format('LLL'),
          moment().subtract(1, 'day').format('LLL'),
          &lt;&gt;
              &lt;Button  variant="outlined" size="small" color="primary"&gt;
                  Edit
              &lt;/Button&gt;
          &lt;/&gt;
      ),
      createData(
          'IP',
          '12.22.12.10',
          moment().subtract(2, 'day').format('LLL'),
          moment().subtract(2, 'day').format('LLL'),
          &lt;&gt;
              &lt;Button  variant="outlined" size="small" color="primary"&gt;
                  Edit
              &lt;/Button&gt;
          &lt;/&gt;
      ),
      createData(
          'IP',
          '12.22.12.10',
          moment().subtract(3, 'day').format('LLL'),
          moment().subtract(3, 'day').format('LLL'),
          &lt;&gt;
              &lt;Button  variant="outlined" size="small" color="primary"&gt;
                  Edit
              &lt;/Button&gt;
          &lt;/&gt;
      ),
      createData(
          'IP',
          '12.22.12.10',
          moment().subtract(4, 'day').format('LLL'),
          moment().subtract(4, 'day').format('LLL'),
          &lt;&gt;
              &lt;Button  variant="outlined" size="small" color="primary"&gt;
                  Edit
              &lt;/Button&gt;
          &lt;/&gt;
      ),
      createData(
          'IP',
          '12.22.12.10',
          moment().subtract(5, 'day').format('LLL'),
          moment().subtract(5, 'day').format('LLL'),
          &lt;&gt;
              &lt;Button variant="outlined" size="small" color="primary"&gt;
                  Edit
              &lt;/Button&gt;
          &lt;/&gt;
      ),
  ];
  </code></pre>
  
  <p>And my DataTable component file </p>
  
  <pre><code>import React from 'react';
  // styles
  import useStyles from "./styles";
  import {
      Table,
      TableBody,
      TableCell,
      TableContainer,
      TableHead,
      TablePagination,
      TableRow,
      TableSortLabel
  } from '@material-ui/core';
  import { DATA_TABLE_ROWS_PER_PAGE_OPTIONS } from './constants';
  
  
  
  const DataTable = ({ columns, rows, enableActions, pagination, ...props }) =&gt; {
  
  
    const classes = useStyles();
    const [page, setPage] = React.useState(0);
    const [rowsPerPage, setRowsPerPage] = React.useState(10);
  
    const handleChangePage = (event, newPage) =&gt; {
      setPage(newPage);
    };
  
    const handleChangeRowsPerPage = event =&gt; {
      setRowsPerPage(+event.target.value);
      setPage(0);
    };
  
  
    //Row Click Event
    const onRowClicked = row =&gt; (event) =&gt; {
      // props.rowClicked(row)
    }
  
  
  
    return (
        &lt;&gt;
          &lt;TableContainer className={classes.container}&gt;
              &lt;Table stickyHeader&gt;
              &lt;TableHead&gt;
                  &lt;TableRow&gt;
                  {columns.map(({sortable, ...column}) =&gt; (
                      &lt;TableCell
                      key={column[props.columnsUniqueKey]}
                      align={column.align}&gt;
                          { sortable ? &lt;TableSortLabel&gt;
                                          {column.label}
                                       &lt;/TableSortLabel&gt; : column.label }
                      &lt;/TableCell&gt;
                  ))}
  
                  {/* { enableActions &amp;&amp; &lt;TableCell&gt;
                      Actions
                  &lt;/TableCell&gt; } */}
  
  
                  &lt;/TableRow&gt;
              &lt;/TableHead&gt;
              &lt;TableBody&gt;
                  { ( pagination ? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) : rows).map(row =&gt; {
                  return (
                      &lt;TableRow onClick={onRowClicked(row)} hover role="checkbox" tabIndex={-1} key={row[props.rowsUniqueKey]}&gt;
                          { columns.map( column =&gt; {
                              const value = row[column.id];
                              return (
                                  &lt;&gt;
                                      &lt;TableCell key={column[props.columnsUniqueKey]} align={column.align}&gt;
                                          { column.format &amp;&amp; typeof value === 'number' ? column.format(value) : value }
                                      &lt;/TableCell&gt;
                                  &lt;/&gt;
                              );
                          }) }
                          {/* { enableActions &amp;&amp; &lt;TableCell&gt; Actions &lt;/TableCell&gt; } */}
                      &lt;/TableRow&gt;
                  );
                  })}
              &lt;/TableBody&gt;
              &lt;/Table&gt;
          &lt;/TableContainer&gt;
          {pagination &amp;&amp; &lt;TablePagination
              rowsPerPageOptions={DATA_TABLE_ROWS_PER_PAGE_OPTIONS}
              component="div"
              count={rows.length}
              rowsPerPage={rowsPerPage}
              page={page}
              onChangePage={handleChangePage}
              onChangeRowsPerPage={handleChangeRowsPerPage}
          /&gt;}
        &lt;/&gt;
    );
  }
  
  export default DataTable;
  </code></pre>
  
  <p>How can I add handlers to edit button and pass the column data so that I can handle the event the parent component</p>