DEV Community: Abhirup Pal

TanStack Table v8: Complete Semantic Data Grid Demo

Abhirup Pal — Sat, 19 Jul 2025 12:56:27 +0000

TanStack Table v8 is a game-changer for data grids in React, but its headless architecture often leaves developers piecing together a complex puzzle. If you've struggled with bridging the gap between isolated examples and a fully-featured table, this demo is for you.

Common Developer Frustrations:

Siloed Examples: Official docs show features in isolation, leaving you to figure out the integration.

The Integration Maze: How do you make sorting, global filtering, column filtering, and pagination work together seamlessly?

The Performance Cliff: Tables that are fast with 100 rows but grind to a halt with 10,000.

The Feature Treadmill: Re-implementing critical UI patterns like column management and inline editing from scratch.

This project provides the comprehensive, production-ready implementation you've been missing. It's a single, harmonious example that demonstrates how to build a high-performance, feature-rich data table, showcasing:

Unified State Management: All features (sorting, filtering, etc.) working in concert.

High-Performance Virtualization: Effortlessly rendering thousands of rows using @tanstack/react-virtual.

Intuitive Inline Editing: A smooth, click-to-edit user experience.

Advanced Column Controls: Resizing, reordering, and visibility management.

Stop wrestling with integration and start building powerful, scalable data tables today.

🚀 Core Features

Data Management

Column Sorting - Multi-column sorting with visual indicators
Advanced Filtering - Per-column filters with various input types
Inline Editing - Seamless cell-level editing with validation
Data Virtualization - Smooth scrolling through massive datasets

UI/UX Enhancements

Column Pinning - Freeze important columns (left/right)
Column Resizing - Interactive width adjustment with drag handles
Column Reordering - Drag-and-drop column repositioning
Responsive Design - Adapts gracefully to different screen sizes

🛠 Technical Implementation

Architecture Decisions

Headless + Custom UI: Leverages TanStack Table's headless approach while building a polished, accessible interface.

// Clean column definition with helper
const columnHelper = createColumnHelper<DataType>();

const columns = [
  columnHelper.accessor('name', {
    header: 'Name',
    cell: EditableCell,
    meta: { filterType: 'text' }
  }),
  // ... more columns
];

Performance-First Virtualization: Uses @tanstack/virtual for optimal rendering performance.

const rowVirtualizer = useVirtual({
  size: table.getRowModel().rows.length,
  parentRef: tableContainerRef,
  estimateSize: useCallback(() => 50, []),
  overscan: 10
});

Type-Safe Implementation: Full TypeScript support with proper type inference.

interface TableData {
  id: string;
  name: string;
  status: 'active' | 'inactive';
  // ... other fields
}

// Type-safe column definitions and data handling

Key Technical Features

Smart State Management: Efficiently manages table state including sorting, filtering, and column configurations without unnecessary re-renders.

Optimized Rendering: Virtual scrolling handles datasets of any size while maintaining smooth 60fps scrolling.

Flexible Cell Rendering: Supports various cell types (text, select, date, custom components) with consistent editing patterns.

📈 Performance Benchmarks

10,000 rows: Smooth scrolling, <100ms filter response
50+ columns: No lag in column operations (resize, reorder, pin)
Memory efficient: Virtual rendering keeps DOM nodes minimal
Bundle size: Optimized imports, tree-shaking friendly

⭐ Found this helpful? Star the repository and share it with your team!
https://github.com/Abhirup-99/tanstack-demo
Checkout the deployed preview at: https://abhirup-99.github.io/tanstack-demo/

Building a Modern React Library Starter: A Comprehensive Guide

Abhirup Pal — Sat, 09 Nov 2024 08:27:17 +0000

Introduction

Creating a modern React library requires careful consideration of build tools, development experience, and output optimization. This guide will walk you through building a professional React library starter using TypeScript, SWC, and Rollup—a powerful combination that offers superior performance, reliability, and developer experience.

Why These Tools Matter

TypeScript: Type Safety and Developer Experience

Static Type Checking: Catch errors during development rather than runtime
Enhanced IDE Support: Better autocomplete, refactoring, and code navigation
Self-Documenting Code: Types serve as living documentation
Improved Maintenance: Makes large codebases more manageable
Growing Community: Extensive type definitions for popular libraries

SWC: Next-Generation Compilation

