Using the Demos

Summary

  • This Documentation includes many small Demos
  • Most Demos contain the same small data set that show the a list of popular JavaScript Frameworks
  • The Demos can be set to run in 3 flavours:
    • using AdapTable Vanilla
    • using AdapTable Rect
    • using AdapTable Angular
    • using AdapTable Vue
  • Each Demo highlights a particular Module or piece of functionality with options to:
    • Switch between code view and grid view
    • Open the Demo in Full Screen
    • Fork the Demo in Sandbox to make changes and run independently
    • Reset to remove any changes made to the Demo
  • Most Demos also include:
    • Description and explanation of what the Demo does
    • Key code snippets of interest
    • Suggestions to try things out

The AdapTable documentation is liberally sprinkled with hundreds of Demos.

Every Demo illustrates a different piece of functionality or use case.

Each Demo is a full featured AdapTable (and AG Grid) instance that uses Sandpack.

Contents of the Demos

The Demos are designed to be as instructive, educational and helpful as possible.

Accordingly each Demo contains these features:

  • ability between to toggle between showing the Code and seeing the AdapTable instance

  • option to view the Demo in Full Screen

    Hint

    In full screen the Code and the AdapTable instance can be viewed side be side

  • Reset button to undo any changes made and revert to the original version of the Demo

  • Fork button to run the Demo in Codesandbox

    Note

    • Running a Demo in CodeSandbox is a good way to see how the particular Framework builds the full Demo
    • It also allows you easily to change the Initial Adaptable State or Adaptable Options and view the results
  • Description summarising what the Demo is designed to illustrate

  • expandable Show More button which displays the most important snippet of code used

  • Try It Out suggestion giving tips for something the user might want to try

Code View

Code View provides the most important code files that were used to create the Demo.

It typically includes:

and when required (i.e. when the Event has been subscribed):

Note

  • In the real world you are unlikely to create a file just to listen to the Adaptable Ready Event
  • It's provided here to minimise the code provided, and only display what is relevant to the particular Demo

Setting the Framework

AdapTable comes in 4 versions, and each of these can be used to power the Demos:

Note

We show the Framework being used in the top left corner of each Demo Sandpack

By default, all Demos will be written using AdapTable TypeScript.

But this can be changed by clicking the required Framework button in the top right of each page.

Hint

  • In practice there is not much difference between the Frameworks in the Demos when they are displayed inside Help
  • However forking a Demo to open it in Codesandbox, shows all the code provided in a fully Framework-specific way

Caution

  • Some Demos can only be displayed in a particular Framework and the global Framework setting is ignored
  • For instance the Demos which create React or Angular Components or shows No Code (which is React only)

The Data Set

The overwhelming majority of the Demos contain the same Data Set.

It contains 25 rows, each showing the Github record of a different JavaScript framework.

Note

A small Data Set allows each example to focus on a separate piece of functionality, rather than overall performance

Hint

Demo List

This is the full list of Demos available in the Documentation.

Click to open the Demo of your choice.

