Version 22.0 Release Note

AdapTable 22.0 is a major version release.

The release contains a number of user-requested enhancements and improvements, primarily to:

• AdapTable's User Interface through the introduction of tailwind and css layers
• Layouts which offer improved support for Extended Layouts and Pivot Result Columns
• Action Columns can display Action Commands for frequent row based actions
• AdapTable React which contains 3 new custom hooks

Importing AdapTable Types

• All AdapTable types are now imported from a single location (this was previously 2 separate locations)

  Caution

  • The file location itself varies, based on which AdapTable framework version is being used
  • Each framework version requires different objects to be imported, so please read the relevant integration notes

Angular Version

• The minimum Angular Version now supported is 18

Object Name Property

• All AdapTable objects stored in Initial Adaptable State now contain a mandatory Name property

• This allows developers easily to uniquely identify each object created (e.g. Format Column, or Alert etc.)

  Hint

  • AdapTable's Upgrade Helper will automatically autogenerate a value for the Name property if one is missing
  • If required, these can then be adjusted by run-time users in the relevant UI wizard

  Note

  • Objects like Layouts which already have a Name property have been left unchanged
  • Other objects, e.g. Calculated Columns, which have a FriendlyName property have also not been changed

Layout Changes

• The Layout Editor has been enhanced so its easier to identify and update Column properties

• The order of (the dynamically created) Pivot Result Columns can now be stored in AdapTable State

• 3 new functions added to Layout API to set, clone and fetch Extended Layouts

• A new only aggregation has been added, which will display in Grouped Rows

Other Changes

• Action Column Commands are now available in Action Columns; these are buttons designed to make it very straightforward to display Add or Edit Row Forms or to delete rows

• Column Filtering performance has been substantially improved

• Alignment has been added to the Adaptable Style object (was previously only in Format Column)

• Containers can be provided using a function if required

• New User Interface API functions to enable toggling visibility of AdapTable UI (i.e. Dashboard, Tool Panel, Status Panels, Status Bar, Menus etc)

• Highlighting has been extended to include Columns

• New manageGridData GridApi function allows rows to be added, updated and deleted in a single transaction

• Custom Tracks added to the DevTools Chrome Profiler

React Hooks

• AdapTable 22.0 has added 3 custom React hooks for users of AdapTable React:
  • useAdaptableState
  • useCurrentLayout
  • useAdaptableApi

UI Changes

• AdapTable 22.0 contains signficant User Interface related changes, including new css layers, using tailwind internally, and removing many redundant CSS Variables

• These are designed to improve the look and feel, themability and extensibility of the Adaptable UI

New index.css file

• The key css class which you must import is index.css (in place of base.css as was required previously)
• The location of the index.css file varies, depending on which AdapTable framework version is being used:

Theme-related css files

• You no longer need to import themes/light.css as this is now included in index.css
• However, to use the dark theme, you still need to import themes/dark.css

  Caution

  The index.css file is always required if even if you only intend to use the dark theme

CSS layers

• The AdapTable CSS is now nested into a CSS layer called adaptable

  Find Out More

  For more insight on CSS layers read this MDN page

• If you don't use CSS layers, nothing is required, as layers have a lower precedence to global-scoped CSS

• This will help you more easily to override Adaptable styles (avoiding more nested/complex selectors)

  Important

  • If you do use CSS layers, please ensure to put adaptable before your app layer
  • This will allow your application more easily to override Adaptable styles

  @layer adaptable, app, theme;

  Note

  Its now much easier to override default Adaptable styles, since the adaptable layer gives our css lower priority.

  Previous to AdapTable 22, this rule didn't have the expected result:

  .ab-Dialog__close-button {
    padding: 6px;
  }

  You had to make it stronger, either making the selector more complex:

  .ab-Dialog__close-button.ab-Dialog__close-button {
    padding: 6px;
  }

  or by adding !important:

  .ab-Dialog__close-button {
    padding: 6px !important;
  }

  Now the rule will work fine without anything else required.

Tailwind

• Version 22 introduces a prefixed Tailwind build for our internal styling & classes

• For non Tailwind users, nothing has changed or is different (as its purely for internal use)

• For existing Tailwind users this won't clash with your current styles or changes made in your tailwind setup

  Note

  This is because we use the twa: prefix, to avoid our class names colliding with other classes in your application

New CSS Variables

• 13 new CSS Variables have been added:

CSS Changes to Spacing

• All CSS spacing is now derived from --ab-base-space: 4px using calc().
• As a result 8 CSS spacing variables have been removed and are replaced with a calculation:

.mybox {
  padding: var(--ab-space-2);
  margin: var(--ab-space-3);
}

.mybox {
  padding: calc(var(--ab-base-space) * 2);
  margin: calc(var(--ab-base-space) * 4);
}

Removed CSS Variables

• Many CSS Variables (nearly 100) have been removed as they are no longer required
• All the CSS Variables for these components have been removed:
  • Dialog
  • HelpBox
  • ErrorBox
  • WarningBox
  • CodeBlock
  • ListGroup / ListGroupItem
  • QuickFilter
  • OnePageWizard
  • ExpressionEditor
  • ModuleSelector
  • Misc

Change Log