How to extract data of cell clicked grid.js

Question

I am using Grid.js to render a table in react. I need to extract the data in one of the cells. When I map the args, I get two results back....a MouseEvent and 'n' which contains the data that I need. How do I extract the data out of the 'n' result? Below is an image of what I receive from my current code which is below the picture.

import React, { useState, useEffect, useRef, Fragment } from 'react';
import axios from 'axios';
import { API } from '../../config';
import Layout from '../../components/Layout';
import { Grid, html, h } from 'gridjs';
import 'gridjs/dist/theme/mermaid.css';

const PendingUser = () => {
  const [pendingUser, setPendingUser] = useState({});

  const wrappedRef = useRef(null);

  useEffect(() => {
    getPendingUsers();
    setPendingUser(pendingUser);
    grid.render(wrappedRef.current);
  }, []);

  const getPendingUsers = async () => {
    const { data } = await axios.get(`${API}/admin/pendinguser`);
    await data.filter(user => {
      user.accountApproved ? setPendingUser(user) : setPendingUser();
    });
  };

  const handleClick = e => {
    e.preventDefault();
    const buttonValue = e.target.value;
    console.log(buttonValue);
    grid.on('rowClick', (...args) =>
      args.map(data => {
        console.log(data);
      })
    );
  };

  const grid = new Grid({
    search: true,
    columns: [
      {
        name: 'ID',
        hidden: true
      },
      {
        name: 'First Name'
      },
      {
        name: 'Last Name'
      },
      {
        name: 'Email'
      },
      {
        name: 'Agency'
      },
      {
        name: 'Approve',
        formatter: (cell, row) => {
          return h(
            'button',
            {
              style: 'cursor: pointer',
              className: 'py-2 mb-2 px-2 border rounded text-white bg-success',
              value: 'approve',
              onClick: e => handleClick(e, 'value')
            },
            'Approve'
          );
        }
      },
      {
        name: 'Deny',
        formatter: (cell, row) => {
          return h(
            'button',
            {
              styel: 'cursor: pointer',
              className: 'py-2 mb-2 px-2 border rounded text-white bg-danger',
              value: 'deny',
              onClick: e => handleClick(e, 'value')
            },
            'Deny'
          );
        }
      },
      {
        name: 'Denied Reason',
        formatter: (_, row) =>
          html(
            '<select>' +
              '<center><option value="Non Law Enforcement">Non Law Enforcement</option><option value="Non Law Enforcement">Non US Law Enforcement</option></center>' +
              '</select>'
          )
      }
    ],
    server: {
      url: `${API}/admin/pendinguser`,
      method: 'GET',
      then: data =>
        data.map(user => [
          user._id,
          user.firstName,
          user.lastName,
          user.email,
          user.leAgency
        ])
    }
  });

  return (
    <Layout>
      <div ref={wrappedRef} />
    </Layout>
  );
};

export default PendingUser;

here is what the 'n' data looks like and I have circled what I want to extract.

Answer 1

columns: [{ name: 'Name',
attributes: (cell) => {
// add these attributes to the td elements only
if (cell) {
return {
'data-cell-content':cell,
'onclick': () => alert(cell)
};
}
}},

This worked for me bro.