Reader small image

You're reading from  Full Stack Development with Spring Boot 3 and React - Fourth Edition

Product typeBook
Published inOct 2023
PublisherPackt
ISBN-139781805122463
Edition4th Edition
Right arrow
Author (1)
Juha Hinkula
Juha Hinkula
author image
Juha Hinkula

Juha Hinkula is a software development lecturer at Haaga-Helia University of Applied Sciences in Finland. He received an MSc degree in Computer Science from the University of Helsinki and he has over 17 years of industry experience in software development. Over the past few years, he has focused on modern full stack development. He is also a passionate mobile developer with Android-native technology, and also uses React Native.
Read more about Juha Hinkula

Right arrow

Exporting the data to CSV

One feature that we will also implement is a comma-separated values (CSV) export of the data. We don’t need any extra libraries for the export because the MUI data grid provides this feature. We will activate the data grid toolbar, which contains a lot of nice features:

  1. Add the following import to the Carlist.tsx file. The GridToolbar component is a toolbar for the MUI data grid that contains nice functionalities, such as export:
    import { 
      DataGrid, 
      GridColDef, 
      GridCellParams,
      GridToolbar
    } from '@mui/x-data-grid';
    
  2. We need to enable our toolbar, which contains the Export button and other buttons. To enable the toolbar in the MUI data grid, you have to use the slots prop and set the value to toolbar: GridToolbar. The slots prop can be used to override the data grid’s internal components:
    return(
      <>
        <AddCar />
        <DataGrid
          rows={cars}
          columns={columns...
lock icon
The rest of the page is locked
Previous PageNext Page
You have been reading a chapter from
Full Stack Development with Spring Boot 3 and React - Fourth Edition
Published in: Oct 2023Publisher: PacktISBN-13: 9781805122463

Author (1)

author image
Juha Hinkula

Juha Hinkula is a software development lecturer at Haaga-Helia University of Applied Sciences in Finland. He received an MSc degree in Computer Science from the University of Helsinki and he has over 17 years of industry experience in software development. Over the past few years, he has focused on modern full stack development. He is also a passionate mobile developer with Android-native technology, and also uses React Native.
Read more about Juha Hinkula