Skip to content

Pending Review

Pending Review from User Experience (UX)

Table Component

Overview

The PWC Table is a comprehensive data grid component in the Progress Web Components design system. It provides flexible column configurations, responsive layouts, and rich data display capabilities with sorting, filtering, and interactive features across React and Angular applications.

Core Capabilities

  • Flexible Column Types - Support for string, boolean, status, icon, switch, and tool columns with custom rendering
  • Responsive Design - Adaptive column visibility based on screen size with configurable breakpoints
  • Interactive Features - Built-in support for switches, action buttons, and overflow menus for row operations
  • Dynamic Sizing - Flexible column widths with min/max constraints and flex-based responsive layouts
  • Empty State Handling - Customizable placeholder content for empty tables and loading states
  • Accessibility Support - Full keyboard navigation, screen reader support, and semantic table markup

When to use Table:

  • Display structured data with multiple columns and rows requiring detailed information layout
  • Present datasets that need sorting, filtering, or interactive operations on individual rows
  • Show tabular data with mixed content types like status indicators, actions, and formatted text
  • Create data grids where users need to compare information across multiple data points

When not to use Table:

  • Simple lists that don't require column-based layout (use list components instead)
  • Card-based data displays where individual items need more visual prominence
  • Mobile-first interfaces where vertical scrolling is preferred over horizontal table navigation

Basic Implementation

import React, { useState } from 'react';
import { PwcTable } from "@progress-i360/pwc-react";

function MyComponent() {
  const [users] = useState([
    { id: 1, name: 'John Doe', email: 'john@example.com', status: 'active', isAdmin: true },
    { id: 2, name: 'Jane Smith', email: 'jane@example.com', status: 'inactive', isAdmin: false },
    { id: 3, name: 'Bob Johnson', email: 'bob@example.com', status: 'pending', isAdmin: false }
  ]);

  const columns = [
    { type: 'string', field: 'name', label: 'Name', flex: 2 },
    { type: 'string', field: 'email', label: 'Email', flex: 2 },
    {
      type: 'status',
      field: 'status',
      label: 'Status',
      flex: 1,
      getValue: (row) => ({
        label: row.status,
        variant: row.status === 'active' ? 'success' : 'warning'
      })
    },
    {
      type: 'boolean',
      field: 'isAdmin',
      label: 'Admin',
      flex: 1,
      trueValue: 'Yes',
      falseValue: 'No'
    }
  ];

  return (
      <PwcTable 
        columns={columns} 
        rows={users}
        placeholder={{
          heading: "No Users Found",
          description: "Add users to get started"
        }}
      />
  );
}

import { useState } from 'react';
import '@progress-i360/progress-web-components/table';

function MyComponent() {
  const [data] = useState([
    { name: 'Project Alpha', priority: true, progress: 75 },
    { name: 'Project Beta', priority: false, progress: 45 },
    { name: 'Project Gamma', priority: true, progress: 90 }
  ]);

  const columns = [
    { type: 'string', field: 'name', label: 'Project', flex: 2 },
    {
      type: 'icon',
      field: 'priority',
      label: 'Priority',
      flex: 1,
      getValue: (row) => ({
        icon: row.priority ? 'star' : undefined,
        label: row.priority ? 'High' : 'Normal'
      })
    },
    { type: 'string', field: 'progress', label: 'Progress (%)', flex: 1 }
  ];

  return (
      <pwc-table columns={columns} rows={data} />
  );
}

// component.ts
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@progress-i360/progress-web-components/table';
import '@progress-i360/progress-web-components/button';

