Data Table

import {
	DataTable,
	DataTableBody,
	DataTableHead,
	DataTableHeader,
	DataTableHeaderSortButton,
	DataTableRows,
	EmptyDataTableRow,
	createColumnHelper,
	getCoreRowModel,
	getFilteredRowModel,
	getPaginationRowModel,
	getSortedRowModel,
	useReactTable,
} from "@ngrok/mantle/data-table";

function PaymentsExample() {
	const data = useMemo(() => examplePayments, []);

	const table = useReactTable({
		data,
		columns,
		getCoreRowModel: getCoreRowModel(),
		getPaginationRowModel: getPaginationRowModel(),
		getSortedRowModel: getSortedRowModel(),
		getFilteredRowModel: getFilteredRowModel(),
		initialState: {
			pagination: {
				pageSize: 100,
			},
		},
	});

	return (
		<DataTable table={table}>
			<DataTableHead />
			<DataTableBody>
				{table.getRowModel().rows.length > 0 ? (
					<DataTableRows />
				) : (
					<EmptyDataTableRow>
						<p className="flex items-center justify-center min-h-20">
							No results.
						</p>
					</EmptyDataTableRow>
				)}
			</DataTableBody>
		</DataTable>
	);
}