Aqua Basis

The AqTable component is a highly customizable and functional table component from the Aqua Design System. Designed with flexibility in mind, it supports a wide range of configurations, enabling developers to adapt its behavior to diverse use cases — from simple data displays to complex, interactive data grids.

With support for features such as column reordering, virtual scrolling, custom cell rendering, and dynamic behaviors, AqTable empowers teams to build scalable and performant interfaces while maintaining full control over the user experience.

<aq-table mode="SERVER_SIDE" has-header id="my-table-ssr">
  <aq-button slot="header-left" is-outline>A button slot</aq-subheading>
  <aq-button slot="header-right" is-outline> Loading </aq-button>
</aq-table>

Props and Attributes

Prop / Attr	Type	Default	Description
`columns`	`array<[AqColumn](<https://masivapp.notion.site/AqTable-2241de3976b980b09454fdcf75919924>)>`	`[]`	Determine the columns configuration
`data`	`array<any>`	`[]`	Set the data table data.
`config`	`object<[*ITableConfig*](<https://masivapp.notion.site/Interfaces-2321de3976b98010b257e3197e95fb0f>)>`	`TABLE_CONFIG`	Set the table configuration behaviour
`hasHeader`	`boolean`	`false`	Determine if will have header
`hasPagination`	`boolean`	`true`	Determine if will have pagination
`loading`	`boolean`	`false`	Shows a loading state.
`loadingCustomQueryFilter`	`(query: string) ⇒ void`	`undefined`	Set the global filter behaviour.

PlayGround

You can interact with the component and experiment with its attributes and properties directly in this playground.

In the Code tab, the generated code snippet is available.

In addition to the interactive examples in this documentation, you can explore the full playground with all supported options and advanced configurations at the following link:

👉 Open full playground

https://aqua-ds-playground.masivianlabs.com/doc-storybook/index.html?path=/story/components-data-aqtable--default&nav=0

<aside> ⚠️

Important: The code shown is in Web Component format. If you are using a specific framework (Vue, React, Angular), you must adapt it to the framework’s conventions before using it.

</aside>

Data types

These constants provide default icon configurations for the AqTable component.

They ensure consistency across different use cases and reduce the need to repeatedly define UI behavior when handling input interactions.

Interfaces

A comprehensive overview of the interfaces that shape the complex data types used by AqTable. These definitions are crucial for proper configuration and seamless integration of the component.

Interfaces

Enums

Explore the fundamental data types used by key AqTable props. These serve as building blocks for various configurations and are essential for predictable component behavior.

Enums

Constants

Familiarity with AqTable’s default data is essential for understanding its baseline behavior and how it responds when no custom configurations are provided.

Constants

Events

Event	Description	React	Angular	Vue	Vanilla
`pinChange`	Triggered when any column is pinned.	`onPinChange={handlePinChange}`	`(pinChange)="handlePinChange($event)"`	`@pinChange="handlePinChange"`	`addEventListener('pinChange', handler)`
`sortChange`	Triggered when any column is sorted.	`onSortChange={handleSortChange}`	`(sortChange)="handleSortChange($event)"`	`@sortChange="handleSortChange"`	`addEventListener('sortChange', handler)`
`sizeChange`	Triggered when any column is resized.	`onSizeChange={handleSizeChange}`	`(sizeChange)="handleSizeChange($event)"`	`@sizeChange="handleSizeChange"`	`addEventListener('sizeChange', handler)`

Event Types

Event	React/Angular/Vue
`pinChange`	`(e:CustomEvent<{id:string; value:boolean}>)`
`sortChange`	`(e:CustomEvent<{id:string; value:string}>)`
`sizeChange`	`(e:CustomEvent<{id:string; value:number}>)`

Slots

Currently the table give the possibility to use slots only in the header and toolbar

Features