import { DataGrid, DataGridContainer } from '@/components/ui/data-grid';
import { DataGridPagination } from '@/components/ui/data-grid-pagination';
import { DataGridTableDnd } from '@/components/ui/data-grid-table-dnd';
import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
import { DragEndEvent } from '@dnd-kit/core';
import { arrayMove } from '@dnd-kit/sortable';
import { ColumnDef, PaginationState, SortingState, TableOptions, VisibilityState } from '@tanstack/react-table';
import Link from 'next/link';
import { useMemo, useState } from 'react';

interface IData {
	id: string;
	name: string;
	email: string;
	location: string;
	earnings: number;
}

const demoData: IData[] = [
	{
		id: '1',
		name: 'Kathryn Campbell',
		email: 'markrichardson@carrillo-reyes.net',
		location: 'Sarastad',
		earnings: 5143.03,
	},
	{
		id: '2',
		name: 'Robin Irwin',
		email: 'danielhowell@ramos.info',
		location: 'Port Jennifer',
		earnings: 1552.86,
	},
	{
		id: '3',
		name: 'Joseph Mcdonald',
		email: 'lguzman@yahoo.com',
		location: 'New Brianhaven',
		earnings: 5151.71,
	},
	{
		id: '4',
		name: 'Kevin Stewart',
		email: 'oross@chen.info',
		location: 'Lake Sarah',
		earnings: 9316.33,
	},
	{
		id: '5',
		name: 'Jason Payne',
		email: 'cvance@sims-proctor.com',
		location: 'Kevinfurt',
		earnings: 7280.57,
	},
	{
		id: '6',
		name: 'April Bishop',
		email: 'bwilliams@hotmail.com',
		location: 'East Matthewstad',
		earnings: 8534.92,
	},
	{
		id: '7',
		name: 'Melissa Ferguson',
		email: 'jturner@freeman-ellis.biz',
		location: 'South Crystalport',
		earnings: 1238.45,
	},
	{
		id: '8',
		name: 'Aaron Knight',
		email: 'rrodriguez@patterson-cohen.com',
		location: 'New Peterport',
		earnings: 4125.98,
	},
	{
		id: '9',
		name: 'Timothy Lee',
		email: 'pmartinez@gmail.com',
		location: 'Wendyfort',
		earnings: 6721.34,
	},
	{
		id: '10',
		name: 'Christina Ellis',
		email: 'sschmidt@hotmail.com',
		location: 'South Tiffanyside',
		earnings: 2849.67,
	},
	{
		id: '11',
		name: 'Stephen Walker',
		email: 'mwashington@torres.com',
		location: 'North Jennaton',
		earnings: 5947.12,
	},
	{
		id: '12',
		name: 'Amy Young',
		email: 'rbell@brown.net',
		location: 'Lake Jeremy',
		earnings: 8023.54,
	},
	{
		id: '13',
		name: 'Philip Russell',
		email: 'dpeterson@yahoo.com',
		location: 'Port Jessicaville',
		earnings: 1894.76,
	},
	{
		id: '14',
		name: 'Sara Reed',
		email: 'sbrown@hughes.com',
		location: 'West Michael',
		earnings: 9784.12,
	},
	{
		id: '15',
		name: 'Jackie Matthews',
		email: 'kmorris@smith.net',
		location: 'East Gregoryshire',
		earnings: 4632.91,
	},
	{
		id: '16',
		name: 'Nathan Edwards',
		email: 'jking@hill.biz',
		location: 'West Tammy',
		earnings: 3574.56,
	},
	{
		id: '17',
		name: 'Victoria Jenkins',
		email: 'tlee@williams.org',
		location: 'Lake Brianshire',
		earnings: 7123.89,
	},
	{
		id: '18',
		name: 'Alexandra Sanders',
		email: 'awilliams@hotmail.com',
		location: 'South Brandonville',
		earnings: 8967.32,
	},
	{
		id: '19',
		name: 'George Bell',
		email: 'tmurphy@yahoo.com',
		location: 'North Kyleton',
		earnings: 4832.14,
	},
	{
		id: '20',
		name: 'Nicole Patterson',
		email: 'jwilson@adams.com',
		location: 'Port Tony',
		earnings: 6745.29,
	},
];

