Dashboard

The AdapTable Dashboard enables quick & easy access to core AdapTable functionality.

It is designed to be extremely flexible and configurable, able to meet all user requirements.

The Dashboard contains buttons, dropdowns, info panels and custom widgets.

It also offers Tabs functionality.

Dashboard Locations

The AdapTable Dashboard consists of 4 separate areas surrounding the DataGrid: top left right and bottom.

Each Location renders Widgets differently based on its position and the widget type.

Dashboard Bar and Tab Drawer

Each Dashboard Location has 2 parts:

• Dashboard Bar - a strip of small widgets (e.g. Buttons, Dropdowns and Text) which is always visible
• Tab Drawer - a separate section which is rendered when a Tab is opened, displaying the Widgets it contains

Dashboard Widgets

The building blocks of the AdapTable Dashboard UI are widgets.

Widgets are, essentially, small components that can render almost anything, and they can be:

• System Widgets - shipped with AdapTable and available for immediate use
• Custom Widgets - defined and provided by developers

System Widgets

System Widgets are provided by AdapTable and ship with the product.

They can be conceptually divided into 2 groups:

• Module Specific (e.g. change the Theme, run Quick Search, select a View)

  Note

  • All AdapTable Modules have a corresponding Dashboard Widget which provides Module-specific behaviour
  • Some facilitate specific grid actions while others simply contain a button to the relevant section in the Settings Panel

• General Purpose (e.g. Row Count, Application Name)

Each System Widget will render differently, based on its type, and also the location in which it is placed.

The full list of System Widgets - and associated rendering behaviours - is as follows:

{
  id: 'the app name',
  type: 'application-name',
  align: 'center',
}

{
  id: 'the row count',
  type: 'row-count',
  align: 'left',
}

{
  id: 'the column chooser',
  type: 'column-chooser',
}

Tabs

The tabs Widget is a special control used in a similar way to the Microsoft Office ribbon.

A Tabs widget can contain any number of Tabs, each of which can include any number of widgets.

The name of each Tab in the Tabs Widget appears in a Dashboard Bar

When the name is clicked, the Tab opens (or closes) and its contents widgets are rendered in a Tab Drawer.

{
 id: 'ribbon',
 type: 'ribbon',
 value: {
    openTabName: 'App',
    tabs: [
      {
        name: 'App',
        widgets: [{ id: 'view-widget', type: 'view'}, { id: 'theme-widget', type: 'theme' }]
      },
      {
        name: 'Actions',
        widgets: [{ id: 'export-widget', type: 'export'}]
      },
    ]
 }
}

Button

The button Widget displays the very flexible and configurable AdapTable Button.

Info Text

The info Widget simply displays custom text that was defined by Developers.

Custom Widgets

These can be defined in two ways, in line with custom-content or inside dashboard.customWidgets, and referenced in the custom.

The custom widgets are widgets that are defined by the developer. The widget will be rendered with the following props object, which has all the information the widget might need:

WidgetProps: {
  api: AdaptableApi;

  // Information about the dashboard section (all widget, size)
  section: DashboardSection;

  // Where the dashboard is located (top, bottom, left, right)
  sectionPosition: DashboardPosition;

  // Where in the dashboard is the widget located
  // 'dashboard-drawer' | 'dashboard-bar'
  location: WidgetLocation;
  orientation: "vertical" | "horizontal";
}

// Inline widget

widgets = [{
  id: 'custom-content-1',
  type: 'custom-content',
  value: (widgetProps) => <>ANY VALID JSX <CustomComponent /></>,
 }
]

// Custom widget and reference

dashboard.customWidgets = {
 customWidget: (widgetProps) => <b>Custom Widget Content</b>
}
widgets = [{
  id: 'custom-reference-widget',
  type: 'custom',
  value: 'customWidget', // key from customWidgets (see above)
}]

Using the Dashboard UI

TO DO

Custom content can be moved from section to section in a location but cannot be removed from the location (or placed in other locations) The info Widget simply displays custom text that was provided.

Info

{
  id: "info",
  type: "info",
  value: "Custom Text"
}