ResponsiveTable

Enterprise-Grade React Data Grid Component

ResponsiveTable is a high-performance, type-safe React component designed for complex data visualization. It provides seamless layout transitions between desktop-optimized tabular displays and mobile-optimized card views, ensuring data integrity and accessibility across all device form factors.

Core Capabilities

• Dynamic Layout Orchestration: Automated transformation between standard table structures and mobile-optimized interfaces based on configurable breakpoints.
• Extensible Architecture: A robust plugin system for implementing sorting, filtering, row selection, and asynchronous data fetching.
• Intelligent Layout Scaling: Automated recalculation of footer colSpan ranges to maintain structural alignment when columns are programmatically excluded.
• Performance Optimized: An atomized internal architecture that decouples state management from rendering, minimizing re-render cycles.
• Type Safety: Comprehensive TypeScript definitions for predictable implementation and robust development workflows.

Installation

npm install jattac.libs.web.responsive-table

Delightful Data Fetching: Smart Data Source

The new dataSource pattern makes handling large datasets, server-side sorting, and infinite scroll completely painless. You provide the fetch logic; we handle the bookkeeping.

Basic Usage

<ResponsiveTable
  dataSource={async ({ page, pageSize }) => {
    const users = await api.getUsers({ page, pageSize });
    return users; // Table automatically handles appending and hasMore detection!
  }}
  columnDefinitions={columns}
/>

With Sorting & Filtering

The table tells you exactly what it needs based on user interaction:

<ResponsiveTable
  dataSource={async ({ page, pageSize, sort, filter }) => {
    return await api.getUsers({
      page,
      limit: pageSize,
      sortBy: sort?.columnId,
      order: sort?.direction,
      search: filter
    });
  }}
  columnDefinitions={columns}
  sortProps={{ initialSortColumn: 'name' }}
  filterProps={{ showFilter: true }}
/>

Basic Implementation

The following example demonstrates a standard implementation of the ResponsiveTable component:

import React from 'react';
import ResponsiveTable from 'jattac.libs.web.responsive-table';

const data = [
  { id: 1, name: 'Administrative User' },
  { id: 2, name: 'Standard User' }
];

const columns = [
  { displayLabel: 'Identifier', cellRenderer: (row) => row.id },
  { displayLabel: 'User Name', cellRenderer: (row) => row.name },
];

const App = () => (
  <ResponsiveTable 
    data={data} 
    columnDefinitions={columns} 
  />
);

Handling Interactive Elements

When using the onRowClick prop, clicking any element within a row will trigger the callback. To prevent this when clicking buttons or other interactive elements, use the data-rt-ignore-row-click attribute.

const columns = [
  {
    displayLabel: 'Actions',
    cellRenderer: (row) => (
      <button 
        data-rt-ignore-row-click 
        onClick={() => handleDelete(row.id)}
      >
        Delete
      </button>
    )
  }
];

For a deep dive into more complex scenarios, see the Handling Interactive Elements Guide.

Documentation Directory

The following technical documentation provides comprehensive implementation guidance:

1. Technical Implementation Guide - Practical examples for core features, including infinite scroll and plugin integration.
2. Functional Capabilities - A high-level overview of the component's feature set.
3. API Reference - Technical specifications for props, interfaces, and type definitions.
4. Configuration Specification - Detailed guidance on performance tuning and UI customization.
5. Architecture and Contribution Guide - Internal system design and development environment setup.
6. Handling Interactive Elements - Guide on preventing row click bubbling for buttons and custom components.

Next Step: Review the Technical Implementation Guide