Rust-Powered Performance: Up to 20x faster than Babel
Drop-in Replacement: Compatible with existing Babel configurations
Low Memory Footprint: More efficient resource utilization
Native TypeScript Support: Direct compilation without intermediate steps
Active Development: Regular updates and improvements

Rollup: Optimized Library Bundling

Tree Shaking: Advanced dead code elimination
Multiple Output Formats: ESM, CommonJS, and UMD support
Smaller Bundle Size: No unnecessary runtime code
Plugin Ecosystem: Rich set of official and community plugins
Code Splitting: Efficient chunk management

Project Setup Guide

1. Initialize Project Structure

mkdir react-library
cd react-library
npm init -y

# Create essential directories
mkdir src

2. Install Dependencies

# Core dependencies
npm install react react-dom --save-peer

# Development dependencies
npm install --save-dev typescript @types/react @types/react-dom \
  @swc/core @swc/helpers \
  rollup @rollup/plugin-swc @rollup/plugin-node-resolve \
  @rollup/plugin-commonjs rollup-plugin-peer-deps-external

3. TypeScript Configuration

Create tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2018",
    "module": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "declaration": true,
    "declarationDir": "dist/types",
    "emitDeclarationOnly": true,
    "jsx": "react-jsx",
    "strict": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

4. Rollup Configuration

Create rollup.config.js:

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { swc, defineRollupSwcOption } from '@rollup/plugin-swc';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import terser from '@rollup/plugin-terser';

const packageJson = require('./package.json');

const swcConfig = defineRollupSwcOption({
  jsc: {
    parser: {
      syntax: 'typescript',
      tsx: true,
    },
    transform: {
      react: {
        runtime: 'automatic',
        development: false,
        refresh: false,
      },
    },
    target: 'es2018',
  },
  minify: false,
});

export default [
  // ESM build
  {
    input: 'src/index.tsx',
    output: [
      {
        file: packageJson.module,
        format: 'esm',
        sourcemap: true,
      },
    ],
    plugins: [
      peerDepsExternal(),
      resolve({
        extensions: ['.ts', '.tsx', '.js', '.jsx'],
      }),
      commonjs(),
      swc(swcConfig),
      terser(),
    ],
    external: ['react', 'react-dom'],
  },
  // CommonJS build
  {
    input: 'src/index.tsx',
    output: [
      {
        file: packageJson.main,
        format: 'cjs',
        sourcemap: true,
        exports: 'auto',
      },
    ],
    plugins: [
      peerDepsExternal(),
      resolve({
        extensions: ['.ts', '.tsx', '.js', '.jsx'],
      }),
      commonjs(),
      swc(swcConfig),
      terser(),
    ],
    external: ['react', 'react-dom'],
  },
];

5. Package.json Configuration

Update your package.json:

{
  "name": "your-library-name",
  "version": "1.0.0",
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",
  "types": "dist/types/index.d.ts",
  "files": [
    "dist"
  ],
  "sideEffects": false,
  "scripts": {
    "build": "rollup -c",
    "types": "tsc",
    "prepare": "npm run types && npm run build",
    "lint": "eslint ."
  },
  "peerDependencies": {
    "react": ">=17.0.0 <19.0.0",
    "react-dom": ">=17.0.0 <19.0.0"
  },
}

Writing Library Code

Component Example

Create src/index.tsx:

import React from "react";

export interface HelloProps {
  name: string;
}

export default function Hello({ name }: HelloProps) {
  return <div>Hello {name}!</div>;
}

Best Practices

1. Development Workflow

Use Git hooks (husky) for pre-commit linting and testing
Implement semantic versioning
Set up continuous integration/deployment

2. Documentation

Include detailed README.md
Provide usage examples
Document peer dependencies

3. Performance

Keep bundle size minimal
Implement tree-shaking friendly exports
Avoid runtime dependencies when possible

Publishing

Update version in package.json
Build the library: npm run build
Test the build: npm pack
Publish: npm publish

Add working example

Setup a vite app for providing example, and testing code changes in the repo itself. This can also be done with a storybook.

npm create vite@latest example -- --template react-ts

add your package in the dependencies section of the example package.json

"react-library-starter": "file:../"

Import your component and test it in the example project.

Your React library is now ready for publishing! 🎉

If you’d like to dive in with a ready-to-use setup, check out the complete starter template here: https://github.com/Abhirup-99/react-library-starter-template. This template includes everything we’ve covered and is designed to help you kickstart your React library development with minimal setup.

Happy coding!

Compressing videos to webm in the browser

