Untitled
unknown
plain_text
2 years ago
1.8 kB
9
Indexable
// table.js import React, { useState, useEffect } from "react"; import GridTable from "@nadavshaar/react-grid-table"; import getColumns from "./getColumns.js"; import "./tablestyles.css"; const PageSize = ({ tableManager, value = tableManager.paginationApi.pageSize, onChange = tableManager.paginationApi.setPageSize, options = tableManager.config.pageSizes, }) => { const { config: { texts: { rowsPerPage: rowsPerPageText }, additionalProps: { pageSize: additionalProps = {} }, }, } = tableManager; let classNames = ( "rgt-footer-page-size " + (additionalProps.className || "") ).trim(); return ( <div className={classNames}> <div> {rowsPerPageText}: <select value={value} onChange={(e) => onChange(e.target.value)}> {options.map((option) => ( <option key={option} value={option}> {option} </option> ))} </select> </div> </div> ); }; const SyncTable = ({ data }) => { const [rowsData, setRowsData] = useState([]); const [isLoading, setLoading] = useState(false); useEffect(() => { if (data && data.length > 0) { setRowsData(data); setLoading(false); } }, [data]); return ( <div className="App"> <GridTable columns={getColumns({ setRowsData })} rows={rowsData} pageSize={10} pageSizes={[5, 10, 20]} isLoading={isLoading} onRowClick={({ rowIndex, data, column, isEdit, event }, tableManager) => !isEdit && tableManager.rowSelectionApi.getIsRowSelectable(data.id) && tableManager.rowSelectionApi.toggleRowSelection(data.id) } components={{ PageSize }} /> </div> ); }; export default SyncTable;
Editor is loading...