export default function DataGridDemo() {
	const [pagination, setPagination] = useState<PaginationState>({
		pageIndex: 0,
		pageSize: 5,
	});
	const [sorting, setSorting] = useState<SortingState>([{ id: 'name', desc: true }]);
	const [columnVisibility, setColumnVisibility] = useState<VisibilityState>();
	const [pageCount, setPageCount] = useState(1);

	const handlePaginationChange = (newPagination: PaginationState) => {
		setPagination(newPagination);
	};

	const handleSortingChange = (newSorting: SortingState) => {
		setSorting(newSorting);
	};

	const columns = useMemo<ColumnDef<IData>[]>(
		() => [
			{
				accessorKey: 'name',
				id: 'name',
				header: 'Name',
				cell: (info) => <span className="font-medium">{info.getValue() as string}</span>,
				size: 175,
				meta: {
					headerClassName: '',
					cellClassName: '',
				},
			},
			{
				accessorKey: 'email',
				id: 'email',
				header: 'Email',
				cell: (info) => (
					<Link href={`mailto:${info.getValue()}`} className="hover:text-primary hover:underline">
						{info.getValue() as string}
					</Link>
				),
				size: 200,
				meta: {
					headerClassName: '',
					cellClassName: '',
				},
			},
			{
				accessorKey: 'location',
				id: 'location',
				header: 'Location',
				cell: (info) => <span>{info.getValue() as string}</span>,
				size: 125,
				meta: {
					headerClassName: '',
					cellClassName: '',
				},
			},
			{
				accessorKey: 'earnings',
				id: 'earnings',
				header: 'Earnings ($)',
				cell: (info) => <span className="text-success font-semibold">${(info.getValue() as number).toFixed(2)}</span>,
				size: 120,
				meta: {
					headerClassName: 'text-end',
					cellClassName: 'text-end',
				},
			},
		],
		[],
	);

	const [columnOrder, setColumnOrder] = useState<string[]>(columns.map((column) => column.id as string));

	const tableOptions: Partial<TableOptions<IData>> = {
		columns,
		data: demoData,
		getRowId: (row: any) => row.id,
		state: {
			pagination,
			sorting,
			columnOrder,
		},
		onColumnOrderChange: setColumnOrder,
		onPaginationChange: setPagination,
		onSortingChange: setSorting,
	};

	const handleDragEnd = (event: DragEndEvent) => {
		const { active, over } = event;
		if (active && over && active.id !== over.id) {
			setColumnOrder((columnOrder) => {
				const oldIndex = columnOrder.indexOf(active.id as string);
				const newIndex = columnOrder.indexOf(over.id as string);
				return arrayMove(columnOrder, oldIndex, newIndex);
			});
		}
	};

	return (
		<DataGrid tableOptions={tableOptions} recordCount={demoData?.length || 0} tableLayout={{ columnsDraggable: true }}>
			<div className="w-full space-y-2.5">
				<DataGridContainer>
					<ScrollArea>
						<DataGridTableDnd handleDragEnd={handleDragEnd} />
						<ScrollBar orientation="horizontal" />
					</ScrollArea>
				</DataGridContainer>
				<DataGridPagination />
			</div>
		</DataGrid>
	);
}
Data Grid

Examples

Default

Cell Border

Dense Table

Light

Stripped

Auto Width

Row Selection

Expandable Row

Column Icons

Sortable Columns

Movable Columns

Draggable Columns

Draggable Rows

Resizable Columns

Pinnable Columns

Sticky Header

Card Container

Column Controls

Column Visibility

Filters