Abhirup Pal — Sat, 05 Oct 2024 17:44:33 +0000

🚀 Supercharge Your Web Videos: MP4 to WebM Compression with React

Ever bored with nothing interesting at work? Well, that’s when I decided to scratch my itch to tinker around with the current state of browser APIs. Could we compress videos directly through web APIs? In this blog, I’ll show you how to use modern browser features to compress MP4 videos to WebM format—all within a React app.

🛠️ What You'll Need

Before we dive in, make sure you've got:

React with Typescript
Ant Design to build some nice UI.

Quick setup:

npm install antd

Setting up the component

Let's set up our React component with all the React imports:

import { useState, useRef, useEffect, ChangeEvent } from "react";
import { Button, Progress, message, Flex } from "antd";

const VideoCompression = () => {
  const [sourceVideo, setSourceVideo] = useState<File | null>(null);
  const [compressedVideo, setCompressedVideo] = useState<Blob | null>(null);
  const [isCompressing, setIsCompressing] = useState(false);
  const [progress, setProgress] = useState(0);
  const [width, setWidth] = useState<string>("");
  const [height, setHeight] = useState<string>("");
  const videoRef = useRef<HTMLVideoElement>(null);
  const inputRef = useRef<HTMLInputElement>(null);

Accepting the File Upload

We need a way to choose our MP4 file:

const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
  if (!event.target.files) return;
  const file = event.target.files[0];
  if (file && file.type.startsWith("video/")) {
    setSourceVideo(file);
    setCompressedVideo(null);
  } else {
    message.error("Please select a valid video file.");
  }
};

Extracting Video Metadata

Let's get the video metadata:

useEffect(() => {
  if (sourceVideo) {
    const video = document.createElement("video");
    video.onloadedmetadata = () => {
      setWidth(video.videoWidth.toString());
      setHeight(video.videoHeight.toString());
    };
    video.src = URL.createObjectURL(sourceVideo);
  }
}, [sourceVideo]);

Video Compression

Here's where the magic happens:


  const compressVideo = async () => {
    if (!sourceVideo) {
      message.error("Please upload a video first.");
      return;
    }
    setIsCompressing(true);
    setProgress(0);
    try {
      const stream = videoRef.current?.captureStream();
      const mediaRecorder = new MediaRecorder(stream, {
        mimeType: "video/webm",
        videoBitsPerSecond: 1000000,
      });
      const chunks: BlobPart[] = [];
      mediaRecorder.ondataavailable = (event) => {
        if (event.data.size > 0) {
          chunks.push(event.data);
        }
      };
      mediaRecorder.onstop = () => {
        const blob = new Blob(chunks, { type: "video/webm" });
        setCompressedVideo(blob);
        setIsCompressing(false);
        setProgress(100);
      };
      if (!videoRef.current) return;
      videoRef.current.onloadedmetadata = () => {
        videoRef.current!.muted = true;
        videoRef.current?.play();
        mediaRecorder.start();
      };
      videoRef.current.onended = () => {
        mediaRecorder.stop();
        videoRef.current?.pause();
      };
      videoRef.current.ontimeupdate = () => {
        if (!videoRef.current) return;
        const progress =
          (videoRef.current.currentTime / videoRef.current.duration) * 100;
        setProgress(progress);
      };
      if (!videoRef.current) return;
      videoRef.current.width = Number.parseFloat(width);
      videoRef.current.height = Number.parseFloat(height);
      videoRef.current.src = URL.createObjectURL(sourceVideo);
    } catch (err) {
      message.error("Error compressing video: " + (err as Error).message);
      setIsCompressing(false);
    }
  };

Downloading the Compressed Video

const downloadCompressedVideo = () => {
  if (compressedVideo) {
    const url = URL.createObjectURL(compressedVideo);
    const a = document.createElement("a");
    a.href = url;
    a.download = "compressed_video.webm";
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  }
};

🚀 Launch Time: Putting It All Together

Here's a sneak peek of our complete work:

Deployment Link:
https://abhirup-99.github.io/browser-compression-webm/

Code Link:
https://github.com/Abhirup-99/browser-compression-webm

🎉 Wrap-up: You're Now a Video Compression Wizard!

Congratulations! You've just built a powerful MP4 to WebM video compressor using React. Your web videos will now load faster than ever, delighting users and boosting your site's performance.

🚀 Next Steps:

I will be tinkering with the browser compression APIs further and hopefully there will be an blog out soon.