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:
adaptableOptions.ts- the Adaptable Options used in the Demo (including any Initial Adaptable State)gridOptions.ts- the AG Grid Grid Options file usedcolumnDefs.ts- the AG Grid Column Definitions provided to Grid OptionsagGridModules.ts- the AG Grid Modules used in the Demo (typically the full set that AdapTable requires)
and when required (i.e. when the Event has been subscribed):
onAdaptableReady.ts- the code provided in the Adaptable Ready Event for the Demo
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:
- Vanilla (TypeScript)
- AdapTable React
- AdapTable Angular
- AdapTable Vue
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
- There are a few Demos in the Documentation which do contain much bigger Data Sets
- One good example is the Adaptable Performance Demo which contains 100,000 rows
- Another are the Server-Side Row Model and Viewport Row Model Demos which both use infinite data
Demo List
This is the full list of Demos available in the Documentation.
Click to open the Demo of your choice.
| Name | Description |
|---|---|
| Undoing Data Edits | Undoing edits made in AdapTable |
| Use Named Queries to Filter by Styles | Use Named Queries to match Styles and Filters |
| Custom Predicates | Adds 3 Custom Predicates |
| Custom Predicates with Inputs | Creating Custom Predicates that receive inputs |
| Custom Predicates overriding System Predicates Behaviour | Overriding System Date Predicates with Custom Predicates (with Timezone support) |
| Custom Predicates overriding System Predicates Props | Overriding System Predicate labels and icons |
| Expression Logic: IF Function | Using Ternary Operator in Expressions |
| Expression Logic: Case Statements | Using Case Statements in Expressions |
| AdapTableQL: QUERY Expression Function | Using QUERY to reference other Expressions |
| Expressions using Row Data | Using non Column Row Data in Expressions |
| AdapTableQL: VAR Expression Function | Using VAR to provide placeholders and variables |
| AdapTableQL: Scalar Aggregation | Using Scalar Aggregation Expressions in AdapTable |
| AdapTableQL: Boolean Aggregation | Creating Aggregated Boolean Expressions in AdapTableQL |
| AdapTableQL: Grouped Aggregation | Using Scalar Aggregation Expressions with Grouping |
| AdapTableQL: Boolean Aggregations with WHERE | Aggregated Boolean Expressions with WHERE Clauses |
| AdapTableQL: Cumulative Aggregation | Using Cumulative Scalar Aggregation Expressions |
| AdapTableQL: Cumulative Aggregations Grouped | Using Cumulative Scalar Aggregations with Grouping |
| AdapTableQL: Custom Aggregation Functions | Using Custom Expression Functions |
| AdapTableQL: Custom Functions Scope | Adding Scope to Custom Expression Functions |
| AdapTableQL: Custom Scalar Functions | Using Custom Scalar Expression Functions |
| AdapTableQL: Limiting Functions | Removes some System AdapTableQL Expression Functions |
| AdapTableQL: Limiting Columns | Set some columns to be non queryable |
| AdapTableQL: Quantile Aggregation | Using Quantile Scalar Aggregation Expressions |
| AdapTableQL: Grouped Quantile Aggregation | Using Grouped Quantile Scalar Aggregation Expressions |
| AdapTableQL: Standard Expressions | Using Standard Expressions in AdapTable |
| AdapTableQL: Multi-Clause Boolean Expressions | Using Boolean Expressions with multiple Clauses |
| AdaptableQL Server Evaluation | Evaluating AdaptableQL on the Server |
| Angular Components as Custom Windows | Providing Angular Components as Custom Windows |
| Angular Components as Progress Indicators | Providing Angular Components as Progress Indicators |
| Angular Components: Custom Settings Panel | Providing Angular Components as Custom Settings Panel |
| Angular Components: Custom Tool Panels | Providing Angular Components as Custom Tool Panels |
| Angular Components: Custom Toolbars | Providing Angular Components as Custom Toolbars |
| Custom Data in Adaptable State | Using Application Initial State to save bespoke user data |
| Adaptable State Changes | Monitoring changes in AdapTable State |
| Filtering Adaptable State Changed Messages | Filtering messages fired by the Adaptable State Changed Event |
| State Management Module | Managing Adaptable State with State Management Module |
| Remote State Persistence | Stores AdapTable State remotely (using Supabase) |
| Load & persist state based on user identity/role | Loading and persisting state based on user identity/role |
| Persisting state imperatively | Custom State Persistence: Suppressing automatic State Persistence and imperatively persisting State |
| Persisting specific state slices imperatively | Custom State Persistence: Suppressing specific State changes and persisting them imperatively |
| Array Cell Data Type | Using Array Columns |
| AG Grid Cell Data Types | Using AG Grid Cell Data Types in AdapTable |
| AG Grid Cell Rendering & Formatting | How AG Grid Column Components and Value Formatters work with AdapTable |
| Using AG Grid Pagination | How AG Grid Pagination works in AdapTable |
| Custom Column Headers Layout | Providing Alternative Column Headers in a Layout |
| Custom Column Headers Function | Providing Alternative Column Headers via a function |
| Column Info Panel | Using Column Info to see details about specific Columns |
| Column Type Scope | Column Scope in Format Columns |
| Special Column Types | Defining 'Special Column' Types in AG Grid |
| Hiding a Column in AdapTable UI | Hide a column so its never visible to a user |
| Super fast Data edit | Use Shortcut, Plus Minus and Action Columns for rules based, swift data entry |
| SSRM - Calculated Columns | Server-Side Row Model: Calculated Columns |
| SSRM - Exporting | Server-Side Row Model: Running Reports |
| SSRM - Column Filtering | Server-Side Row Model: Applying Column Filters |
| SSRM - Grid Filter | Server-Side Row Model: Applying Grid Filter |
| SSRM - Formatting Columns | Server-Side Row Model: Styling and Formatting |
| SSRM - Row Grouping | Server-Side Row Model: Row Grouping |
| Server-Side Row Model | Server-Side Row Model: Full Demo |
| SSRM - Pivoting | Server-Side Row Model: Pivoting |
| SSRM - Searching | Server-Side Row Model: Applying Quick Search |
| SSRM - Sorting | Server-Side Row Model: Applying Sorts |
| SSRM - Custom Sorting | Server-Side Row Model: Applying Custom Sorts |
| SSRM - Updating Rows | Server-Side Row Model: Updating Data Rows |
| SSRM - Adding Rows | Server-Side Row Model: Adding Data Rows |
| Displaying Big Data | How AdapTable can handle very big data |
| AdapTable Performance | How AdapTable performs when lots is happening |
| Grid Info Panel | Using Grid Info to get overview of all AdapTable objects |
| Providing Custom Holidays | Settings Holidays and Working Days in AdapTable |
| Hot Keys | Using Hot Keys in AdapTable |
| Introducing AdapTable | How AdapTable integrates with - and extends - AG Grid |
| AdapTable Features | Reference Guide to all AdapTable features |
| Auto-Generated Primary Keys | Using Primary Keys dynamically generated by AdapTable |
| Action Columns: Usage | How to define Action Columns |
| Action Columns: Multiple Buttons | Action Columns with multiple Buttons |
| Action Column Commands | Using Action Column Commands |
| Action Column Commands Pinned | Using Action Column Commands |
| Configuring Action Column Commands | Configuring Action Column Command Buttons |
| Action Columns: Defining in AG Grid | Action Columns: Adding AG Grid properties |
| Action Columns: Grouped Rows | Displaying Action Columns in Grouped and Summary Rows |
| Aggregations: Column Headers | Hiding the aggFunc from the Column Header |
| Aggregations: Formatting | Formatting and Styling Aggregations |
| Aggregations: Grand Total Row | Providing a Row showing Total of all Aggregations |
| Aggregations: Grand Total Row Formatting | Formatting Grand Total Rows |
| Aggregations: 'Only' Custom Aggregation | Using the Only Aggregation |
| Using Weighted Averages | Providing Weighted Average Aggregations |
| Alerts: Aggregated Expressions | Alerts fired due to Aggregated Boolean Expressions |
| Events: Alert Fired | Event published when Alerts fire |
| Alerts: Alert Behaviours | Alerts configured with particular Behaviours |
| Alerts: Triggered by Predicates | Alerts fired due to Predicate Rules |
| Alerts: Multiple Predicates | Alerts fired due to Rules with Multiple Predicates |
| Alerts: Boolean Expressions | Alerts fired due to complex Boolean Expressions |
| Adaptable Forms in Alerts | Alerts 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 Buttons | Using Alert Command Buttons |
| Custom Alert Command Buttons | Providing Custom Alert Command Buttons |
| Adaptable Forms in Alerts | Alerts can display an Adaptable Form when triggered |
| Alerts: Observing Row Changes | Observable Alerts fired on Row Changes |
| Alerts: Observing Grid Changes | Observable Alerts fired on Grid Changes |
| Alerts: Observing No Changes | Observable Alerts fired on No Changes |
| Alerts: Relative Any Change | Alerts fired due to Any Change |
| Alerts: Relative Percent Change | Alerts fired due to a Percent Change |
| Alerts: Relative Absolute Change | Alerts fired due to an Absolute Change |
| Alerts: Row Added | Alerts on Rows being Added to AdapTable |
| Alerts: Row Added with WHERE | Observable Alerts fired when Row Added with WHERE clause |
| Alerts: Row Removed | Alerts on Rows being Removed from AdapTable |
| Alerts: Validation Alerts | Alerts which prevent cell edits |
| Calculated Columns: Introducing | Calculated Columns: How they work |
| Calculated Columns: Formatting | Calculated Columns: Adding Formatting |
| Pivotting Calculated Columns | Using Calculated Columns inside Pivot Layouts |
| Calculated Columns: Aggregated | Calculated Columns: Aggregated Scalar Expressions |
| Calculated Columns: Aggregated with GROUP_BY | Calculated Columns: Aggregated, Grouped Scalar Expressions |
| Calculated Columns: Aggregated with Row Grouping | Calculated Columns: Aggregated Scalar Expressions in Row Groups |
| Calculated Columns: Defining in AG Grid | Calculated Columns: Adding AG Grid properties |
| Calculated Columns: Cumulative | Calculated Columns: Cumulative Aggregated Expressions |
| Quantile Calculated Columns | Calculated Columns: Quantile Aggregations |
| Calculated Columns: Referencing | Calculated Columns: Reference other Calc Cols |
| Charts Calculated Column | Charts using Calculated Columns |
| Basic Calculated Columns | Calculated Columns: Basic Standard |
| Calculated Columns: Complex Expressions | Calculated Columns: Complex Expressions |
| Date Picker Customising | Customise the AdapTable Date Picker |
| Date Picker Theming | Theming the AdapTable Date Picker |
| Numeric Cell Editor Params | Numeric Editor with Cell Editor Params |
| Percentage Editor | AdapTable Percentage Editor |
| Percentage Editor Params | Percentage Editor with Cell Editor Params |
| Select Editors | Providing Select Editors to speed up data entry |
| Saving AG Grid Charts | How to leverage AG Grid's Charts in AdapTable |
| Cross Filter Charts | Supporting AG Grid's Cross Filter Charts |
| Chart Locations | Showing AG Grid Charts in different locations |
| Multiple Charts in Location | Showing multiple AG Grid Charts in a Div |
| External Charts Library | Using external charts libraries |
| Saving External Charts | Using external charts libraries with Adaptable State |
| Displaying Saved Charts | Displayed visible Charts when AdapTable restarts |
| Read-Only Charts | Settings Charts to be Read-Only |
| Filters | Basic Filtering using System Predicates |
| Multiple Predicate Filters | Filtering using Multiple Predicates |
| Filter Bar Wildcards | Adding and removing Wildcards in Filter Bar |
| Filter Bar Configuration | Configuring Filters using Filter Options |
| Non-Filterable Rows | Configuring which rows cannot be filtered |
| Column Filter Applied Event | Listening to Column Filter Applied Event |
| Custom Filters | Filtering using user-defined Custom Predicates |
| Custom Filters with Inputs | Creating Custom Filters that receive inputs |
| Custom Filters using Time | Creating Custom Filters will filter on Time |
| Custom Filters accessing Other Columns | Creating Custom Filters that look up values in other Columns |
| In Filter: Values Count | Show a count of each item in In Filter |
| In Filter: Only Visible Values | Only show currently filtered values in In Filter |
| In Filter: Only Visible Values with Count | Only show currently filtered values in In Filter together with a Count |
| In Filter: Showing Raw Value | Show an item's raw value in In Filter |
| In Filter: Custom Label | Show a custom label for In Filter values |
| In Filter: Sorted Values | Sorting values in In Filter |
| In Filter: Ordered Values | Ordering values in In Filter |
| In Filter: Showing a Tooltip | Displaying a tooltip in In Filter |
| In Filter: Adding System Predicates | Add System and Custom Predicates to filtered values in In Filter |
| In Filter: Adding Custom Predicates | Add System and Custom Predicates to filtered values in In Filter |
| In Filter: Date Columns | In Filter showing Dates as a Tree structure |
| In Filter: Suppressing Search | Supressing Search in In Filter (enabling server valuation) |
| Not In Filter | Excluding Column Values from the Filter |
| In Filter: Arrays | The In Predicate with Array Columns |
| In Filter Performance | Using In Filter with very big data |
| In Filter Custom CSS | Using CSS Variables to change In Filter Min & Max Widths |
| Manually Apply Filters | Manually Applying Column Filters |
| System Filters | Configuring System Predicates in Filters |
| Default Predicates for Filters | Setting new default Predicates for Filters |
| Column Formatting | How Column Formatting Works |
| Format Column - Scope | Column Scope in Format Columns |
| Column Formatting: Column Styles | Column Formatting using Adaptable Styles |
| Column Formatting: CSS Classes | Format Column with an external CSS Class |
| Format Column - Conditions | Conditional Rules in Format Columns |
| Format Column - Expression Condition | Expression Conditions in Format Columns |
| Format Column - Predicate Condition | Predicate Conditions in Format Columns |
| Format Column - Multiple Predicate Conditions | Multiple Predicate Conditions in Format Columns |
| Format Column - Referenced Predicate Conditions | Referenced Predicate Conditions in Format Columns |
| Format Column: Custom Predicates | Using Custom Predicates in Format Columns |
| Column Formatting Composition | Merging multiple Format Columns together |
| Column Formatting Precedence Order | Multiple Format Columns are merged according to Precedence |
| Column Formatting - Excluding Rows | Applying Formats only in Grouped Rows |
| Column Formatting: Display Formats | Column Formatting with Display Formats |
| Column Formatting: Format Precedence | Column Formatting with a multiply Display Formats |
| Column Formatting: Custom Formatter | Column Formatting with a Custom Display Formatter |
| Column Formatting: Date Display Formats | Column Formatting with Date Display Formats |
| Column Formatting: Numeric Display Formats | Column Formatting with Numeric Display Formats |
| Column Formatting: String Display Formats | Column Formatting with String Display Formats |
| Column Formatting: Template Literal Display Formats | Column Formatting with Placholder Display Formats |
| Styling & Formatting Column Headers | Formatting and Styling Column Headers |
| Comments in AdapTable | Using Comments |
| Configuring Commentable Cells | Setting which Cells can display Comments |
| Comments CSS | Configuring Comments using CSS variables |
| Comments Date Format | Configuring the format for Comments timestamp |
| Custom Sorts: Values | Providing Custom Sort Initial State |
| Custom Sorts: Functions | Providing Custom Sort Functions |
| Using Data Set Forms | Loading Data in AdapTable with Data Sets |
| Using Data Sets | Loading Data in AdapTable with Data Sets |
| Bulk Update | Updating numerous cells in one operation |
| Bulk Update Validation | Bulk Update validating proposed edits |
| Edit Custom Values | Providing custom values when editing a Column |
| Using Plus/Minus | Nudging numeric cells using custom Plus Minus rules |
| Using Shortcuts | Editing data quickly using custom Shortcuts |
| Shortcuts in Row Forms | Shortcuts are available also in Row Forms |
| Smart Edit | Editing numeric Columns using Smart Edit |
| Smart Edit Custom Operations | Adding bespoke Smart Edit Operations |
| Exporting in AdapTable | Exporting Data from AdapTable |
| Configuring Export | Providing fine-grained control over Export in AdapTable |
| Configuring Report FileNames | Configuring the Names of the Report Files in Export |
| Setting Exportable Columns | Configuring which columns are exportable |
| Skipping Column Headers | Excluding Column Headers from exported Report |
| Configuring System Export Destinations | Configuring which System Export Destinations are available |
| Custom Export Destination via Function | Custom Export Destination: via a Function |
| Custom Export Destination via a Form | Custom Export Destination: via a Form |
| Formatting Report Values | Exporting Data using bespoke formatting rules |
| Formatting Dates in Reports | Exporting data with dates in special format |
| Processing: Creating Reports on Server | Report processing to run report on server |
| Processing: Stopping Export | Report processing to stop Exports |
| Exporting System Reports | Exporting data from AdapTable using System Reports |
| Configuring System Reports | Configuring which System Reports are available |
| Custom Reports | Exporting Data from AdapTable via Custom-created Reports |
| Configuring System Report Formats | Configuring which System Report Formats are available |
| CSV Report Format | Exporting Data from AdapTable in CSV Format |
| Excel Column Type | Exporting to Excel using Excel Column Types (to preserve formatting) |
| JSON Report Format | Exporting Data from AdapTable in JSON Format |
| VisualExcel Report Format Type | Using the VisualExcel Report Format Type for a WYSIWYG export |
| Schedules | Scheduling Reports in AdapTable |
| Flashing Cells | Flashing Cells on Any Change |
| Flashing Cells using a Rule | Flashing Cells when change matches a Rule |
| Changing Flashing Cell Defaults | Changing Flashing Colours and Duration |
| Flashing Rows on Cell Change | Flashing a Whole Row when Cells Change |
| Free Text Columns | Using Free Text Columns in AdapTable |
| Free Text Columns Formatting | Formatting Free Text Columns in AdapTable |
| Applying a Grid Filter | Using AdapTableQL to run Grid Filter |
| Comparing Column values with the Grid Filter | Using Grid Filter to compare values in 2 Columns |
| Grid Filter and Column Filters | Applying a Grid Filter with Column Filters |
| Grid Filter with Query Builder only | Grid Filter: Setting which UI Components are available |
| Column Groups | Using Column Grouping in AdapTable |
| Column Groups with Special Columns | Column Groups containing Calculated, FreeText or Action Columns |
| Column Groups: Expanded and Collapsed | Setting Column Groups to be Expanded or Collapsed |
| Column Groups: Expanded and Collapsed | Setting Column Groups to be Expanded or Collapsed |
| Row Grouping: Basics | Configuring Row Groups in AdapTable |
| Row Grouping: Multiple Columns | Displaying each Row Group in its own Column |
| Row Grouping: Positioning Single | Positioning Single Row Groups in AdapTable |
| Row Grouping: Positioning Multiple | Positioning Multiple Row Groups in AdapTable |
| Row Grouping: Pinning Single Row Group | Pinning Single Row Grouped Columns in AdapTable |
| Row Grouping: Pinning Multiple Row Groups | Pinning Multiple Row Grouped Columns in AdapTable |
| Row Grouping: Sizing Row Group Column | Sizing Row Grouped Columns in AdapTable |
| Row Grouping: Setting Default Behaviour | Default Row Group Behaviour |
| Row Grouping Behaviour: Single Row Grouping | Setting and Saving Expanded Single Row Groups |
| Row Grouping Behaviour: Multiple Row Grouping | Setting and Saving Expanded Multiple Row Groups |
| Row Grouping Behaviour: Display Type Multi | Setting and Saving Expanded Row Groups with DisplayType of Multi |
| Row Grouping Behaviour: Pivot Layouts | Setting and Saving Expanded Row Groups in Pivot Layouts |
| Row Grouping: Filtering Single RowGroupDisplayType | Filtering Row Grouped Columns with Display Type Single |
| Row Grouping: Existing Filters | Filtering Row Grouped Columns on Columns with existing Column Filters |
| Row Grouping: Setting Row Grouped Column Filter | Setting Filter for the Row Grouped Column |
| Row Grouping: Filtering with Field | Setting Filter for the Row Grouped Column when Field is set |
| Row Grouping: Filtering Multi RowGroupDisplayType | Filtering Row Grouped Columns with Display Type Multi |
| Row Grouping: Formatting Single | Formatting Row Grouped Columns |
| Row Grouping: Formatting Multi | Formatting Multiple Row Grouped Columns |
| Row Grouping: Conditional Styles | Providing Conditional Styling for Row Grouped Columns |
| Row Grouping: Styling Whole Grouped Row | Providing Conditional Styling for entire Row Grouped Column Row |
| Grouped Rows: Format Columns | Using Format Columns in Grouped Rows |
| Grouped Rows: Badge Styles | Using Badge Styled Columns in Grouped Rows |
| Row Grouping: Action Columns in Grouped Rows | Adding Action Columns in Grouped Rows created by Row Grouped Columns |
| Row Grouping: Sorting | Sorting Row Groups in AdapTable |
| Highlighting Cells and Rows | Using Grid API to highlight cells and rows in AdapTable |
| Jumping to Cells and Rows | Using Grid API to move focus to given Cells, Rows & Columns |
| Data Import - Update Rows | Updating Data using Data Import |
| Data Import - Add Rows | Adding New Rows using Data Import |
| Data Import - Adding all data | Adding All Data using Data Import |
| Data Import - Matching Columns | Data Import with Column Matching |
| Data Import - Validation | Validating Data in Data Import |
| Data Import - Custom CSV File Handler | Custom file handlers. |
| Basic Layout | Using Layouts in AdapTable |
| Default Creation Props | Providing Default Creation Props in Layout Options |
| Default Layout Props | Providing Default Layout Properties via State Functions |
| Extended Layouts | Extending Layouts by using Tags to limit Scope |
| Sharing Extended Layouts | Sharing an Extended Layout |
| Cloning Extended Layouts | Cloning an Extended Layout |
| Layouts With Metadata | Adding MetaData to Layouts |
| Layout Changed | Event triggered when the Layout is changed |
| Pivot Layouts | Creating Pivot Layouts In AdapTable |
| Pivot Layouts - Expand Cells | Opening a Pivot Cell to see full contents in Table View |
| Pivot Column Groups: Expanded Collapsed | Configuring Expanded Collapsed Behaviour for Pivot Column Groups |
| Expanding Pivot Columns | Pivot Layout with Expanded Pivot Columns configured |
| Pivot Aggregation Layouts | Pivot Layout with Agg Columns |
| Pivot: Column Filtering | Applying Column Filtering when Pivoting |
| Pivot Result Columns: Filtering | Applying Column Filtering in Pivot Result Columns |
| Pivot - Formatting Aggregation Columns | Adding Styles and Column Formatting to Pivot Aggregation Columns |
| Pivot - Formatting Result Columns | Applying Column Formatting and Styling to Pivot Result Columns |
| Pivot - Formatting Row Groups | Applying Column Formatting and Styling to Pivot Row Grouping Columns |
| Excluding formatting from Pivot Layouts | Ensuring Styles are excluded from Pivot Layouts |
| Pivot Result Columns | Using Pivot Result Columns |
| Pivot Aggregation Columns: Widths | Setting & Saving Column Widths of Pivot Aggregation Columns |
| Pivot Result Columns: Widths | Setting & Saving Column Widths of Pivot Result Columns |
| Pivot Sorting: Aggregation Columns | Setting & Saving Column Sorting for Pivot Aggregation Columns |
| Pivot Sorting: Pivot Result Columns | Setting & Saving Column Sorting for Pivot Result Columns |
| Pivot Sorting: Custom Sorts | Using Custom Sorts in Pivot Layout |
| Pivot Grand Totals | Pivot Grand Total Columns |
| Pivot Column Totals | Pivot Column Totals |
| Pivot Aggregation Totals Layout | Pivot Aggregation Total Columns per Layout |
| Pivot Aggregation Totals Pivot Column | Pivot Aggregation Total Columns per Pivot Column |
| Total Columns Formatting Inheritance | Formatting Pivot Aggregation Total Columns |
| Total Columns Formatting Column Types | Formatting Pivot Aggregation Total Columns |
| Formatting Pivot Column Totals | Formatting Pivot Column Groups Expanded / Collapsed |
| Totals Columns Customising Header | Configuring Headers for Pivot Total Columns |
| Updating Pivot Total Columns | Updating Pivot Total Columns at runtime via api |
| Manually Saving Layouts | Non-auto saving of Layouts |
| Synchronising Layouts | Using Layout Changed Event to synchronise between Layouts |
| Table Layouts | Creating Table Layouts |
| Table Layouts: Column Headers | Creating Table Layouts with custom Column Headers |
| Table Layouts: Column Order | Creating Table Layouts with default Column Order |
| Table Layouts: Column Sizing | Creating Table Layouts with custom Column Widths & Flex |
| Table Layouts: ColDef Widths | Creating Table Layouts with custom ColDef Widths |
| Table Layouts: Column Visibility | Creating Table Layouts with custom Column Visibility |
| Table Layouts: Column Pinning | Creating Table Layouts with Column Pinning |
| Table Layouts: ColDef Pinning | Creating Table Layouts with custom ColDef Pinning |
| Table Layouts: Sorting | Creating Table Layouts with Column Sorting |
| Sorting on Invisible Columns | Sorting the Grid using Hidden Columns |
| Updating Layouts Programatically | Updating Layout using the updateLayout api function |
| Setting Cell Values | Using Grid API to set individual cell values |
| Row Changed Events | Events triggered when Rows are added or deleted |
| Cell Changed Event | Event triggered when Cells are edited |
| Loading Grid Data | Loading data in AG Grid and AdapTable at run-time |
| Delaying Grid Data | Adding extra columns after AG Grid has loaded |
| Adding Row Data | Adding Rows to AG Grid at run-time |
| Deleting Row Data | Deleting Rows from AG Grid at run-time |
| Managing Row Data | Managing AG Grid Rows at run-time |
| Updating Row Data | Updating Rows in AG Grid at run-time |
| Master Detail | Using the Master Detail Plugin |
| Master Detail - Detail Init | Initialising the Detail Grids |
| Data Change History | Seeing editing activing in Data Change History |
| Data Change History: Button Actions | Using Undo and Clear Actions in Data Change History |
| Data Change History: Undo Button | Extending Data Change history with Undo Buttons |
| Data Change History: Limiting Changes | Setting which edits will display in Data Change History |
| Data Change History: Showing all Changes | Setting Data Change History to show all the changes made to each Cell |
| Named Queries | Defining and Saving "Named Queries" for Re-Use |
| Referencing Named Queries | Referencing Named Queries by using the QUERY keyword |
| AdapTable No Code | Using the AdapTable No Code Plugin |
| AdapTable No Code Data Source | Providing a Custom Data Source step to No Code Wizard |
| Notes in AdapTable | Adding Notes to cells |
| Configuring Notable Cells | Setting which Cells can display Notes |
| Notes CSS | Configuring Notes using CSS variables |
| Entitlements: Default Access Level | Providing a default Entitlement with a value |
| Entitlements: By List | Managing Entitlements through a 'hard-coded' list |
| Entitlements: By Function | Managing Entitlements through a JavaScript function |
| Entitlements: ReadOnly Objects | Permissioning invididual objects to be ReadOnly |
| Quick Search | Running Quick Search in AdapTable |
| Quick Search as Filter | Quick Search: Filtering Results |
| Customising Quick Search as Filter | Quick Search: Filtering Results using Custom Evaluation |
| Quick Search Raw Value | Running Quick Search using the Cell's Raw Value |
| Bespoke Quick Search | Providing a bespoke Quick Search implementation |
| Quick Search Exclude Cells | Excluding Cells from Quick Search |
| Quick Search Placeholder | Changing Quick Search Placeholder |
| Floating Quick Search | Using Floating Quick Search in AdapTable |
| Quick Search Matching Styles | Setting Quick Search Matching Styles |
| Reminders | Setting up Reminders in AdapTable |
| Row Forms | Displays Action Row Buttons |
| Row Form Events | Listening to the Row Form Submitted Event |
| Row Form Config | Configuring a Row Form |
| Cell Selection | Selecting Cells in AdapTable |
| Row Selection | Selecting Rows in AdapTable |
| Checkbox Selection | Using AG Grid Checkbox Selection in AdapTable |
| Selecting Cell Ranges | Selecting Ranges using Adaptable API |
| Selecting using Expressions | Selecting cells using Expressions |
| Selecting Columns | Selecting Columns using Adaptable API |
| Selecting Rows | Selecting Rows using Adaptable API |
| Selecting whole Grid | Selecting all Cells using Adaptable API |
| Badge Styled Columns | Displaying Badge Styles |
| Badge Styles: Multiple Rules | Styling Badges with Multiple Rules (per Predicate) |
| Badge Styles: Custom Icons | Showing Custom Icons in Badges |
| Badge Styles: Only Icons | Showing Only Icons (and no text) in Badges |
| Badge Styles: Arrays | Badge Styles in Array Columns |
| Badge Styles: Custom Predicates | Badge Styles using Custom Predicates |
| Gradient Style | Using Gradient Style |
| Gradient Style: reversed | Gradient Style Reversed |
| Gradient Style: Column Comparison | Gradient Style using Column Comparison |
| Gradient Style: Formatting | Gradient Style using Column Comparison |
| Styled Columns | Styled Columns in AdapTable |
| Percent Bar: Numeric Ranges | Percent Bars using Numeric Ranges |
| Percent Bar: Percentage Ranges | Percent Bars using Percentage Ranges |
| Percent Bar: Column Comparisons | Percent Bars Using Column Comparisons |
| Percent Bar: Cell Properties | Percent Bars with Back Colour, Cell Text and Tool Tip |
| Styled Column: Sparkline | Styled Columns showing Basic Sparklines |
| Styled Column: Sparkline Advanced | Styled Columns showing Complex Sparklines |
| Sparkline Columns: Calculated | Sparkline Columns: Inside Calculated Columns |
| Summarising Grid Data | Summarising Grid Data in AdapTable |
| Cell Summary | Summarising selected cells |
| Summarising Pivot Cells | Cell Summary in Pivot Layouts |
| Custom Cell Summaries | Providing Custom Cell Summaries |
| Cell Summary Formatting | Formatting Cell Summary values |
| Cell Summary Ticking Data | Cell Summary values automatic updates |
| Row Summary | Displaying Row Summaries |
| Formatted Row Summary | Formatting Row Summaries |
| Filtered Row Summary | Row Summaries with Filters |
| System Status | Sending and Displaying System Status Messages |
| System Status | Configuring System Status Messages |
| Team Sharing | Basic Team Sharing |
| Team Sharing with Multiple Teams | Team Sharing between multiple teams of users |
| Active Team Sharing | Active Team Sharing |
| Configuring and customizing state management | Configuring and customizing TeamSharing State Management |
| Team Sharing Admin and User | A user is an admin and can share entities, and one is a normal user that can only apply shared entities. |
| Team Sharing with Custom Objects | Using Team Sharing to share bespoke data |
| Referenced Team Sharing: Adaptable Objects | Team Sharing with Adaptable Objects |
| Referenced Team Sharing: Layouts | Team Sharing Layouts with Special Columns |
| Referenced Team Sharing: Extended Layouts | Team Sharing with Extended Layouts with Tagged Objects |
| OS Theme | Using OS Theme in AdapTable |
| Light Theme | Using Themes in AdapTable |
| Wizard Theme | Theming the AdapTable UI Wizard |
| AG Grid Themes | Using AG Grid's Quartz Theme in AdapTable |
| AG Grid Custom Theme | Creates a custom AG Grid theme and pairs it with AdapTable's `Dark` theme. |
| Custom Theme | Providing a Custom Theme in AdapTable |
| Transposing the Grid | Show a Grid in Transposed View |
| Transposing: Configuring Columns | Select which Columns are transposed in Transposed View |
| Transposing: Configuring Rows | Select which Rows are transposed in Transposed View |
| Transposing the Grid | Display Transposed View in custom location |
| Tree Data Formatting | Adding Format Columns to Tree Data in AdapTable |
| Tree Data Quick Search | Using Quick Search with Tree Data |
| Tree Data Column Filtering | Using Column Filters with Tree Data |
| Tree Data Pinning | Pinning Key Column in Tree Grid |
| Tree Data Sizing | Setting width of Key Column in Tree Grid |
| Tree Data Sorting | Sorting the Key Column in Tree Grid |
| Data Validation | Performing Data Validation with a Prevent Edit Alert |
| Client Data Validation | Performing Client Data Validation with a Prevent Edit Alert |
| Editable Cells | Setting particular cells in AdapTable to be editable |
| Server Validation | Performing Server Validation |
| Using the useAdaptableState and useCurrentLayout hooks | Using the `useAdaptableState` and `useCurrentLayout` hooks |
| Custom React Toolbars with state from context | Using React state in Custom Components |
| React Components as Custom Windows | Providing React Components as Custom Windows |
| React Components as Progress Indicators | Providing React Components as Progress Indicators |
| React Components as Custom Settings Panel | Providing React Components as Custom Settings Panel |
| React Components as Custom Tool Panels | Providing React Components as Custom Tool Panels |
| React Components as Custom Toolbars | Providing React Components as Custom Toolbars |
| Passing Component State in AdaptableOptions | Passing Component State in AdaptableOptions (React) |
| No Code Adapter for AdapTable React | No Code Adapter for AdapTable React Wrapper |
| Column Menu: Reordering Menu Items | Reordering items in the AdapTable Column Menu |
| Column Menu: Restructuring Menu Items | Restructuring Items in AdapTable Column Menu |
| Column Menu: Removing Menu Items | Removing Items in AdapTable Column Menu |
| Column Menu: Row Group Columns | Managing Row Group Items in AdapTable Column Menu |
| Column Menu: Custom Menu Items | Adding Custom Menu Items to Column Menus |
| Context Menu: Reordering Menu Items | Reordering items in the AdapTable Context Menu |
| Context Menu: Restructuring Menu Items | Restructuring Items in AdapTable Context Menu |
| Context Menu: Removing Menu Items | Removing Items in AdapTable Context Menu |
| Context Menu: Row Group Columns | Managing Row Group Items in AdapTable Context Menu |
| Context Menu: Custom Menu Items | Adding Custom Menu Items to Context Menus |
| Dashboard: Overview | Using the AdapTable Dashboard |
| Dashboard: Module Buttons | Displaying Module Buttons in the Dashboard |
| Dashboard: Custom Buttons | Displaying Custom Buttons in the Dashboard |
| Dashboard: Configuring | Configuring the AdapTable Dashboard |
| Dashboard: Stacking Toolbars | Stacking Toolbars in the Dashboard |
| Custom Toolbar: Using Buttons | Providing Custom Toolbars with AdapTable Buttons |
| Custom Toolbar: Automating Buttons | Custom Toolbars with dynamic AdapTable Buttons |
| Custom Toolbars: Bespoke Content | Providing bespoke content in a Custom Toolbar |
| Dashboard: Inline Mode | Showing Dashboard in Inline Mode |
| Dashboard; Collapsed Mode | Showing Dashboard in Collapsed Mode |
| Dashboard: Floating Mode | Showing Dashboard in Floating Mode |
| Dashboard: Hiding | Hiding the Dashboard altogether |
| Dashboard: Tabs & Toolbars | Providing Tabs and Module Toolbars in the Dashboard |
| Dashboard: Pinned Toolbars | Using Pinned Toolbars |
| AdapTableQL Expression Editor | How to use the Expression Editor in AdapTable |
| AdapTableQL Query Builder | Using Expression Query Builder |
| Settings Panel | Settings Panel: Using it in AdapTable |
| Setting Items in Settings Panel | Settings Panel: Setting order & visibility of Items |
| Customising the Settings Panel | Settings Panel: Configuring for personal requirements |
| Adding a Custom Settings Panel | Settings Panel: Adding Custom Panel |
| AdapTable Status Bar | Using the Status Bar in AdapTable |
| AdapTable and AG Grid Status Bars | Integrating AdapTable & AG Grid Status Bars |
| Status Bar replacing Dashboard | Using the Status Bar to replace the Dashboard |
| AdapTable Tool Panel: Introduction | Introducing the AdapTable Tool Panel Component |
| AdapTable Tool Panel: Configuration | Configuring the AdapTable Tool Panel Component |
| ToolPanel Module Buttons | Module Buttons in AdapTable ToolPanel |
| ToolPanel Custom Buttons | Custom Buttons in AdapTable ToolPanel |
| Custom ToolPanel | Providing Custom ToolPanels |
| Module ToolPanels | Configuring Module ToolPanels |
| Using US English | Setting English Variant to US (in place of default GB) |
| Configuring Loading Screen | Providing custom properties to loading screen |
| System Adaptable Icons | Leveraging System Icons in AdapTable |
| Custom Adaptable Icons | How to use Custom Icons in Adaptable Buttons |
| Element Icons | Providing Element Icons |
| Application Icon | Providing an Application Icon |
| Styling Editable Cells | Styling the Editable Grid Cells in AdapTable |
| Styling Read-Only Cells | Styling the Read-Only Grid Cells in AdapTable |
| Styling Edited Cells | Styling the Edited Grid Cells in AdapTable |
| Hiding AdapTable UI from Users | How to hide / show the AdapTable UI |
| Hiding AdapTable Mentions from Users | How to ensure users are unaware AdapTable is being used |
| Displaying a Progress Indicator | Display a Progress Indicator |
| Adaptable Style: Color Picker | Setting Colours for the AdapTable Style |
| Adaptable Style: Custom Palette | Providing Custom Colours for AdapTable Style Palette |
| Creating a Custom Window | Displaying a Custom Window |
| Notifications in AdapTable | Keeping end users notified and updated |
| Toast Notifications | Configuring Toast Notifications |
| Vue Components as Custom Windows | Providing Vue Components as Custom Windows |
| Vue Components as Progress Indicators | Providing Vue Components as Progress Indicators |
| Vue Components as Custom Settings Panel | Providing Vue Components as Custom Settings Panel |
| Vue Components as Custom Tool Panels | Providing Vue Components as Custom Tool Panels |
| Vue Components as Custom Toolbars | Providing Vue Components as Custom Toolbars |