NameDescription
Undoing Data EditsUndoing edits made in AdapTable
Use Named Queries to Filter by StylesUse Named Queries to match Styles and Filters
Custom PredicatesAdds 3 Custom Predicates
Custom Predicates with InputsCreating Custom Predicates that receive inputs
Custom Predicates overriding System Predicates BehaviourOverriding System Date Predicates with Custom Predicates (with Timezone support)
Custom Predicates overriding System Predicates PropsOverriding System Predicate labels and icons
Expression Logic: IF FunctionUsing Ternary Operator in Expressions
Expression Logic: Case StatementsUsing Case Statements in Expressions
AdapTableQL: QUERY Expression FunctionUsing QUERY to reference other Expressions
Expressions using Row DataUsing non Column Row Data in Expressions
AdapTableQL: VAR Expression FunctionUsing VAR to provide placeholders and variables
AdapTableQL: Scalar AggregationUsing Scalar Aggregation Expressions in AdapTable
AdapTableQL: Boolean AggregationCreating Aggregated Boolean Expressions in AdapTableQL
AdapTableQL: Grouped AggregationUsing Scalar Aggregation Expressions with Grouping
AdapTableQL: Boolean Aggregations with WHEREAggregated Boolean Expressions with WHERE Clauses
AdapTableQL: Cumulative AggregationUsing Cumulative Scalar Aggregation Expressions
AdapTableQL: Cumulative Aggregations GroupedUsing Cumulative Scalar Aggregations with Grouping
AdapTableQL: Custom Aggregation FunctionsUsing Custom Expression Functions
AdapTableQL: Custom Functions ScopeAdding Scope to Custom Expression Functions
AdapTableQL: Custom Scalar FunctionsUsing Custom Scalar Expression Functions
AdapTableQL: Limiting FunctionsRemoves some System AdapTableQL Expression Functions
AdapTableQL: Limiting ColumnsSet some columns to be non queryable
AdapTableQL: Quantile AggregationUsing Quantile Scalar Aggregation Expressions
AdapTableQL: Grouped Quantile AggregationUsing Grouped Quantile Scalar Aggregation Expressions
AdapTableQL: Standard ExpressionsUsing Standard Expressions in AdapTable
AdapTableQL: Multi-Clause Boolean ExpressionsUsing Boolean Expressions with multiple Clauses
AdaptableQL Server EvaluationEvaluating AdaptableQL on the Server
Angular Components as Custom WindowsProviding Angular Components as Custom Windows
Angular Components as Progress IndicatorsProviding Angular Components as Progress Indicators
Angular Components: Custom Settings PanelProviding Angular Components as Custom Settings Panel
Angular Components: Custom Tool PanelsProviding Angular Components as Custom Tool Panels
Angular Components: Custom ToolbarsProviding Angular Components as Custom Toolbars
Custom Data in Adaptable StateUsing Application Initial State to save bespoke user data
Adaptable State ChangesMonitoring changes in AdapTable State
Filtering Adaptable State Changed MessagesFiltering messages fired by the Adaptable State Changed Event
State Management ModuleManaging Adaptable State with State Management Module
Remote State PersistenceStores AdapTable State remotely (using Supabase)
Load & persist state based on user identity/roleLoading and persisting state based on user identity/role
Persisting state imperativelyCustom State Persistence: Suppressing automatic State Persistence and imperatively persisting State
Persisting specific state slices imperativelyCustom State Persistence: Suppressing specific State changes and persisting them imperatively
Array Cell Data TypeUsing Array Columns
AG Grid Cell Data TypesUsing AG Grid Cell Data Types in AdapTable
AG Grid Cell Rendering & FormattingHow AG Grid Column Components and Value Formatters work with AdapTable
Using AG Grid PaginationHow AG Grid Pagination works in AdapTable
Custom Column Headers LayoutProviding Alternative Column Headers in a Layout
Custom Column Headers FunctionProviding Alternative Column Headers via a function
Column Info PanelUsing Column Info to see details about specific Columns
Column Type ScopeColumn Scope in Format Columns
Special Column TypesDefining 'Special Column' Types in AG Grid
Hiding a Column in AdapTable UIHide a column so its never visible to a user
Super fast Data editUse Shortcut, Plus Minus and Action Columns for rules based, swift data entry
SSRM - Calculated ColumnsServer-Side Row Model: Calculated Columns
SSRM - ExportingServer-Side Row Model: Running Reports
SSRM - Column FilteringServer-Side Row Model: Applying Column Filters
SSRM - Grid FilterServer-Side Row Model: Applying Grid Filter
SSRM - Formatting ColumnsServer-Side Row Model: Styling and Formatting
SSRM - Row GroupingServer-Side Row Model: Row Grouping
Server-Side Row ModelServer-Side Row Model: Full Demo
SSRM - PivotingServer-Side Row Model: Pivoting
SSRM - SearchingServer-Side Row Model: Applying Quick Search
SSRM - SortingServer-Side Row Model: Applying Sorts
SSRM - Custom SortingServer-Side Row Model: Applying Custom Sorts
SSRM - Updating RowsServer-Side Row Model: Updating Data Rows
SSRM - Adding RowsServer-Side Row Model: Adding Data Rows
Displaying Big DataHow AdapTable can handle very big data
AdapTable PerformanceHow AdapTable performs when lots is happening
Grid Info PanelUsing Grid Info to get overview of all AdapTable objects
Providing Custom HolidaysSettings Holidays and Working Days in AdapTable
Hot KeysUsing Hot Keys in AdapTable
Introducing AdapTableHow AdapTable integrates with - and extends - AG Grid
AdapTable FeaturesReference Guide to all AdapTable features
Auto-Generated Primary KeysUsing Primary Keys dynamically generated by AdapTable
Action Columns: UsageHow to define Action Columns
Action Columns: Multiple ButtonsAction Columns with multiple Buttons
Action Column CommandsUsing Action Column Commands
Action Column Commands PinnedUsing Action Column Commands
Configuring Action Column CommandsConfiguring Action Column Command Buttons
Action Columns: Defining in AG GridAction Columns: Adding AG Grid properties
Action Columns: Grouped RowsDisplaying Action Columns in Grouped and Summary Rows
Aggregations: Column HeadersHiding the aggFunc from the Column Header
Aggregations: FormattingFormatting and Styling Aggregations
Aggregations: Grand Total RowProviding a Row showing Total of all Aggregations
Aggregations: Grand Total Row FormattingFormatting Grand Total Rows
Aggregations: 'Only' Custom AggregationUsing the Only Aggregation
Using Weighted AveragesProviding Weighted Average Aggregations
Alerts: Aggregated ExpressionsAlerts fired due to Aggregated Boolean Expressions
Events: Alert FiredEvent published when Alerts fire
Alerts: Alert BehavioursAlerts configured with particular Behaviours
Alerts: Triggered by PredicatesAlerts fired due to Predicate Rules
Alerts: Multiple PredicatesAlerts fired due to Rules with Multiple Predicates
Alerts: Boolean ExpressionsAlerts fired due to complex Boolean Expressions
Adaptable Forms in AlertsAlerts can display an Adaptable Form when triggered
Custom Alert Messages (Definition)Providing Custom Alert Message via Alert Definition
Custom Alert Messages (Templates)Providing Custom Alert Message using Template Literals
Custom Alert Messages (Options)Providing Custom Alert Message via Alert Options
System Alert Command ButtonsUsing Alert Command Buttons
Custom Alert Command ButtonsProviding Custom Alert Command Buttons
Adaptable Forms in AlertsAlerts can display an Adaptable Form when triggered
Alerts: Observing Row ChangesObservable Alerts fired on Row Changes
Alerts: Observing Grid ChangesObservable Alerts fired on Grid Changes
Alerts: Observing No ChangesObservable Alerts fired on No Changes
Alerts: Relative Any ChangeAlerts fired due to Any Change
Alerts: Relative Percent ChangeAlerts fired due to a Percent Change
Alerts: Relative Absolute ChangeAlerts fired due to an Absolute Change
Alerts: Row AddedAlerts on Rows being Added to AdapTable
Alerts: Row Added with WHEREObservable Alerts fired when Row Added with WHERE clause
Alerts: Row RemovedAlerts on Rows being Removed from AdapTable
Alerts: Validation AlertsAlerts which prevent cell edits
Calculated Columns: IntroducingCalculated Columns: How they work
Calculated Columns: FormattingCalculated Columns: Adding Formatting
Pivotting Calculated ColumnsUsing Calculated Columns inside Pivot Layouts
Calculated Columns: AggregatedCalculated Columns: Aggregated Scalar Expressions
Calculated Columns: Aggregated with GROUP_BYCalculated Columns: Aggregated, Grouped Scalar Expressions
Calculated Columns: Aggregated with Row GroupingCalculated Columns: Aggregated Scalar Expressions in Row Groups
Calculated Columns: Defining in AG GridCalculated Columns: Adding AG Grid properties
Calculated Columns: CumulativeCalculated Columns: Cumulative Aggregated Expressions
Quantile Calculated ColumnsCalculated Columns: Quantile Aggregations
Calculated Columns: ReferencingCalculated Columns: Reference other Calc Cols
Charts Calculated ColumnCharts using Calculated Columns
Basic Calculated ColumnsCalculated Columns: Basic Standard
Calculated Columns: Complex ExpressionsCalculated Columns: Complex Expressions
Date Picker CustomisingCustomise the AdapTable Date Picker
Date Picker ThemingTheming the AdapTable Date Picker
Numeric Cell Editor ParamsNumeric Editor with Cell Editor Params
Percentage EditorAdapTable Percentage Editor
Percentage Editor ParamsPercentage Editor with Cell Editor Params
Select EditorsProviding Select Editors to speed up data entry
Saving AG Grid ChartsHow to leverage AG Grid's Charts in AdapTable
Cross Filter ChartsSupporting AG Grid's Cross Filter Charts
Chart LocationsShowing AG Grid Charts in different locations
Multiple Charts in LocationShowing multiple AG Grid Charts in a Div
External Charts LibraryUsing external charts libraries
Saving External ChartsUsing external charts libraries with Adaptable State
Displaying Saved ChartsDisplayed visible Charts when AdapTable restarts
Read-Only ChartsSettings Charts to be Read-Only
FiltersBasic Filtering using System Predicates
Multiple Predicate FiltersFiltering using Multiple Predicates
Filter Bar WildcardsAdding and removing Wildcards in Filter Bar
Filter Bar ConfigurationConfiguring Filters using Filter Options
Non-Filterable RowsConfiguring which rows cannot be filtered
Column Filter Applied EventListening to Column Filter Applied Event
Custom FiltersFiltering using user-defined Custom Predicates
Custom Filters with InputsCreating Custom Filters that receive inputs
Custom Filters using TimeCreating Custom Filters will filter on Time
Custom Filters accessing Other ColumnsCreating Custom Filters that look up values in other Columns
In Filter: Values CountShow a count of each item in In Filter
In Filter: Only Visible ValuesOnly show currently filtered values in In Filter
In Filter: Only Visible Values with CountOnly show currently filtered values in In Filter together with a Count
In Filter: Showing Raw ValueShow an item's raw value in In Filter
In Filter: Custom LabelShow a custom label for In Filter values
In Filter: Sorted ValuesSorting values in In Filter
In Filter: Ordered ValuesOrdering values in In Filter
In Filter: Showing a TooltipDisplaying a tooltip in In Filter
In Filter: Adding System PredicatesAdd System and Custom Predicates to filtered values in In Filter
In Filter: Adding Custom PredicatesAdd System and Custom Predicates to filtered values in In Filter
In Filter: Date ColumnsIn Filter showing Dates as a Tree structure
In Filter: Suppressing SearchSupressing Search in In Filter (enabling server valuation)
Not In FilterExcluding Column Values from the Filter
In Filter: ArraysThe In Predicate with Array Columns
In Filter PerformanceUsing In Filter with very big data
In Filter Custom CSSUsing CSS Variables to change In Filter Min & Max Widths
Manually Apply FiltersManually Applying Column Filters
System FiltersConfiguring System Predicates in Filters
Default Predicates for FiltersSetting new default Predicates for Filters
Column FormattingHow Column Formatting Works
Format Column - ScopeColumn Scope in Format Columns
Column Formatting: Column StylesColumn Formatting using Adaptable Styles
Column Formatting: CSS ClassesFormat Column with an external CSS Class
Format Column - ConditionsConditional Rules in Format Columns
Format Column - Expression ConditionExpression Conditions in Format Columns
Format Column - Predicate ConditionPredicate Conditions in Format Columns
Format Column - Multiple Predicate ConditionsMultiple Predicate Conditions in Format Columns
Format Column - Referenced Predicate ConditionsReferenced Predicate Conditions in Format Columns
Format Column: Custom PredicatesUsing Custom Predicates in Format Columns
Column Formatting CompositionMerging multiple Format Columns together
Column Formatting Precedence OrderMultiple Format Columns are merged according to Precedence
Column Formatting - Excluding RowsApplying Formats only in Grouped Rows
Column Formatting: Display FormatsColumn Formatting with Display Formats
Column Formatting: Format PrecedenceColumn Formatting with a multiply Display Formats
Column Formatting: Custom FormatterColumn Formatting with a Custom Display Formatter
Column Formatting: Date Display FormatsColumn Formatting with Date Display Formats
Column Formatting: Numeric Display FormatsColumn Formatting with Numeric Display Formats
Column Formatting: String Display FormatsColumn Formatting with String Display Formats
Column Formatting: Template Literal Display FormatsColumn Formatting with Placholder Display Formats
Styling & Formatting Column HeadersFormatting and Styling Column Headers
Comments in AdapTableUsing Comments
Configuring Commentable CellsSetting which Cells can display Comments
Comments CSSConfiguring Comments using CSS variables
Comments Date FormatConfiguring the format for Comments timestamp
Custom Sorts: ValuesProviding Custom Sort Initial State
Custom Sorts: FunctionsProviding Custom Sort Functions
Using Data Set FormsLoading Data in AdapTable with Data Sets
Using Data SetsLoading Data in AdapTable with Data Sets
Bulk UpdateUpdating numerous cells in one operation
Bulk Update ValidationBulk Update validating proposed edits
Edit Custom ValuesProviding custom values when editing a Column
Using Plus/MinusNudging numeric cells using custom Plus Minus rules
Using ShortcutsEditing data quickly using custom Shortcuts
Shortcuts in Row FormsShortcuts are available also in Row Forms
Smart EditEditing numeric Columns using Smart Edit
Smart Edit Custom OperationsAdding bespoke Smart Edit Operations
Exporting in AdapTableExporting Data from AdapTable
Configuring ExportProviding fine-grained control over Export in AdapTable
Configuring Report FileNamesConfiguring the Names of the Report Files in Export
Setting Exportable ColumnsConfiguring which columns are exportable
Skipping Column HeadersExcluding Column Headers from exported Report
Configuring System Export DestinationsConfiguring which System Export Destinations are available
Custom Export Destination via FunctionCustom Export Destination: via a Function
Custom Export Destination via a FormCustom Export Destination: via a Form
Formatting Report ValuesExporting Data using bespoke formatting rules
Formatting Dates in ReportsExporting data with dates in special format
Processing: Creating Reports on ServerReport processing to run report on server
Processing: Stopping ExportReport processing to stop Exports
Exporting System ReportsExporting data from AdapTable using System Reports
Configuring System ReportsConfiguring which System Reports are available
Custom ReportsExporting Data from AdapTable via Custom-created Reports
Configuring System Report FormatsConfiguring which System Report Formats are available
CSV Report FormatExporting Data from AdapTable in CSV Format
Excel Column TypeExporting to Excel using Excel Column Types (to preserve formatting)
JSON Report FormatExporting Data from AdapTable in JSON Format
VisualExcel Report Format TypeUsing the VisualExcel Report Format Type for a WYSIWYG export
SchedulesScheduling Reports in AdapTable
Flashing CellsFlashing Cells on Any Change
Flashing Cells using a RuleFlashing Cells when change matches a Rule
Changing Flashing Cell DefaultsChanging Flashing Colours and Duration
Flashing Rows on Cell ChangeFlashing a Whole Row when Cells Change
Free Text ColumnsUsing Free Text Columns in AdapTable
Free Text Columns FormattingFormatting Free Text Columns in AdapTable
Applying a Grid FilterUsing AdapTableQL to run Grid Filter
Comparing Column values with the Grid FilterUsing Grid Filter to compare values in 2 Columns
Grid Filter and Column FiltersApplying a Grid Filter with Column Filters
Grid Filter with Query Builder onlyGrid Filter: Setting which UI Components are available
Column GroupsUsing Column Grouping in AdapTable
Column Groups with Special ColumnsColumn Groups containing Calculated, FreeText or Action Columns
Column Groups: Expanded and CollapsedSetting Column Groups to be Expanded or Collapsed
Column Groups: Expanded and CollapsedSetting Column Groups to be Expanded or Collapsed
Row Grouping: BasicsConfiguring Row Groups in AdapTable
Row Grouping: Multiple ColumnsDisplaying each Row Group in its own Column
Row Grouping: Positioning SinglePositioning Single Row Groups in AdapTable
Row Grouping: Positioning MultiplePositioning Multiple Row Groups in AdapTable
Row Grouping: Pinning Single Row GroupPinning Single Row Grouped Columns in AdapTable
Row Grouping: Pinning Multiple Row GroupsPinning Multiple Row Grouped Columns in AdapTable
Row Grouping: Sizing Row Group ColumnSizing Row Grouped Columns in AdapTable
Row Grouping: Setting Default BehaviourDefault Row Group Behaviour
Row Grouping Behaviour: Single Row GroupingSetting and Saving Expanded Single Row Groups
Row Grouping Behaviour: Multiple Row GroupingSetting and Saving Expanded Multiple Row Groups
Row Grouping Behaviour: Display Type MultiSetting and Saving Expanded Row Groups with DisplayType of Multi
Row Grouping Behaviour: Pivot LayoutsSetting and Saving Expanded Row Groups in Pivot Layouts
Row Grouping: Filtering Single RowGroupDisplayTypeFiltering Row Grouped Columns with Display Type Single
Row Grouping: Existing FiltersFiltering Row Grouped Columns on Columns with existing Column Filters
Row Grouping: Setting Row Grouped Column FilterSetting Filter for the Row Grouped Column
Row Grouping: Filtering with FieldSetting Filter for the Row Grouped Column when Field is set
Row Grouping: Filtering Multi RowGroupDisplayTypeFiltering Row Grouped Columns with Display Type Multi
Row Grouping: Formatting SingleFormatting Row Grouped Columns
Row Grouping: Formatting MultiFormatting Multiple Row Grouped Columns
Row Grouping: Conditional StylesProviding Conditional Styling for Row Grouped Columns
Row Grouping: Styling Whole Grouped RowProviding Conditional Styling for entire Row Grouped Column Row
Grouped Rows: Format ColumnsUsing Format Columns in Grouped Rows
Grouped Rows: Badge StylesUsing Badge Styled Columns in Grouped Rows
Row Grouping: Action Columns in Grouped RowsAdding Action Columns in Grouped Rows created by Row Grouped Columns
Row Grouping: SortingSorting Row Groups in AdapTable
Highlighting Cells and RowsUsing Grid API to highlight cells and rows in AdapTable
Jumping to Cells and RowsUsing Grid API to move focus to given Cells, Rows & Columns
Data Import - Update RowsUpdating Data using Data Import
Data Import - Add RowsAdding New Rows using Data Import
Data Import - Adding all dataAdding All Data using Data Import
Data Import - Matching ColumnsData Import with Column Matching
Data Import - ValidationValidating Data in Data Import
Data Import - Custom CSV File HandlerCustom file handlers.
Basic LayoutUsing Layouts in AdapTable
Default Creation PropsProviding Default Creation Props in Layout Options
Default Layout PropsProviding Default Layout Properties via State Functions
Extended LayoutsExtending Layouts by using Tags to limit Scope
Sharing Extended LayoutsSharing an Extended Layout
Cloning Extended LayoutsCloning an Extended Layout
Layouts With MetadataAdding MetaData to Layouts
Layout ChangedEvent triggered when the Layout is changed
Pivot LayoutsCreating Pivot Layouts In AdapTable
Pivot Layouts - Expand CellsOpening a Pivot Cell to see full contents in Table View
Pivot Column Groups: Expanded CollapsedConfiguring Expanded Collapsed Behaviour for Pivot Column Groups
Expanding Pivot ColumnsPivot Layout with Expanded Pivot Columns configured
Pivot Aggregation LayoutsPivot Layout with Agg Columns
Pivot: Column FilteringApplying Column Filtering when Pivoting
Pivot Result Columns: FilteringApplying Column Filtering in Pivot Result Columns
Pivot - Formatting Aggregation ColumnsAdding Styles and Column Formatting to Pivot Aggregation Columns
Pivot - Formatting Result ColumnsApplying Column Formatting and Styling to Pivot Result Columns
Pivot - Formatting Row GroupsApplying Column Formatting and Styling to Pivot Row Grouping Columns
Excluding formatting from Pivot LayoutsEnsuring Styles are excluded from Pivot Layouts
Pivot Result ColumnsUsing Pivot Result Columns
Pivot Aggregation Columns: WidthsSetting & Saving Column Widths of Pivot Aggregation Columns
Pivot Result Columns: WidthsSetting & Saving Column Widths of Pivot Result Columns
Pivot Sorting: Aggregation ColumnsSetting & Saving Column Sorting for Pivot Aggregation Columns
Pivot Sorting: Pivot Result ColumnsSetting & Saving Column Sorting for Pivot Result Columns
Pivot Sorting: Custom SortsUsing Custom Sorts in Pivot Layout
Pivot Grand TotalsPivot Grand Total Columns
Pivot Column TotalsPivot Column Totals
Pivot Aggregation Totals LayoutPivot Aggregation Total Columns per Layout
Pivot Aggregation Totals Pivot ColumnPivot Aggregation Total Columns per Pivot Column
Total Columns Formatting InheritanceFormatting Pivot Aggregation Total Columns
Total Columns Formatting Column TypesFormatting Pivot Aggregation Total Columns
Formatting Pivot Column TotalsFormatting Pivot Column Groups Expanded / Collapsed
Totals Columns Customising HeaderConfiguring Headers for Pivot Total Columns
Updating Pivot Total ColumnsUpdating Pivot Total Columns at runtime via api
Manually Saving LayoutsNon-auto saving of Layouts
Synchronising LayoutsUsing Layout Changed Event to synchronise between Layouts
Table LayoutsCreating Table Layouts
Table Layouts: Column HeadersCreating Table Layouts with custom Column Headers
Table Layouts: Column OrderCreating Table Layouts with default Column Order
Table Layouts: Column SizingCreating Table Layouts with custom Column Widths & Flex
Table Layouts: ColDef WidthsCreating Table Layouts with custom ColDef Widths
Table Layouts: Column VisibilityCreating Table Layouts with custom Column Visibility
Table Layouts: Column PinningCreating Table Layouts with Column Pinning
Table Layouts: ColDef PinningCreating Table Layouts with custom ColDef Pinning
Table Layouts: SortingCreating Table Layouts with Column Sorting
Sorting on Invisible ColumnsSorting the Grid using Hidden Columns
Updating Layouts ProgramaticallyUpdating Layout using the updateLayout api function
Setting Cell ValuesUsing Grid API to set individual cell values
Row Changed EventsEvents triggered when Rows are added or deleted
Cell Changed EventEvent triggered when Cells are edited
Loading Grid DataLoading data in AG Grid and AdapTable at run-time
Delaying Grid DataAdding extra columns after AG Grid has loaded
Adding Row DataAdding Rows to AG Grid at run-time
Deleting Row DataDeleting Rows from AG Grid at run-time
Managing Row DataManaging AG Grid Rows at run-time
Updating Row DataUpdating Rows in AG Grid at run-time
Master DetailUsing the Master Detail Plugin
Master Detail - Detail InitInitialising the Detail Grids
Data Change HistorySeeing editing activing in Data Change History
Data Change History: Button ActionsUsing Undo and Clear Actions in Data Change History
Data Change History: Undo ButtonExtending Data Change history with Undo Buttons
Data Change History: Limiting ChangesSetting which edits will display in Data Change History
Data Change History: Showing all ChangesSetting Data Change History to show all the changes made to each Cell
Named QueriesDefining and Saving "Named Queries" for Re-Use
Referencing Named QueriesReferencing Named Queries by using the QUERY keyword
AdapTable No CodeUsing the AdapTable No Code Plugin
AdapTable No Code Data SourceProviding a Custom Data Source step to No Code Wizard
Notes in AdapTableAdding Notes to cells
Configuring Notable CellsSetting which Cells can display Notes
Notes CSSConfiguring Notes using CSS variables
Entitlements: Default Access LevelProviding a default Entitlement with a value
Entitlements: By ListManaging Entitlements through a 'hard-coded' list
Entitlements: By FunctionManaging Entitlements through a JavaScript function
Entitlements: ReadOnly ObjectsPermissioning invididual objects to be ReadOnly
Quick SearchRunning Quick Search in AdapTable
Quick Search as FilterQuick Search: Filtering Results
Customising Quick Search as FilterQuick Search: Filtering Results using Custom Evaluation
Quick Search Raw ValueRunning Quick Search using the Cell's Raw Value
Bespoke Quick SearchProviding a bespoke Quick Search implementation
Quick Search Exclude CellsExcluding Cells from Quick Search
Quick Search PlaceholderChanging Quick Search Placeholder
Floating Quick SearchUsing Floating Quick Search in AdapTable
Quick Search Matching StylesSetting Quick Search Matching Styles
RemindersSetting up Reminders in AdapTable
Row FormsDisplays Action Row Buttons
Row Form EventsListening to the Row Form Submitted Event
Row Form ConfigConfiguring a Row Form
Cell SelectionSelecting Cells in AdapTable
Row SelectionSelecting Rows in AdapTable
Checkbox SelectionUsing AG Grid Checkbox Selection in AdapTable
Selecting Cell RangesSelecting Ranges using Adaptable API
Selecting using ExpressionsSelecting cells using Expressions
Selecting ColumnsSelecting Columns using Adaptable API
Selecting RowsSelecting Rows using Adaptable API
Selecting whole GridSelecting all Cells using Adaptable API
Badge Styled ColumnsDisplaying Badge Styles
Badge Styles: Multiple RulesStyling Badges with Multiple Rules (per Predicate)
Badge Styles: Custom IconsShowing Custom Icons in Badges
Badge Styles: Only IconsShowing Only Icons (and no text) in Badges
Badge Styles: ArraysBadge Styles in Array Columns
Badge Styles: Custom PredicatesBadge Styles using Custom Predicates
Gradient StyleUsing Gradient Style
Gradient Style: reversedGradient Style Reversed
Gradient Style: Column ComparisonGradient Style using Column Comparison
Gradient Style: FormattingGradient Style using Column Comparison
Styled ColumnsStyled Columns in AdapTable
Percent Bar: Numeric RangesPercent Bars using Numeric Ranges
Percent Bar: Percentage RangesPercent Bars using Percentage Ranges
Percent Bar: Column ComparisonsPercent Bars Using Column Comparisons
Percent Bar: Cell PropertiesPercent Bars with Back Colour, Cell Text and Tool Tip
Styled Column: SparklineStyled Columns showing Basic Sparklines
Styled Column: Sparkline AdvancedStyled Columns showing Complex Sparklines
Sparkline Columns: CalculatedSparkline Columns: Inside Calculated Columns
Summarising Grid DataSummarising Grid Data in AdapTable
Cell SummarySummarising selected cells
Summarising Pivot CellsCell Summary in Pivot Layouts
Custom Cell SummariesProviding Custom Cell Summaries
Cell Summary FormattingFormatting Cell Summary values
Cell Summary Ticking DataCell Summary values automatic updates
Row SummaryDisplaying Row Summaries
Formatted Row SummaryFormatting Row Summaries
Filtered Row SummaryRow Summaries with Filters
System StatusSending and Displaying System Status Messages
System StatusConfiguring System Status Messages
Team SharingBasic Team Sharing
Team Sharing with Multiple TeamsTeam Sharing between multiple teams of users
Active Team SharingActive Team Sharing
Configuring and customizing state managementConfiguring and customizing TeamSharing State Management
Team Sharing Admin and UserA user is an admin and can share entities, and one is a normal user that can only apply shared entities.
Team Sharing with Custom ObjectsUsing Team Sharing to share bespoke data
Referenced Team Sharing: Adaptable ObjectsTeam Sharing with Adaptable Objects
Referenced Team Sharing: LayoutsTeam Sharing Layouts with Special Columns
Referenced Team Sharing: Extended LayoutsTeam Sharing with Extended Layouts with Tagged Objects
OS ThemeUsing OS Theme in AdapTable
Light ThemeUsing Themes in AdapTable
Wizard ThemeTheming the AdapTable UI Wizard
AG Grid ThemesUsing AG Grid's Quartz Theme in AdapTable
AG Grid Custom ThemeCreates a custom AG Grid theme and pairs it with AdapTable's `Dark` theme.
Custom ThemeProviding a Custom Theme in AdapTable
Transposing the GridShow a Grid in Transposed View
Transposing: Configuring ColumnsSelect which Columns are transposed in Transposed View
Transposing: Configuring RowsSelect which Rows are transposed in Transposed View
Transposing the GridDisplay Transposed View in custom location
Tree Data FormattingAdding Format Columns to Tree Data in AdapTable
Tree Data Quick SearchUsing Quick Search with Tree Data
Tree Data Column FilteringUsing Column Filters with Tree Data
Tree Data PinningPinning Key Column in Tree Grid
Tree Data SizingSetting width of Key Column in Tree Grid
Tree Data SortingSorting the Key Column in Tree Grid
Data ValidationPerforming Data Validation with a Prevent Edit Alert
Client Data ValidationPerforming Client Data Validation with a Prevent Edit Alert
Editable CellsSetting particular cells in AdapTable to be editable
Server ValidationPerforming Server Validation
Using the useAdaptableState and useCurrentLayout hooksUsing the `useAdaptableState` and `useCurrentLayout` hooks
Custom React Toolbars with state from contextUsing React state in Custom Components
React Components as Custom WindowsProviding React Components as Custom Windows
React Components as Progress IndicatorsProviding React Components as Progress Indicators
React Components as Custom Settings PanelProviding React Components as Custom Settings Panel
React Components as Custom Tool PanelsProviding React Components as Custom Tool Panels
React Components as Custom ToolbarsProviding React Components as Custom Toolbars
Passing Component State in AdaptableOptionsPassing Component State in AdaptableOptions (React)
No Code Adapter for AdapTable ReactNo Code Adapter for AdapTable React Wrapper
Column Menu: Reordering Menu ItemsReordering items in the AdapTable Column Menu
Column Menu: Restructuring Menu ItemsRestructuring Items in AdapTable Column Menu
Column Menu: Removing Menu ItemsRemoving Items in AdapTable Column Menu
Column Menu: Row Group ColumnsManaging Row Group Items in AdapTable Column Menu
Column Menu: Custom Menu ItemsAdding Custom Menu Items to Column Menus
Context Menu: Reordering Menu ItemsReordering items in the AdapTable Context Menu
Context Menu: Restructuring Menu ItemsRestructuring Items in AdapTable Context Menu
Context Menu: Removing Menu ItemsRemoving Items in AdapTable Context Menu
Context Menu: Row Group ColumnsManaging Row Group Items in AdapTable Context Menu
Context Menu: Custom Menu ItemsAdding Custom Menu Items to Context Menus
Dashboard: OverviewUsing the AdapTable Dashboard
Dashboard: Module ButtonsDisplaying Module Buttons in the Dashboard
Dashboard: Custom ButtonsDisplaying Custom Buttons in the Dashboard
Dashboard: ConfiguringConfiguring the AdapTable Dashboard
Dashboard: Stacking ToolbarsStacking Toolbars in the Dashboard
Custom Toolbar: Using ButtonsProviding Custom Toolbars with AdapTable Buttons
Custom Toolbar: Automating ButtonsCustom Toolbars with dynamic AdapTable Buttons
Custom Toolbars: Bespoke ContentProviding bespoke content in a Custom Toolbar
Dashboard: Inline ModeShowing Dashboard in Inline Mode
Dashboard; Collapsed ModeShowing Dashboard in Collapsed Mode
Dashboard: Floating ModeShowing Dashboard in Floating Mode
Dashboard: HidingHiding the Dashboard altogether
Dashboard: Tabs & ToolbarsProviding Tabs and Module Toolbars in the Dashboard
Dashboard: Pinned ToolbarsUsing Pinned Toolbars
AdapTableQL Expression EditorHow to use the Expression Editor in AdapTable
AdapTableQL Query BuilderUsing Expression Query Builder
Settings PanelSettings Panel: Using it in AdapTable
Setting Items in Settings PanelSettings Panel: Setting order & visibility of Items
Customising the Settings PanelSettings Panel: Configuring for personal requirements
Adding a Custom Settings PanelSettings Panel: Adding Custom Panel
AdapTable Status BarUsing the Status Bar in AdapTable
AdapTable and AG Grid Status BarsIntegrating AdapTable & AG Grid Status Bars
Status Bar replacing DashboardUsing the Status Bar to replace the Dashboard
AdapTable Tool Panel: IntroductionIntroducing the AdapTable Tool Panel Component
AdapTable Tool Panel: ConfigurationConfiguring the AdapTable Tool Panel Component
ToolPanel Module ButtonsModule Buttons in AdapTable ToolPanel
ToolPanel Custom ButtonsCustom Buttons in AdapTable ToolPanel
Custom ToolPanelProviding Custom ToolPanels
Module ToolPanelsConfiguring Module ToolPanels
Using US EnglishSetting English Variant to US (in place of default GB)
Configuring Loading ScreenProviding custom properties to loading screen
System Adaptable IconsLeveraging System Icons in AdapTable
Custom Adaptable IconsHow to use Custom Icons in Adaptable Buttons
Element IconsProviding Element Icons
Application IconProviding an Application Icon
Styling Editable CellsStyling the Editable Grid Cells in AdapTable
Styling Read-Only CellsStyling the Read-Only Grid Cells in AdapTable
Styling Edited CellsStyling the Edited Grid Cells in AdapTable
Hiding AdapTable UI from UsersHow to hide / show the AdapTable UI
Hiding AdapTable Mentions from UsersHow to ensure users are unaware AdapTable is being used
Displaying a Progress IndicatorDisplay a Progress Indicator
Adaptable Style: Color PickerSetting Colours for the AdapTable Style
Adaptable Style: Custom PaletteProviding Custom Colours for AdapTable Style Palette
Creating a Custom WindowDisplaying a Custom Window
Notifications in AdapTableKeeping end users notified and updated
Toast NotificationsConfiguring Toast Notifications
Vue Components as Custom WindowsProviding Vue Components as Custom Windows
Vue Components as Progress IndicatorsProviding Vue Components as Progress Indicators
Vue Components as Custom Settings PanelProviding Vue Components as Custom Settings Panel
Vue Components as Custom Tool PanelsProviding Vue Components as Custom Tool Panels
Vue Components as Custom ToolbarsProviding Vue Components as Custom Toolbars