Responsive Transaction Table

A responsive table component for displaying transaction data, built with Next.js and TanStack Table.

Features

• ✅ Responsive table with modern design
• ✅ Sorting capability on all columns
• ✅ Transaction status with color indicators
• ✅ Optimized for mobile and desktop viewports
• ✅ Truncated text with tooltip for long data
• ✅ Fully TypeScript

Demo

Installation

npm install responsive-transaction-table
# or
yarn add responsive-transaction-table
# or
pnpm add responsive-transaction-table

Usage with Styles

Important: Import the CSS style along with the component to ensure correct appearance:

// Import the style first
import 'responsive-transaction-table/dist/styles.css';

// Then import the component
import { DataTable } from 'responsive-transaction-table';
import type { Transaction } from 'responsive-transaction-table';

Usage Example

import { DataTable } from 'responsive-transaction-table';
import type { Transaction } from 'responsive-transaction-table';

// Your transaction data
const transactions: Transaction[] = [
  {
    hash: '0x8a7d953f45ba6d3f17ab0f22a0c591646d138e226f7ec843d4577486d1ff83fc',
    method: 'Transfer',
    block: 15481394,
    age: '2 mins ago',
    from: '0x6b75d8AF000000e20B7a7DDf000Ba900b4009A80',
    to: '0x388C818CA8B9251b393131C08a736A67ccB19297',
    value: '0.5 ETH',
    txnFee: '0.002 ETH',
    status: 'Success'
  },
  // ... more transaction data
];

export default function TransactionPage() {
  return (
    <div>
      <h1>Transaction Explorer</h1>
      <DataTable data={transactions} />
    </div>
  );
}

Props

| Prop | Type | Default | Description | |----------|-----------------|----------|------------------------------------| | data | Transaction[] | required | Array containing transaction data | | loading | boolean | false | Flag to show loading status |

Type Definitions

export interface Transaction {
  hash: string;
  method: string;
  block: number;
  age: string;
  from: string;
  to: string;
  value: string;
  txnFee: string;
  status: 'Success' | 'Failed' | 'Pending';
}

Development

# Clone the repository
git clone https://github.com/yourusername/responsive-transaction-table.git

# Install dependencies
cd responsive-transaction-table
npm install

# Run development server
npm run dev

# Build the library
npm run build:lib
npm run build:css

License

MIT