@Component({
  selector: 'table-demo',
  template: `
    <pwc-table 
      [columns]="tableColumns" 
      [rows]="tableData">
    </pwc-table>
    <pwc-button label="Add Item" (pwc-click)="addItem()"></pwc-button>
  `,
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class TableDemo {
  tableColumns = [
    { type: 'string', field: 'name', label: 'Name', flex: 2 },
    { type: 'status', field: 'status', label: 'Status', flex: 1,
      getValue: (row: any) => ({ label: row.status, variant: row.variant }) },
    { type: 'tool', visibleCount: 1,
      getValue: (row: any) => [
        { icon: 'edit', label: 'Edit', onClick: () => this.editItem(row.id) }
      ]
    }
  ];

  tableData = [
    { id: 1, name: 'Item 1', status: 'Active', variant: 'success' },
    { id: 2, name: 'Item 2', status: 'Pending', variant: 'warning' }
  ];

  addItem() {
    const newId = this.tableData.length + 1;
    this.tableData = [...this.tableData, {
      id: newId,
      name: `Item ${newId}`,
      status: 'New',
      variant: 'info'
    }];
  }

  editItem(id: number) {
    const item = this.tableData.find(item => item.id === id);
    if (item) {
      item.status = 'Updated';
      item.variant = 'success';
    }
  }
}

// Create table element
const table = document.createElement('pwc-table');
table.columns = [
  { type: 'string', field: 'name', label: 'Name', flex: 2 },
  { type: 'string', field: 'email', label: 'Email', flex: 2 }
];
table.rows = [
  { name: 'John Doe', email: 'john@example.com' },
  { name: 'Jane Smith', email: 'jane@example.com' }
];

// Update table data function
function updateTableRows(newRows) {
  table.rows = newRows;
}

// Example usage and dynamic data updates
updateTableRows([{ name: 'Bob Johnson', email: 'bob@example.com' }]);
document.body.appendChild(table);

Usage Patterns

Table components adapt to different data presentation scenarios:

  • Data Grids - Display large datasets with consistent column structures and row-based operations
  • Management Interfaces - Show lists of items that require inline editing, status updates, or bulk actions
  • Comparison Tables - Present side-by-side data comparisons with different content types and visual indicators
  • Responsive Lists - Transform complex data into mobile-friendly formats with progressive disclosure patterns

Best Practices

Content Strategy Guidelines

  • Consistent Column Types - Use appropriate column types for data (status for states, boolean for yes/no values)
  • Meaningful Labels - Provide clear, descriptive column headers that explain the data content
  • Logical Ordering - Arrange columns by importance and user workflow, with primary identifiers first
  • Appropriate Sizing - Use flex values to allocate space based on content importance and length

Performance Optimization

  • Efficient Rendering - Minimize complex getValue functions and avoid heavy computations in column definitions
  • Responsive Breakpoints - Hide non-essential columns on smaller screens to maintain usability
  • Memory Management - Clean up event handlers and references when tables are destroyed or updated
  • Virtual Scrolling - Consider pagination or virtual scrolling for large datasets (>100 rows)

Integration Architecture

  • State Coordination - Synchronize table data with application state management and backend APIs
  • Action Handling - Implement proper error handling and loading states for table actions and operations
  • Accessibility Standards - Ensure proper table markup, keyboard navigation, and screen reader support
  • Data Validation - Validate and sanitize data before rendering to prevent display issues or security vulnerabilities

Common Use Cases

User Management Dashboards

  • Display user lists with status indicators, role information, and administrative actions
  • Provide inline editing capabilities for user properties and permission settings
  • Show account status with appropriate visual indicators and bulk operation support

Inventory and Product Management

  • Present product catalogs with pricing, stock status, and availability information
  • Enable quick actions like adding to cart, editing details, or managing inventory levels
  • Display product images, descriptions, and categorization with responsive column layouts

Task and Project Tracking

  • Show task lists with assignees, due dates, completion status, and priority indicators
  • Provide inline status updates through switches and dropdown menus
  • Enable project management actions like task creation, assignment, and status tracking

Troubleshooting

Common Issues

Columns Not Displaying

Problem: Table columns don't appear or show incorrect data
Solution:

  • Verify column field names match data object properties and column types are appropriate for data

Responsive Layout Issues

Problem: Table doesn't adapt properly to different screen sizes
Solution:

  • Check display breakpoints and flex values, ensure proper min/max width constraints

Action Buttons Not Working

Problem: Tool column buttons don't trigger events or show incorrectly
Solution:

  • Verify onClick handlers are properly bound and tool column configuration is correct

Performance Problems

Problem: Table becomes slow with large datasets or complex columns
Solution:

  • Optimize getValue functions, implement pagination, or consider virtual scrolling for large datasets

Implementation Support

For detailed implementation guidance:

  • API Documentation - Complete column type specifications and configuration options in Storybook

  • Interactive Examples - Live demos showing different column types, responsive behaviors, and data scenarios

  • Integration Patterns - Best practices for connecting tables with data sources, state management, and user workflows

Resources

Storybook Documentation

For comprehensive API documentation, interactive examples, and testing tools:

🔗 View Complete API Documentation in Storybook →

This guide provides high-level implementation guidance. For detailed API specifications and interactive examples, visit our Storybook documentation.