AdapTable UI Components

Summary

  • AdapTable provides 6 UI Grid components that give run-time users quick access to AdapTable functionality
  • Additionally it provides 3 UI windows that are useful inside your application
  • All these components can be given bespoke, custom content to match your requirements
  • All AdapTable UI is built on accessible headless primitives, styled with Tailwind and CSS variables

AdapTable is more than an AG Grid extension — it ships a full UI layer that integrates with your host application.

AdapTable provides a range of fully customisable UI Grid components and UI Windows to enhance your system.

UI Grid Components

AdapTable provides six main Grid Components designed to help users access AdapTable fuctionality:

Note

Each is configurable at design time and, where entitlements allow, at run time

ComponentPurpose
Settings PanelOne place to create and manage Adaptable objects and Module configuration
DashboardTabs, toolbars and buttons above the grid for quick access to common actions
Tool PanelBespoke, collapsible, AG Grid Tool Panel — an alternative to the Dashboard
Status BarInformation and controls that sit in the AG Grid Status Bar
Column MenuEnhanced AG Grid column header menu with AdapTable menu items
Context MenuEnhanced AG Grid context menu with AdapTable menu items

Hint

AdapTable also provides 2 Components to write AdapTableQL Expressions: the Expression Editor and Query Builder

UI Windows

AdapTable also provides standalone windows and dialogs that you configure or show programmatically — for example while the grid initialises or during a long-running task.

WindowPurpose
Loading ScreenDialog shown while AdapTable initialises; configurable title, message, and delay
Custom PopupMovable, resizable window with developer-supplied content
Progress IndicatorOverlay for long-running operations; use default rendering or supply custom content

Extending the UI

AdapTable's UI components are designed to be extended.

Developers can embed bespoke content in all components to match any use case.

This can be done by using framework components (i.e. React, Angular, Vue) or Vanilla render callbacks.

Find Out More

See Building Custom Components for framework-specific patterns and links to each individual Component

AdapTable UI Foundation

AdapTable's Dashboard, wizards, menus, pickers and dialogs are built on a modern UI stack:

LayerTechnologyRole
PrimitivesBase UIAccessible, headless components (roles, focus, keyboard)
Patternsshadcn/uiConventions for assembling and styling those primitives
StylingTailwind CSS + CSS variablesUtility classes and design tokens (light / dark themes)

Note

AdapTable Tailwind classes use the twa: prefix so they don't collide with Tailwind in your host application

Find Out More

NextSettings Panel