React Flex Table

A flexible, responsive React table component built with FlexBox and styled-components. Features expandable rows, customizable styling, and keyboard accessibility.

Installation

npm install @nixtus/react-flextable

Peer Dependencies

This package requires the following peer dependencies:

npm install react styled-components

Requirements

• React >=16.8.0 (Hooks support required)
• styled-components ^6.0.0

Features

• 🎨 Styled Components - Built with styled-components v6 for flexible, customizable styling
• 📱 Responsive - FlexBox-based layout adapts to different screen sizes
• ⚡ React Hooks - Modern React implementation using hooks
• ♿ Accessible - Keyboard navigation support (Enter key to expand/collapse)
• 🎯 Smart Interactions - Click-to-expand with text selection detection
• 🧪 Well Tested - Comprehensive test suite with Jest 30 and React Testing Library
• 📦 ES6/ESNext - Written in modern JavaScript, transpiled by Babel
• ✨ TypeScript Ready - PropTypes included for type checking
• 🔧 No Minification - Unminified output for easier debugging (minify in your app)

Components

Component	Description
<FlexTable>	Outer table container
<FlexHeader>	Header row container (non-interactive styling by default)
<FlexFooter>	Footer row container (non-interactive)
<FlexRow>	Table row with click-to-expand functionality
<FlexItem>	Standard table cell
<FlexItemExpand>	Expandable cell - hidden by default, visible when row is clicked

Basic Example

import {
  FlexTable,
  FlexHeader,
  FlexFooter,
  FlexRow,
  FlexItem,
  FlexItemExpand,
} from '@nixtus/react-flextable';

function MyTable() {
  return (
    <FlexTable>
      <FlexHeader>
        <FlexItem>ID</FlexItem>
        <FlexItem>Company</FlexItem>
      </FlexHeader>

      <FlexRow>
        <FlexItem>fd3gt-1der</FlexItem>
        <FlexItem>Nixtus</FlexItem>
        <FlexItemExpand>
          {/* THIS WILL BE HIDDEN BY DEFAULT, THEN EXPANDED VISIBLE WHEN FlexRow IS CLICKED */}
          <h1>Company Details</h1>
          <p>Additional information goes here...</p>
        </FlexItemExpand>
      </FlexRow>

      <FlexRow>
        <FlexItem>gh8jk-2xyz</FlexItem>
        <FlexItem>Acme Corp</FlexItem>
        {/* Rows without FlexItemExpand won't have expand functionality */}
      </FlexRow>

      <FlexFooter>
        <FlexItem>&copy; Nixtus</FlexItem>
      </FlexFooter>
    </FlexTable>
  );
}

Custom Styling

All components accept standard React props including className and style:

<FlexTable style={{ maxWidth: '1200px', margin: '0 auto' }}>
  <FlexHeader className="my-custom-header" style={{ backgroundColor: '#f5f5f5' }}>
    <FlexItem style={{ fontWeight: 'bold', color: '#333' }}>Name</FlexItem>
    <FlexItem style={{ fontWeight: 'bold', color: '#333' }}>Status</FlexItem>
  </FlexHeader>

  <FlexRow className="data-row">
    <FlexItem>John Doe</FlexItem>
    <FlexItem>Active</FlexItem>
  </FlexRow>
</FlexTable>

Props API

All Components

Prop	Type	Default	Description
children	node	-	Child elements to render
className	string	''	CSS class name(s)
style	object	{}	Inline styles

FlexItemExpand

Prop	Type	Default	Description
itemexpanded	number	undefined	Controls expanded state (managed internally by FlexRow)

Interaction Behavior

Click to Expand

• Click any <FlexItem> within a <FlexRow> to toggle expansion
• Only works when the row contains <FlexItemExpand> children
• Rows with expandable content show a pointer cursor
• Content inside <FlexItemExpand> only renders when expanded (performance optimization)

Text Selection Detection

• Clicking won't toggle expansion if text is currently selected
• Allows users to select and copy text without triggering expansion

Keyboard Navigation

• Press Enter key on a FlexItem to toggle expansion
• Improves accessibility for keyboard-only users

Multiple Expandable Sections

<FlexRow>
  <FlexItem>Data 1</FlexItem>
  <FlexItem>Data 2</FlexItem>
  <FlexItemExpand>
    <div>First expandable section</div>
  </FlexItemExpand>
  <FlexItemExpand>
    <div>Second expandable section</div>
  </FlexItemExpand>
</FlexRow>

Development

# Install dependencies
npm install

# Run tests
npm test

# Run tests in watch mode
npm run test:watch

# Build for production
npm run build

# Lint code
npm run lint

# Run all quality checks
npm run prepare

Browser Compatibility

Modern browsers supporting:

• ES6/ESNext features
• CSS FlexBox
• React 16.8+ (Hooks)

Migration from v4 styled-components

If upgrading from a version using styled-components v4, note that v6 uses transient props (prefixed with $) to prevent prop forwarding to DOM elements. This is handled internally - no action required from consumers.

License

MIT © Andrew Ninneman MIT © Nixtus LLC

Links

• GitHub Repository
• Issues
• NPM Package