diff --git a/apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx b/apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx
new file mode 100644
index 000000000..8526d4712
--- /dev/null
+++ b/apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx
@@ -0,0 +1,169 @@
+'use client';
+
+import { useEffect, useMemo, useState, useTransition } from 'react';
+
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+import { ChevronDownIcon as CaretSortIcon, Loader } from 'lucide-react';
+
+import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import type { DataTableColumnDef } from '@documenso/ui/primitives/data-table';
+import { DataTable } from '@documenso/ui/primitives/data-table';
+import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
+import { Input } from '@documenso/ui/primitives/input';
+
+export type SigningVolume = {
+ id: number;
+ name: string;
+ signingVolume: number;
+ createdAt: Date;
+ planId: string;
+};
+
+type LeaderboardTableProps = {
+ signingVolume: SigningVolume[];
+ totalPages: number;
+ perPage: number;
+ page: number;
+ sortBy: 'name' | 'createdAt' | 'signingVolume';
+ sortOrder: 'asc' | 'desc';
+};
+
+export const LeaderboardTable = ({
+ signingVolume,
+ totalPages,
+ perPage,
+ page,
+ sortBy,
+ sortOrder,
+}: LeaderboardTableProps) => {
+ const { _, i18n } = useLingui();
+
+ const [isPending, startTransition] = useTransition();
+ const updateSearchParams = useUpdateSearchParams();
+ const [searchString, setSearchString] = useState('');
+ const debouncedSearchString = useDebouncedValue(searchString, 1000);
+
+ const columns = useMemo(() => {
+ return [
+ {
+ header: () => (
+ handleColumnSort('name')}
+ >
+ {_(msg`Name`)}
+
+
+ ),
+ accessorKey: 'name',
+ cell: ({ row }) => {
+ return (
+
+ );
+ },
+ size: 250,
+ },
+ {
+ header: () => (
+ handleColumnSort('signingVolume')}
+ >
+ {_(msg`Signing Volume`)}
+
+
+ ),
+ accessorKey: 'signingVolume',
+ cell: ({ row }) => {Number(row.getValue('signingVolume'))}
,
+ },
+ {
+ header: () => {
+ return (
+ handleColumnSort('createdAt')}
+ >
+ {_(msg`Created`)}
+
+
+ );
+ },
+ accessorKey: 'createdAt',
+ cell: ({ row }) => i18n.date(row.original.createdAt),
+ },
+ ] satisfies DataTableColumnDef[];
+ }, [sortOrder]);
+
+ useEffect(() => {
+ startTransition(() => {
+ updateSearchParams({
+ search: debouncedSearchString,
+ page: 1,
+ perPage,
+ sortBy,
+ sortOrder,
+ });
+ });
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [debouncedSearchString]);
+
+ const onPaginationChange = (page: number, perPage: number) => {
+ startTransition(() => {
+ updateSearchParams({
+ page,
+ perPage,
+ });
+ });
+ };
+
+ const handleChange = (e: React.ChangeEvent) => {
+ setSearchString(e.target.value);
+ };
+
+ const handleColumnSort = (column: 'name' | 'createdAt' | 'signingVolume') => {
+ startTransition(() => {
+ updateSearchParams({
+ sortBy: column,
+ sortOrder: sortOrder === 'asc' ? 'desc' : 'asc',
+ });
+ });
+ };
+
+ return (
+
+
+
+ {(table) => }
+
+
+ {isPending && (
+
+
+
+ )}
+
+
+ Signing Volume
+
+
+
+
+