title: Material table select row export
body: <p>I've got a react application that holds a material table filled with data, and I've been trying to allow users to select specific rows to export to a csv. I've also posted for clarification on this [link][1] to get more guidance. Here's what I've got with some sample data.</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  import &quot;../../App.css&quot;;
  import { forwardRef } from &quot;react&quot;;
  import Avatar from &quot;react-avatar&quot;;
  import Grid from &quot;@material-ui/core/Grid&quot;;
  import CsvBuilder from &quot;csv-builder&quot;;
  
  import MaterialTable from &quot;material-table&quot;;
  import AddBox from &quot;@material-ui/icons/AddBox&quot;;
  import ArrowDownward from &quot;@material-ui/icons/ArrowDownward&quot;;
  import Check from &quot;@material-ui/icons/Check&quot;;
  import ChevronLeft from &quot;@material-ui/icons/ChevronLeft&quot;;
  import ChevronRight from &quot;@material-ui/icons/ChevronRight&quot;;
  import Clear from &quot;@material-ui/icons/Clear&quot;;
  import DeleteOutline from &quot;@material-ui/icons/DeleteOutline&quot;;
  import Edit from &quot;@material-ui/icons/Edit&quot;;
  import FilterList from &quot;@material-ui/icons/FilterList&quot;;
  import FirstPage from &quot;@material-ui/icons/FirstPage&quot;;
  import LastPage from &quot;@material-ui/icons/LastPage&quot;;
  import Remove from &quot;@material-ui/icons/Remove&quot;;
  import SaveAlt from &quot;@material-ui/icons/SaveAlt&quot;;
  import Search from &quot;@material-ui/icons/Search&quot;;
  import ViewColumn from &quot;@material-ui/icons/ViewColumn&quot;;
  import axios from &quot;axios&quot;;
  
  const tableIcons = {
      Add: forwardRef((props, ref) =&gt; &lt;AddBox {...props} ref={ref} /&gt;),
      Check: forwardRef((props, ref) =&gt; &lt;Check {...props} ref={ref} /&gt;),
      Clear: forwardRef((props, ref) =&gt; &lt;Clear {...props} ref={ref} /&gt;),
      Delete: forwardRef((props, ref) =&gt; &lt;DeleteOutline {...props} ref={ref} /&gt;),
      DetailPanel: forwardRef((props, ref) =&gt; (
          &lt;ChevronRight {...props} ref={ref} /&gt;
      )),
      Edit: forwardRef((props, ref) =&gt; &lt;Edit {...props} ref={ref} /&gt;),
      Export: forwardRef((props, ref) =&gt; &lt;SaveAlt {...props} ref={ref} /&gt;),
      Filter: forwardRef((props, ref) =&gt; &lt;FilterList {...props} ref={ref} /&gt;),
      FirstPage: forwardRef((props, ref) =&gt; &lt;FirstPage {...props} ref={ref} /&gt;),
      LastPage: forwardRef((props, ref) =&gt; &lt;LastPage {...props} ref={ref} /&gt;),
      NextPage: forwardRef((props, ref) =&gt; &lt;ChevronRight {...props} ref={ref} /&gt;),
      PreviousPage: forwardRef((props, ref) =&gt; (
          &lt;ChevronLeft {...props} ref={ref} /&gt;
      )),
      ResetSearch: forwardRef((props, ref) =&gt; &lt;Clear {...props} ref={ref} /&gt;),
      Search: forwardRef((props, ref) =&gt; &lt;Search {...props} ref={ref} /&gt;),
      SortArrow: forwardRef((props, ref) =&gt; (
          &lt;ArrowDownward {...props} ref={ref} /&gt;
      )),
      ThirdStateCheck: forwardRef((props, ref) =&gt; (
          &lt;Remove {...props} ref={ref} /&gt;
      )),
      ViewColumn: forwardRef((props, ref) =&gt; &lt;ViewColumn {...props} ref={ref} /&gt;),
  };
  //api that the data is manipulated from
  const api = axios.create({
      baseURL: `https://reqres.in/api/users?page=2`,
  });
  
  function DisplayTableSanitized() {
      var COLUMNS = [
          {
              title: &quot;Icon&quot;,
              render: (rowData) =&gt; (
                  &lt;Avatar
                      maxInitials={1}
                      size={40}
                      round={true}
                      src={rowData.avatar}
                  /&gt;
              ),
          },
          { title: &quot;First Name&quot;, field: &quot;first_name&quot; },
          { title: &quot;Last Name&quot;, field: &quot;last_name&quot; },
          { title: &quot;Email&quot;, field: &quot;email&quot; },
      ];
  
      //table data
      const [data, setData] = useState([]);
      const [columns, setColumns] = useState(COLUMNS);
  
      useEffect(() =&gt; {
          api.get(&quot;&quot;)
              .then((res) =&gt; {
                  setData(res.data.data);
              })
              .catch((error) =&gt; {
                  console.log(&quot;Error&quot;);
                  console.log(error.data.data);
              });
      }, []);
  
      return (
          &lt;div className=&quot;DisplayTable&quot; style={{ marginTop: &quot;5vh&quot; }}&gt;
              &lt;Grid container spacing={1}&gt;
                  &lt;Grid item xs={1}&gt;&lt;/Grid&gt;
                  &lt;Grid item xs={10}&gt;
                      &lt;MaterialTable
                          title=&quot;TestDate_Table&quot;
                          columns={columns}
                          data={data}
                          icons={tableIcons}
                          options={{
                              selection: true,
                              exportButton: true,
                              emptyRowsWhenPaging: false,
                              pageSize: 5,
                              pageSizeOptions: [5, 10, 25, 50, 100, 200],
                              overflowX: &quot;hidden&quot;,
                              overflowY: &quot;auto&quot;,
                          }}
                          actions={[
                              {
                                  position: &quot;toolbarOnSelect&quot;,
                                  icon: SaveAlt,
                                  tooltip: &quot;Export the selected rows!&quot;,
                                  onClick: (e, rowData) =&gt; {
                                      const fileName = &quot;TestDate_Table&quot;;
                                      const builder = new CsvBuilder(
                                          fileName + &quot;.csv&quot;
                                      );
                                      builder
                                          .setColumns(
                                              columns.map(
                                                  (columnDef) =&gt; columnDef.title
                                              )
                                          )
                                          .addRows(
                                              rowData.map((rowData) =&gt;
                                                  columns.map(
                                                      (columnDef) =&gt;
                                                          rowData[columnDef.field]
                                                  )
                                              )
                                          )
                                          .exportFile();
                                  },
                              },
                          ]}
                      /&gt;
                  &lt;/Grid&gt;
                  &lt;Grid item xs={1}&gt;&lt;/Grid&gt;
              &lt;/Grid&gt;
          &lt;/div&gt;
      );
  }
  
  export default DisplayTableSanitized;
  </code></pre>
  <p>I'm thinking I might just be flat out wrong with the csvbuilder package I installed, and I'm not sure how I can fix this to allow users to select specific rows to export. I keep getting a <code>builder.setColumns is not a function</code> error when I try to export. Any assistance or guidance on this is much appreciated.
  [1]: <a href="https://github.com/mbrn/material-table/issues/2136" rel="nofollow noreferrer">https://github.com/mbrn/material-table/issues/2136</a></p>