vhad/react-table
1
0
Fork 0
mirror of https://github.com/gosticks/react-table.git synced 2025-10-16 11:55:36 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Update App.js

Browse Source
This commit is contained in:
tannerlinsley 2019-07-18 15:06:10 -06:00
parent c6d37e4834
commit 2a20ad3ba4
1 changed files with 41 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
examples/basic/src/App.js
View File

@ -33,9 +33,46 @@ const Styles = styled.div`
} }
` `
const data = makeData(20) function Table({ columns, data }) {
// Use the state and functions returned from useTable to build your UI
const { getTableProps, headerGroups, rows, prepareRow } = useTable(
{
columns,
data,
},
useColumns,
useRows
)
function Table() { // Render the UI for your table
return (
<table {...getTableProps()}>
<thead>
{headerGroups.map(headerGroup => (
<tr {...headerGroup.getRowProps()}>
{headerGroup.headers.map(column => (
<th {...column.getHeaderProps()}>{column.render('Header')}</th>
))}
</tr>
))}
</thead>
<tbody>
{rows.map(
(row, i) =>
prepareRow(row) || (
<tr {...row.getRowProps()}>
{row.cells.map(cell => {
return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
})}
</tr>
)
)}
</tbody>
</table>
)
}
function App() {
const columns = React.useMemo( const columns = React.useMemo(
() => [ () => [
{ {
@ -76,48 +113,11 @@ function Table() {
[] []
) )
// Use the state and functions returned from useTable to build your UI const data = React.useMemo(() => makeData(20), [])
const { getTableProps, headerGroups, rows, prepareRow } = useTable(
{
columns,
data,
},
useColumns,
useRows
)
// Render the UI for your table
return (
<table {...getTableProps()}>
<thead>
{headerGroups.map(headerGroup => (
<tr {...headerGroup.getRowProps()}>
{headerGroup.headers.map(column => (
<th {...column.getHeaderProps()}>{column.render('Header')}</th>
))}
</tr>
))}
</thead>
<tbody>
{rows.map(
(row, i) =>
prepareRow(row) || (
<tr {...row.getRowProps()}>
{row.cells.map(cell => {
return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
})}
</tr>
)
)}
</tbody>
</table>
)
}
function App() {
return ( return (
<Styles> <Styles>
<Table /> <Table columns={columns} data={data} />
</Styles> </Styles>
) )
} }