DataTables in react

 import {React,useState} from "react";

import 'bootstrap/dist/css/bootstrap.min.css'

import DataTable from 'datatables.net-react';

import DT from 'datatables.net-dt';

import 'datatables.net-responsive-dt';

import 'datatables.net-select-dt';

import 'datatables.net-buttons/js/buttons.html5';

import './App.css';

import jszip from 'jszip';

import pdfmake from 'pdfmake';

DataTable.use(DT);

DT.Buttons.jszip(jszip);

DT.Buttons.pdfMake(pdfmake);

function App() {

  const [tableData, setTableData] = useState([

    [ 'Tiger Nixon', 'System Architect' ],

    [ 'Garrett Winters', 'Accountant' ],

    // ...

  ]);

 

  return (

    <div className="card">

        <DataTable data={tableData} className="display"

          options={{

            layout: {

              topStart: 'buttons',

            },

            select: true,

          }}>

            <thead>

                <tr>

                    <th>Name</th>

                    <th>Position</th>

                </tr>

            </thead>

        </DataTable>

      </div>

    );

}

export default App

app.css

@import 'datatables.net-dt';

@import 'datatables.net-buttons-dt';

@import 'datatables.net-select-dt';

#root {

  max-width: 1280px;

  margin: 0 auto;

  padding: 2rem;

}

references: https://stackblitz.com/edit/datatables-net-react-buttons?file=src%2FApp.tsx,src%2FApp.css&terminal=dev

https://stackblitz.com/edit/datatables-net-react-extensions?file=src%2FApp.tsx,src%2FApp.css&terminal=dev