import { Fragment, useEffect } from 'react'; import { useFilters, useGlobalFilter, usePagination, useSortBy, useTable, } from 'react-table'; import { NomadEvent } from '@/react/nomad/types'; import { useDebounce } from '@/react/hooks/useDebounce'; import { PaginationControls } from '@@/PaginationControls'; import { Table, TableContainer, TableHeaderRow, TableRow, TableTitle, } from '@@/datatables'; import { multiple } from '@@/datatables/filter-types'; import { useTableSettings } from '@@/datatables/useTableSettings'; import { SearchBar, useSearchBarState } from '@@/datatables/SearchBar'; import { TableFooter } from '@@/datatables/TableFooter'; import { TableContent } from '@@/datatables/TableContent'; import { useColumns } from './columns'; export interface EventsDatatableProps { data: NomadEvent[]; isLoading: boolean; } export interface EventsTableSettings { autoRefreshRate: number; pageSize: number; sortBy: { id: string; desc: boolean }; } export function EventsDatatable({ data, isLoading }: EventsDatatableProps) { const { settings, setTableSettings } = useTableSettings(); const [searchBarValue, setSearchBarValue] = useSearchBarState('events'); const columns = useColumns(); const debouncedSearchValue = useDebounce(searchBarValue); const { getTableProps, getTableBodyProps, headerGroups, page, prepareRow, gotoPage, setPageSize, setGlobalFilter, state: { pageIndex, pageSize }, } = useTable( { defaultCanFilter: false, columns, data, filterTypes: { multiple }, initialState: { pageSize: settings.pageSize || 10, sortBy: [settings.sortBy], globalFilter: searchBarValue, }, }, useFilters, useGlobalFilter, useSortBy, usePagination ); useEffect(() => { setGlobalFilter(debouncedSearchValue); }, [debouncedSearchValue, setGlobalFilter]); const tableProps = getTableProps(); const tbodyProps = getTableBodyProps(); return ( {headerGroups.map((headerGroup) => { const { key, className, role, style } = headerGroup.getHeaderGroupProps(); return ( key={key} className={className} role={role} style={style} headers={headerGroup.headers} onSortChange={handleSortChange} /> ); })} ( cells={row.cells} key={key} className={className} role={role} style={style} /> )} />
gotoPage(p - 1)} totalCount={data.length} onPageLimitChange={handlePageSizeChange} />
); function handlePageSizeChange(pageSize: number) { setPageSize(pageSize); setTableSettings((settings) => ({ ...settings, pageSize })); } function handleSearchBarChange(value: string) { setSearchBarValue(value); } function handleSortChange(id: string, desc: boolean) { setTableSettings((settings) => ({ ...settings, sortBy: { id, desc }, })); } }