tanstack table
https://tanstack.com/table/latest/docs/framework/react/examples/filters
https://mockaroo.com/:random data generator
https://codesandbox.io/p/devbox/github/tanstack/table/tree/main/examples/react/filters?file=%2Fsrc%2Fmain.tsx&from-embed=
import React ,{useState}from 'react'
import Data from '../Data.json';
import { Box } from '@chakra-ui/react';
import { flexRender, getCoreRowModel, getPaginationRowModel,
getSortedRowModel, useReactTable,getFilteredRowModel } from '@tanstack/react-table';
const columns=[
{
accessorKey:"id",
header:"ID",
//cell:(props)=><p>{props.getValue()}</p>//this is used for formating...
},
{
accessorKey:"name",
header:"name",
//cell:(props)=><p>{props.getValue()}</p>
},
{
accessorKey:"username",
header:"username",
//cell:(props)=><p>{props.getValue()}</p>
},
{
accessorKey:"email",
header:"email",
// cell:(props)=><p>{props.getValue()}</p>
}
]
export default function Table() {
const [data,setData]=useState(Data);
const [sorting,setSorting]=useState([]);//for sorting
const [filter, setFilter] = useState('');//for filtering
const table=useReactTable({
data,
columns,
getCoreRowModel:getCoreRowModel(),//row will be seen
//for pagination:-
getPaginationRowModel:getPaginationRowModel(),
// for sorting
getSortedRowModel:getSortedRowModel(),
//for filtering
getFilteredRowModel:getFilteredRowModel(),
state:{
sorting:sorting,
globalFilter:filter//global filtering
},
onSortingChange:setSorting,
// onGlobalFilterChange:setFilter,
// columnResizeMode:"onChange"
});
console.log(table.getHeaderGroups());
return (
<div>
<input type="text" value={filter}
onChange={(e) => setFilter(e.target.value)}/>
<table>
<thead>
{table.getHeaderGroups().map(headerGroup => {
return (
<tr key={headerGroup.id}>
{headerGroup.headers.map(header => (
// map over the headerGroup headers array
<th key={header.id} colSpan={header.colSpan}
onClick={header.column.getToggleSortingHandler()}>
{/* {header.column.columnDef.header} */}
{flexRender(header.column.columnDef.header,header.getContext())}
{/* //soring */}
{{asc:"🔼",desc:'🔽'}[header.column.getIsSorted()??null]}
</th>
))}
</tr>
)
})}
</thead>
<tbody>
{table.getRowModel().rows.map(row => {
return (
<tr key={row.id}>
{row.getVisibleCells().map(cell => (
// map over the headerGroup headers array
<td key={cell.id} >
{flexRender(cell.column.columnDef.cell,cell.getContext())}
</td>
))}
</tr>
)
})}
</tbody>
{/* <Box>
{table.getHeaderGroups().map((headerGroup)=>{
<Box>
{headerGroup.headers.map((header)=><Box>
{
header.column.columnDef.header
}
</Box>)}
</Box>
})}
</Box> */}
</table>
<div>
<button onClick={()=>table.setPageIndex(0)}>firstpage</button>
<button disabled={!table.getCanPreviousPage()}
onClick={()=>table.previousPage()}>previous page</button>
<button disabled={!table.getCanNextPage()}
onClick={()=>table.lastPage()}>next page</button>
<button
onClick={()=>table.setPageIndex(table.getPageCount()-1)}>last page</button>
</div>
</div>
)
}
Comments
Post a Comment