Advanced Data Grid

Virtualized TanStack Table with search, filters, pagination, expandable rows, and CSV/PDF export

Preview

Advanced Data Grid

View live template →

Features

TanStack Table with linked sorting, filtering, search, and pagination
Virtualized scrolling that keeps 1,000+ rows smooth—even when rows expand
Expandable rows with nested usage breakdowns and activity timeline
Built-in search plus status, plan, and region filters
CSV and PDF exports that respect the current filters
Responsive: mobile cards and collapsed columns on smaller screens
Server-ready mode simulates API-backed pagination and sorting

Install Summary

This template kit includes the data grid page, supporting components, and all required dependencies. Download the bundle and extract it into your project root.

Page Files

File	Path
layout.tsx	app/templates/data-grid/layout.tsx
page.tsx	app/templates/data-grid/page.tsx

Component Files

File	Path
index.ts	components/templates/data-grid/index.ts
data-grid.tsx	components/templates/data-grid/data-grid.tsx
data-grid-toolbar.tsx	components/templates/data-grid/data-grid-toolbar.tsx
expanded-row.tsx	components/templates/data-grid/expanded-row.tsx
insights.tsx	components/templates/data-grid/insights.tsx
mock-data.ts	components/templates/data-grid/mock-data.ts
exporters.ts	components/templates/data-grid/exporters.ts
types.ts	components/templates/data-grid/types.ts

Dependencies

Install these dependencies before using the template:

Terminal

bash

npx shadcn@latest add button badge card select switch tooltip input skeleton progress

Terminal

bash

npm install @tanstack/react-table @tanstack/react-virtual jspdf @phosphor-icons/react

Installation

Download the complete template as a ZIP file, or copy the text bundle to your clipboard:

Page Files

The template includes the following page files:

1. layout.tsx

layout.tsx

tsx

export default function DataGridTemplateLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="min-h-screen bg-gradient-to-b from-background via-background to-muted/40">
      {children}
    </div>
  );
}

2. page.tsx

page.tsx

tsx

"use client";

import Link from "next/link";
import type { ReactNode } from "react";
import {

Template Components

The template includes the following component files:

1. index.ts

index.ts

tsx

"use client";

export { AdvancedDataGrid } from "./data-grid";
export { generateDataGridRows } from "./mock-data";
export type { DataGridRow, DataGridFilters, DataGridPlan, DataGridStatus } from "./types";

2. data-grid.tsx

data-grid.tsx

tsx

"use client";

import { Fragment, useMemo, useState } from "react";
import {
  flexRender,

3. data-grid-toolbar.tsx

data-grid-toolbar.tsx

tsx

"use client";

import { MagnifyingGlass, DownloadSimple, ArrowsClockwise, SlidersHorizontal, Rows as RowsIcon } from "@phosphor-icons/react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

4. expanded-row.tsx

expanded-row.tsx

tsx

"use client";

import { ArrowRight, Clock, GlobeHemisphereEast, ShieldCheck } from "@phosphor-icons/react";
import { Badge } from "@/components/ui/badge";
import { Progress } from "@/components/ui/progress";

5. insights.tsx

insights.tsx

tsx

"use client";

import { TrendUp, WarningCircle, Pulse, Broadcast } from "@phosphor-icons/react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { formatNumber, formatPrice } from "@/lib/format";

6. mock-data.ts

mock-data.ts

tsx

import type { DataGridPlan, DataGridRow, DataGridStatus, DataGridHealth } from "./types";

const companyPrefixes = [
  "Lumen",
  "Pulse",

7. exporters.ts

exporters.ts

tsx

"use client";

import type { DataGridRow } from "./types";

const EXPORT_COLUMNS: { key: keyof DataGridRow; label: string }[] = [

8. types.ts

types.ts

tsx

export type DataGridStatus = "active" | "trialing" | "past_due" | "churned";

export type DataGridPlan = "Free" | "Growth" | "Scale" | "Enterprise";

export type DataGridHealth = "healthy" | "watch" | "risk";

Getting Started

Step 1: Extract Files

After downloading and extracting the template ZIP:

Copy page files to app/templates/data-grid/
Copy component files to components/templates/data-grid/

Step 2: Install Dependencies

Install the required shadcn/ui components:

Terminal

bash

npx shadcn@latest add button badge card select switch tooltip input skeleton progress

Install external packages:

Terminal

bash

npm install @tanstack/react-table @tanstack/react-virtual jspdf @phosphor-icons/react

Step 3: Access Your Template

The template will be available at /templates/data-grid

What's Included

Virtualized grid powered by TanStack Table + React Virtual
Expandable rows with nested usage and activity timeline
Search, filters, and pagination that stay in sync
CSV/PDF exports that mirror the current view
Mobile-friendly cards with collapsed columns
Server-mode example for API-backed pagination