Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | 4x 4x 4x 4x 29x 29x 29x 29x 79x 85x 85x 251x 4x | /*
* Copyright 2021 Harness Inc. All rights reserved.
* Use of this source code is governed by the PolyForm Shield 1.0.0 license
* that can be found in the licenses directory at the root of this repository, also available at
* https://polyformproject.org/wp-content/uploads/2020/06/PolyForm-Shield-1.0.0.txt.
*/
import React from 'react'
import { useTable, Column } from 'react-table'
import css from './PerspectiveReportsAndBudgets.module.scss'
interface TableProps<T extends Record<string, any>> {
columns: Column<T>[]
data: T[]
className?: string
}
const Table = <T extends Record<string, any>>(props: TableProps<T>) => {
const { columns, data } = props
const { getTableProps, getTableBodyProps, headerGroups, prepareRow, rows } = useTable({ columns, data })
return (
<div className={css.tableCtn}>
<table {...getTableProps()}>
<thead>
{headerGroups.map(headerGroup => (
// eslint-disable-next-line react/jsx-key
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
// eslint-disable-next-line react/jsx-key
<th {...column.getHeaderProps()}>{column.render('Header')}</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map(row => {
prepareRow(row)
return (
// eslint-disable-next-line react/jsx-key
<tr {...row.getRowProps()}>
{row.cells.map(cell => {
// eslint-disable-next-line react/jsx-key
return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
})}
</tr>
)
})}
</tbody>
</table>
</div>
)
}
export default Table
|