Untitled
unknown
javascript
2 years ago
1.5 kB
5
Indexable
import React, { useEffect } from 'react'; import { useTable } from 'react-table'; const EasyEditorReportTable = () => { const data = []; // Add your data here const columns = []; // Add your column definitions here const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({ columns, data }); useEffect(() => { // Cleanup when component unmounts return () => { // Destroy the DataTable instance // Add your cleanup logic here }; }, []); return ( <div> <div className="tableTitle"> <b> Easy Editor Summary Report: <i>{/* Add your header name here */}</i> </b> </div> <table {...getTableProps()} className="table"> <thead> {headerGroups.map(headerGroup => ( <tr {...headerGroup.getHeaderGroupProps()}> {headerGroup.headers.map(column => ( <th {...column.getHeaderProps()}>{column.render('Header')}</th> ))} </tr> ))} </thead> <tbody {...getTableBodyProps()}> {rows.map(row => { prepareRow(row); return ( <tr {...row.getRowProps()}> {row.cells.map(cell => ( <td {...cell.getCellProps()}>{cell.render('Cell')}</td> ))} </tr> ); })} </tbody> </table> </div> ); }; export default EasyEditorReportTable;
Editor is loading...