follow-table

Follow Table

A flexible and feature-rich React table component with data stewardship capabilities.

Features

• 📊 Data Visualization - Built-in charts and statistics for column-level analysis
• 🔍 Advanced Filtering - Filter data by numerical range, categorical values, or date ranges
• 📋 Sortable Columns - Click column headers to sort data with visual indicators
• 📄 Pagination - Navigate through large datasets with customizable page sizes
• ✓ Row Selection - Select individual or all rows for batch operations
• 🔎 Data Inspection - View and edit row details in a modal interface
• 🔄 API Integration - Built-in support for API data fetching with fallback options
• 📱 Responsive Design - Adapts to different screen sizes with optimized layouts
• 🎨 Customizable Actions - Add custom action buttons to rows with full handler control
• 📤 CSV Export - Export table data to CSV format with server-side or client-side processing
• 📊 Statistics Side Panel - View detailed statistics for any column without disrupting the table view
• 🎯 Missing Data Indicators - Visual indicators for data completeness in each column

Installation

npm install follow-table
# or
yarn add follow-table

Usage

Basic Example

import { FollowTable } from 'follow-table';
import 'follow-table/dist/index.css'; // Import styles if needed

function MyComponent() {
  const columns = ['id', 'name', 'email', 'role'];
  const data = [
    { id: 1, name: 'John Doe', email: '[e-mail]', role: 'Admin' },
    { id: 2, name: 'Jane Smith', email: '[e-mail]', role: 'User' },
    // more data...
  ];

  return (
    <FollowTable
      columns={columns}
      data={data}
      idField="id"
    />
  );
}

With API Integration

import { FollowTable } from 'follow-table';

function ApiTable() {
  return (
    <FollowTable
      databaseId={1}
      tableName="users"
      idField="id"
      actions={['select', 'view', 'edit', 'delete', 'export']}
      actionHandlers={{
        onView: (id, rowData) => console.log(`Viewing row ${id}`, rowData),
        onEdit: (id) => console.log(`Editing row ${id}`),
        onDelete: (id) => console.log(`Deleting row ${id}`),
        onExport: (id) => console.log(`Exporting row ${id}`),
      }}
      layoutOptions={{
        maxHeight: '600px',
        stickyHeader: true,
        fullHeight: true
      }}
    />
  );
}

Props

Core Props

Prop	Type	Required	Default	Description
columns	string[]	No	[]	Array of column names to display. If not provided, will be extracted from data.
data	any[]	No	[]	Array of data objects. If not provided, data will be fetched from API.
idField	string	No	'rowid'	Field name to use as unique identifier. Defaults to 'rowid' for SQLite data.

API Integration Props

Prop	Type	Required	Default	Description
databaseId	string | number	No*	-	Database ID for API integration. Required if data is not provided.
tableName	string	No*	-	Table name for API integration. Required if data is not provided.
originalFileName	string	No	-	Original file name to display in the table header.

Action Props

Prop	Type	Required	Default	Description
actions	string[]	No	[]	Array of actions to enable. Options: 'select', 'view', 'edit', 'delete', 'export'.
actionHandlers	object	No	{}	Object of handler functions for actions. Supports: onView, onEdit, onDelete, onSelect, onExport.
onBulkDelete	function	No	-	Handler for bulk delete action. Receives array of selected row IDs.

Sorting Props

Prop	Type	Required	Default	Description
sortBy	string	No	''	Initial column to sort by.
order	'asc' | 'desc'	No	'asc'	Initial sort direction.
handleSort	function	No	-	Custom sort handler. Receives column name as parameter.

Pagination Props

Prop	Type	Required	Default	Description
page	number	No	1	Current page number.
totalPages	number	No	1	Total number of pages.
pageSize	number	No	20	Number of rows per page.
totalRows	number	No	0	Total number of rows across all pages.
handlePageChange	function	No	-	Custom page change handler. Receives page number as parameter.
handlePageSizeChange	function	No	-	Custom page size change handler. Receives event object.

Filtering Props

Prop	Type	Required	Default	Description
filters	object	No	{}	Column filters in format { columnName: filterValue }.
applyFilter	function	No	-	Custom filter application handler. Receives column name and filter value.
clearFilter	function	No	-	Custom filter clearing handler. Receives column name.

Layout Props

Prop	Type	Required	Default	Description
layoutOptions	object	No	{}	Layout configuration options.
layoutOptions.isStatsPanelOpen	boolean	No	false	Whether the stats panel is initially open.
layoutOptions.maxHeight	string | number	No	'calc(100% - 115px)'	Maximum height of the table body.
layoutOptions.stickyHeader	boolean	No	true	Whether the table header should stick to the top when scrolling.
layoutOptions.fullHeight	boolean	No	false	Whether the table should take full available height.
layoutOptions.minHeight	string | number	No	-	Minimum height of the table.
layoutOptions.responsiveBreakpoint	string	No	-	Custom breakpoint for responsive behavior.

Hooks

useTableData

Hook to fetch and manage table data.

import { useTableData } from 'follow-table';

function MyComponent() {
  const {
    tableData,
    setTableData,
    sortBy,
    setSortBy,
    order,
    setOrder,
    page,
    setPage,
    pageSize,
    setPageSize,
    totalRows,
    setTotalRows,
    totalPages,
    setTotalPages,
    fetchData,
  } = useTableData(
    initialData,        // optional: initial data array
    databaseId,         // optional: database ID
    tableName,          // optional: table name
    externalSortBy,     // optional: controlled sort column
    externalOrder,      // optional: controlled sort direction
    externalPage,       // optional: controlled page number
    externalPageSize,   // optional: controlled page size
    externalTotalRows,  // optional: controlled total rows count
    externalTotalPages, // optional: controlled total pages count
    filters             // optional: column filters
  );
  
  // rest of your component...
}

useRowSelection

Hook to manage row selection.

import { useRowSelection } from 'follow-table';

function MyComponent() {
  const {
    selectedRows,         // Set of selected row IDs
    setSelectedRows,      // Function to manually set selected rows
    onRowSelect,          // Function to toggle selection of a single row
    isAllSelected,        // Boolean indicating if all rows are selected
    onToggleSelectAll,    // Function to toggle selection of all rows
  } = useRowSelection(tableData, idField);
  
  // rest of your component...
}

Individual Components

The library also exports individual components that can be used separately:

import { 
  TableHeader, 
  TableBody, 
  TableControls, 
  ViewModal, 
  StatsSidePanel 
} from 'follow-table';

Utility Functions

import { exportToCSV } from 'follow-table';

// Export data to CSV
exportToCSV(
  data,               // Data array to export
  columns,            // Columns to include
  'filename.csv',     // Optional filename
  {                   // Optional configuration
    delimiter: ',',
    includeHeaders: true,
    dateFormat: 'short',
    processCell: (value, column) => value
  }
);

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

License

MIT