webdatarocks/pivot-react

Example of integrating the WebDataRocks web reporting tool with the React framework

Example of integrating WebDataRocks with the React framework

This repository contains sample ES6 and TypeScript projects that show how to integrate WebDataRocks with the React framework.

Prerequisites

For React + ES6 project:

• Node.js 6 or later

For React + TypeScript project:

• Node.js 8 through 16

Run the project

1. Download or clone this project from GitHub:
   • React + ES6 project:

   git clone https://github.com/WebDataRocks/pivot-react
   cd pivot-react/ES6

   • React + TypeScript project:

   git clone https://github.com/WebDataRocks/pivot-react
   cd pivot-react/typescript

2. Install npm packages:

npm install

3. Run the project:

npm start

You can access the project at http://localhost:3000/.

Related docs

For details on how to integrate WebDataRocks into existing React projects, check out the integration with React.

Support

Feel free to ask WebDataRocks-related questions on StackOverflow.

pivot-react's Issues

Table not updating when data is updated

I'm using the pivot table to show some data from the backend. I have implemented a filter function, which filters the data passed to my PivotTable component e.g., by year or name.

However, even though the props for PivotTable and the data state changes and triggers a re-rendering of the entire component, the browser still shows the entire data, not the filtered data. Only if the hot reloading is triggered, the table actually updates.

Here is my PivotTable component:

import React, { useState, useEffect } from 'react';
import { Pivot } from "@webdatarocks/react-webdatarocks";

const PivotTable = ({ tableData }) => {
  const [data, setData] = useState(tableData);

  useEffect(() => {
    setData(tableData);
  }, [tableData]);

  return (
    <div>
      <Pivot
        toolbar={false}
        report={data}
      />
    </div>
  )
}

export default PivotTable;

How to call download report.json file by click on a custom button?

getreports() method not working giving errors

Accessibility issues in Webdatarocks

1.For all wdr tabs(#wdr-tab-format ,#wdr-tab-options, #wdr-tab-fields, #wdr-tab-fullscreen ) -> List item does not have a <ul>, <ol> parent element."

2.For all wdr tab link text Element has insufficient color contrast of 3.54 (foreground color: #888888, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1.

3.For all .wdr-sheet-heade Element has insufficient color contrast of 2.52 (foreground color: #999999, background color: #f1f1f1, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1