radar-ui

RADAR UI

A powerful and flexible React component library featuring advanced table functionality, pagination, and tooltips.

🚀 Features

• 📊 Advanced Table Component: Sorting, resizing, drag & drop, grouped columns, pagination
• 📄 Flexible Pagination: Customizable navigation with quick jumper
• 💡 Smart Tooltips: Auto-positioning tooltips with viewport boundary detection
• 🎨 TypeScript Support: Full type definitions included
• 📱 Responsive Design: Works on all screen sizes
• ⚡ Performance Optimized: Lightweight and fast

📖 Documentation

View the interactive Storybook documentation at: https://yourusername.github.io/radar-design

🛠 Installation

From npm (Recommended)

npm install radar-ui

yarn add radar-ui

pnpm add radar-ui

As Git Dependency (Development)

⚡ Performance Optimization

Table Column Resize Throttling

For tables with many rows (50+), column resizing can become laggy due to frequent re-renders. Use the resizeThrottle prop to optimize performance:

import { Table } from 'radar-ui';

// For tables with 50-500 rows
<Table
  resizeThrottle={16}  // ~60 FPS updates
  // ... other props
/>

// For tables with 500+ rows
<Table
  resizeThrottle={33}  // ~30 FPS updates
  // ... other props
/>

// Default (no throttling) - good for small tables
<Table
  // no resizeThrottle prop = no throttling
  // ... other props
/>

How it works:

• resizeThrottle={0} (default): Updates on every mouse move - original behavior
• resizeThrottle={16}: Throttles updates to ~60 FPS - recommended for 50-500 rows
• resizeThrottle={33}: Throttles updates to ~30 FPS - recommended for 500+ rows

Benefits:

• Reduces re-renders during resize by up to 60x
• Maintains smooth visual feedback
• Fully backward compatible (default = no throttling)
• Preserves all functionality: auto-scroll, grouped columns, fixed columns

As Git Dependency (Development)