How to get data from blueprintjs table

Question

I have created a blueprintjs table, and I want to be able to get it's data in JSON format. I do not want to get all the columns. Specific ones only and I only way them row by row. This is the format I am talking about:

{
     "Campaign": "5",
     "Date Sent": "5 days ago"
}

This is the way I have currently rendered my table. I have a button above that will call a javascript function that I wish to do this functionality. On the blueprintjs table documentation, I couldn't find anything related to actually parsing the table. I only found functions relating to just getting data such as # of rows etc.

render() {
    const { data } = this.props;
    const { length } = data;
    return (
      <Table
        numRows={length}
      >
        <Column name="Campaign" cellRenderer={this.renderCell} />
        <Column name="Date Sent" cellRenderer={this.renderCell} />
        <Column name="Queueing" cellRenderer={this.renderCell} />
        <Column name="Sent" cellRenderer={this.renderCell} />
        <Column name="Open" cellRenderer={this.renderCell} />
      </Table>
    );
  }
}

André Ricardo · Answer 1 · 2021-04-22T21:33:25.437

In Blueprint table documentation:

The table is data-agnostic. It doesn't store any data internally, so it is up to you to bind the table to your data.

So can get the data directly from the data that you pass as props.

For example to select some cells and get a "Copy" button see this demo: https://blueprintjs.com/docs/#table/features.sorting

There is also a getCellClipboardData in the table API that allows your users to do mod+c for copy/paste. The way it works is that you get row and column parameters and then just retrieve that data.

I've made an example for you if your data is a data[row][column], with mod+c copy/paste for selected cells and a button that "extracts" first and second column.

import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import "@blueprintjs/table/lib/css/table.css";
import { Button } from "@blueprintjs/core";
import { Cell, Column, Table } from "@blueprintjs/table";

export default function App() {
  const data = [
    [1, "2 days ago", 3],
    [4, "5 days ago", 6]
  ];

  const getCellData = (rowIndex: number, columnIndex: number) => {
    return data[rowIndex][columnIndex];
  };

  const cellRenderer = (rowIndex: number, columnIndex: number) => (
    <Cell>{`${data[rowIndex][columnIndex]}`}</Cell>
  );

  const columns = ["Campaign", "Date Sent", "Queueing"].map(
    (element: string, index: number) => {
      return <Column key={index} name={element} cellRenderer={cellRenderer} />;
    }
  );

  const extractData = () => {
    var results = [];
    for (var i = 0; i < data.length; i++) {
      var myData = {
        Campaign: data[i][0],
        "Date Sent": data[i][1]
      };
      results.push(myData);
    }

    var myJSON = JSON.stringify(results);
    alert(myJSON);
  };

  return (
    <>
      <Table numRows={data.length} getCellClipboardData={getCellData}>
        {columns}
      </Table>
      <Button onClick={extractData}>"Copy first and second column"</Button>
    </>
  );
}

https://codesandbox.io/s/frosty-wozniak-djk9d?file=/src/App.tsx

How to get data from blueprintjs table

1 Answers1