Theming AdapTable

You can theme (ie. set up the look and feel of) AdapTable entirely through CSS variables.

You are able to change the font and entire colour scheme by setting just a few main properties.

And if you want to get more detailed then you can change the details of every control that AdapTable provides (e.g. make buttons rounded)

AdapTable provides out of the box 2 themes - a Dark Theme and a Light Theme. Choosing either of these 2 themes will - depending on your Adaptable Options - also update the underlying vendor grid.

You can change pretty much any aspect of the UI that we provide. For instance you can replace the icons that we show in the toolbars with your own. We have a demo that shows you how.

  • Dark Theme: See AdapTable using the shipped Dark Theme. When you use this theme AdapTable will automatically update the underlying vendor grid to match.
  • Custom Theme: See AdapTable using a custom theme (based on Wimbledon tennis colours).
  • Custom Icons: You can provide your own icons to AdapTable to use in place of the defaults - this demo shows how.
  • CSS Theme: Use CSS to control how AdapTable wizards and toolbars appear.
  • Date Picker: Theme (and configure) the Date Picker to meet your precise styling requirements
  • Alpine Theme: Showing AG Grid (in AdapTable) with the new Alpine theme introduced in Version 23.
Dark Theme Demo
Custom Theme Demo
Custom Icons Demo
CSS Theme Demo
Date Picker Demo
Alpine Theme Demo