customize gridjs onclick on htmlheader column

Question

I am using gridjs. I want to have a select all checkbox instead of column name

how can I do that, I have written a following code for a grid. I am able to show the check box instead of the column name

but right now I want to call a react function on click of checkbox. where I want to make a functionality for select all and toggle.

import { Grid } from 'gridjs-react';
import { html } from 'gridjs';

import './resizable-table-component.css'

function ResizableTableComponent() {

  function myFunction(e){
    console.log(e)
  }

  return (
    <Grid
    columns={[
        {
          id: 'edit',
          name: 'Action',
          formatter: (cell, row) => {
            return html(`<button type="button" class="select-button">select</button>`);
          },
          attributes: (cell, row, column) => {
            return {
                className: "gridjs-td select-column",
                'onClick': ()=>{
                    console.log('select button clicked')
                }
            }
          },
          width: '80px',
          sort: false,
        },
        {
            id: 'name',
            name: html(`<input type="checkbox"/>`),
        },
        'Age',
        'Country',
      ]}
      sort={true}
      search={true}
      data={[
        ['John Smith', 34, 'USA'],
        ['Alice Brown', 27, 'Canada'],
        ['Bob Johnson', 41, 'Australia'],
        ['Mary Lee', 22, 'China'],
        ['David Lee', 57, 'USA'],
        ['Sara Johnson', 39, 'Canada'],
        ['Mike Davis', 25, 'Australia'],
        ['Grace Wang', 32, 'China']
      ]}
      style={{
        table: {
          width: '100%'
        }
      }}
      resizable={true}
      width={'auto'}
      height={400}
      pagination={{
        enabled: true,
        limit: 5,
        summary: true
      }}
    />
  );
}

export default ResizableTableComponent;