React react-data-table-component Add Event in Row Button

You not pass reference for row function . so that reason you are not able to get value.Your side require to change two Places.so please check below things

Place 1 :

cell:(row)=><button onClick={clickHandler} id={row.ID}>Action</button>

Place 2:

 handleButtonClick = (state) => {
    console.log('clicked');
    console.log(state.target.id);
  };

Still If you not understand anythings so please check below entire code.

import Page from 'components/Page';
import React from 'react';
import {
  Button,
  Card,
  CardBody,
  CardHeader,
  Col,
  FormFeedback,
  FormGroup,
  FormText,
  Input,
  Label,
  Row,
} from 'reactstrap';
import axios from 'axios';
import DataTable , { memoize } from 'react-data-table-component';
import { LoadingOverlay, Loader } from 'react-overlay-loader';
import 'react-overlay-loader/styles.css';
const columns = memoize(clickHandler => [
  {
    cell:(row) => <button onClick={clickHandler} id={row.ID}>Action</button>,
    ignoreRowClick: true,
    allowOverflow: true,
    button: true,
  },
  {
    name: 'ID',
    selector: 'ID',
    sortable: true,
    grow: 2,
  },
  {
    name: 'Name',
    selector: 'name',
    sortable: true,
    grow: 2,
  },
  {
    name: 'Class',
    selector: 'class',
    sortable: true,
  },

]);
const viewQuery ="SELECT ID,name,class FROM school ";
 class DTable extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            viewdata:{},
            loading:false,
            selectedRows: []

        };
      }
  viewData(){

    axios({
      method: 'post',
      url: '',
      data: {query:viewQuery},
      crossDomain: true,
      headers: {
          'Content-type': 'multipart/form-data'
        }
      })
      .then(response => {
         this.setState({ viewdata: response.data });

         //console.log(response)
        })
      .catch(function (response) {
          //handle error
          console.log(response);
      });
  } 
 componentDidMount() {
       this.viewData();

 }
 handleButtonClick = (state) => {
    console.log('clicked');
    console.log(state.target.id);
  };
  handleChange = state => {
    console.log('state', state.selectedRows);

    this.setState({ selectedRows: state.selectedRows });
  };
  render(){
  return (
    <Page title="Forms" breadcrumbs={[{ name: 'Forms', active: true }]}>
      <Row>
        <Col xl={7} lg={12} md={12}>
          <Card>
            <CardHeader>Input Types</CardHeader>
            <CardBody>
                <DataTable
                title="Created Form"

                data={this.state.viewdata}
                columns={columns(this.handleButtonClick)}
                onRowSelected={this.handleChange}
                selectableRows
                pagination
                dense
                />
            </CardBody>
          </Card>
        </Col>
      </Row>
    </Page>
  );
}
}
export default DTable;

In columns :

const columns = [{
    name: "Actions",
    button: true,
    cell: (row) => (
        <button
            className="btn btn-outline btn-xs"
            onClick={(e) => handleButtonClick(e, row.id)}
        >
            Edit
        </button>
    ),
}],

In Action Handle Function:

const handleButtonClick = (e, id) => {
    e.preventDefault();
    console.log("Row Id", id);
};

{/*start*/}{
  name: "Contact Number",
  selector: "phone",
  //   selector: (row: { createdAt: any; })=> row.createdAt,
  sortable: true,
},
{
  name: "Gender",
  selector: "gender",
  //   selector: (row: { createdAt: any; })=> row.createdAt,
  sortable: true,
},
{
    name:"Action",
  cell: (row: { _id: any }) => (
      <>
    <span onClick={() => handleButtonClick(row._id)} className='btn btn-primary'><Pencil/></span>{'     '}
    <span onClick={() => handleButtonClick(row._id)} className='btn btn-danger'><Trash/></span>
    </>
  ),
  
  ignoreRowClick: true,
  allowOverflow: true,
  button: true,
},{/*end*/}