Welcome to our fifth and final installment in this series on visualizing data with Progress KendoReact! For our final article, I’ll demonstrate how to allow users to export tabular data from our web application. This technique allows for the application’s extensibility and allows users to create their own visualizations and interpretations from the data.
Previous installments:
- Part 1: How To Set Up A React NodeJS App With KendoReact For Data Visualization
- Part 2: How To Manage Multiple Data Visualizations In A React App Using KendoReact And React Hooks
- Part 3: How To Work With Complex JSON Data For Visualization With JavaScript
- Part 4: How to Use KendoReact to Create Bar Charts and Tables from the Same Data
The main idea behind this download will be to create a .xlsx file that looks like our TableView for any given region. The final exports should look something like this:
All Regions Data ExportImage may be NSFW.
Clik here to view.
North Region Data Export
Image may be NSFW.
Clik here to view.
Now I’ll show you how KendoReact makes exporting data from their React Grid component simple and easy.
Downloading Grid Data with KendoReact
We created a dummy “Download” button that didn’t save a file in our previous articles. The component looked like:
<img
src="download.svg"
alt="download"
onClick={() => {}}
/> Now we want that button to download a file to the user’s machine. To tell our application “what to download,” we’ll head over to the TableView component since the export should be a mirror image of that view.
And we’ll grab one important import from KendoReact:
import { ExcelExport } from "@progress/kendo-react-excel-export"; Think of this component as a decorator for any KendoReact Grid component. If the Grid component is wrapped in an ExcelExport component, we’ll have a reference for what the output file data should look like. Let’s change the returned value to look like this:
return (
<ExcelExport
data={gridData}
fileName={fileName}
ref={(exporter) => {
onDownload.current = exporter;
}}
>
<Grid data={gridData}>{headedColumns}</Grid>
</ExcelExport>
); And here’s my logic for creating the fileName. We want to strip out any spaces in the current region and replace them with underscores.
const fileName = `pizza_data_${region.replace(' ', '_')}.xlsx`; But what about that onDownload object we’re referencing? Where does that originate? The ExcelExport component needs a reference for an object to which it can attach its exporter logic. We need to create a reference object in Panel that is eventually mutated to contain the ExcelExport component’s “brains.”
This use case is perfect for React’s useRef hook! When we need a reference to an object (within the DOM like an HTML element, or just a simple object), we can use useRef to maintain a reference to that object and change the thing that is being referenced over time.
Note: This isn’t always best practice in a functional programming paradigm since you might be mutating data that should be a source of truth, but for this example, it’s A-OK.
Let’s add the following to our Panel component:
const onDownload = useRef(null); And pass it down to both SeriesViews that we created in the previous installment. We don’t need to change our ChartView component since we’re already just ignoring this prop. But now TableView will have to destructure onDownload from its props:
export const TableView = ({ ratings, region, means, onDownload }) => {
... And then, the final step will be to conditionally enable the actual “Export” button back in our Panel so that users can only trigger the export onTableViews.
<img
src="download.svg"
alt="download"
onClick={isChartView ? () => {} : () => onDownload.current.save()}
/> And that should be about it! We’ll know things are working when our download button has no effect when a ChartView is displayed but triggers a download whenever a TableView is displayed.
Since we laid out our ExcelExport to decorate each given TableView, we also get the added benefit of each download being specific to whatever table is being displayed by the application at the time of download.
Conclusion
That just about wraps up our Pizza-o-Matic app! Many many web applications revolve around the core principles that we discussed in this series.
Almost every single-page application will have some way to display different views on that single page, which we achieved through React conditional rendering and KendoReact’s layout components. Every data-driven application will have tools for manipulating that data and pulling out reformed components of the data to fit the application. Finally, any app will have different ways of projecting that data to the view so that a user can interact with data that is potentially updating over time.
We’ve been able to accomplish all of that in just a couple of files using React and KendoReact data visualization components. React gives us all of the essential tools to layout an application and work with data within the application. KendoReact’s UI components give us another layer of abstraction to make our lives easier when trying to visualize that data.
I hope this series has been helpful for anyone trying to visualize data within a web app. I look forward to the next time we’ll get to build something together!
Resources
The entire source code for this project is available at my GitHub account.
Full Series:
- Part 1: How To Set Up A React NodeJS App With KendoReact For Data Visualization
- Part 2: How To Manage Multiple Data Visualizations In A React App Using KendoReact And React Hooks
- Part 3: How To Work With Complex JSON Data For Visualization With JavaScript
- Part 4: How to Use KendoReact to Create Bar Charts and Tables from the Same Data
- Part 5: How to Export Tabular Data from a React App with KendoReact ExcelExport – Digital Primates
Final Product
Image may be NSFW.
Clik here to view.
The post How to Export Tabular Data from a React App with KendoReact ExcelExport appeared first on Digital Primates.