Aqua DS - Component Library

Quick Start

Framework Implementation

WebComponents

Vue 3

React

Angular

Components

Data Types

Directives

Style Customization

Theming

Custom Styles

Icons

FAQ

Aqua Basis

Aqua Composition

AqTable Interfaces

This section documents the core interfaces that shape the configuration and behavior of AqTable. These TypeScript definitions extend the native capabilities of the TanStack Table API, enabling deeper control over layout, interaction, and rendering.

AqColumn

Interface that will determine the functionality and characteristics of each column.

{
	accessorKey: string,
  header: string,
  size: number,
	meta: {
	  icon?: string;
	  pinned?: boolean;
	  tooltip?: string;
	  label?: string;
	  sort?: [SORT](<https://masivapp.notion.site/Enums-2321de3976b98071928ad09b5de81605>);
	  reorder?: boolean;
	  aligment?: [IAligment](<https://masivapp.notion.site/Interfaces-2321de3976b98010b257e3197e95fb0f>);
	  formatter?: ({ value, data }: { value: any, data: Row<RowData> }) =>
		  string | HTMLElement;
	}
}

Column

Key Description Example
accesorKey Obligatory field to create an unique id. “price”
header Obligatory field to define the column name, but not is reactive to internalization cases “Price”
size Determine the column size, in case of not add automatically get the 100% of the width 150

Meta

Key Description Example
icon Set an icon at the left of the cell “aq-icon-email”
pinned Set if the column will be pinned false
tooltip Enable a info icon that will show the message “This is a tooltip”
label Set a label that could be reactive “Price”
sort Set the sort status of the column SORT.ASC
reorder Enable or disable the reorder column feature true
aligment Set the column cells aligments `{
content: ALIGMENT.LEFT
}`
formatter Set a formatter if the developer need change the way to diplay the information.

To know more about the formatter posibilities go to: Cell Formatter | *(val) => { return <aq-badge status="${val ? 'success' : 'danger'}">${val ? 'Yes' : 'No'}</aq-badge>; }* |

ITableConfig

Interface that will set the global characteristics of the table, could enable or disable other characteristics at global level and modify the table header.

{
  state: Partial<TableState>;
  udpate?: () => void;
  errorValue?: string;
  title?: string;
  titleTooltip?: string;
  titleIcon?: string;
  height?: number;
  enablePin?: boolean;
  enableTooltip?: boolean;
  enableSort?: boolean;
  enableReorder?: boolean;
  enableResize?: boolean;
  requestData?: (data: [IRequestParam](<https://masivapp.notion.site/Interfaces-2321de3976b98010b257e3197e95fb0f>)) => Promise<[IRequestData](<https://masivapp.notion.site/Interfaces-2321de3976b98010b257e3197e95fb0f>)>;
  rowAutoGrown?: boolean;
}
Key Description Example
errorValue Message to show then the table fail or doesn’t have additional data “No data availible”
title If the field is empty, the title not be displayed “Table title”
titleTooltip Set a info icon at the right of the title and put a message inside it. “This is a tooltip”
titleIcon Set a icon at the left of the title “aq-icon-table”
height Set the table height 500
enablePin Enable or disable the pin table feature true
enableTooltip Enable or disable the pin table feature true
enableSort Enable or disable the pin table feature true
enableReorder Enable or disable the pin table feature true
enableResize Enable or disable the pin table feature true
requestData Set the function that will be triggered each time the table change any data of the pagination, sort of the query changes.

To know more about the params or how send the data to the table, go to: Request Data Interface | *requestData*: *data =>* { const query = { keyword: data.filter, pageSize: data.perPage, pageNumber: data.page, }; tableSSR.loading = true; return fetch( https://rickandmortyapi.com/api/character/?page=${query.pageNumber}&status=${query.keyword} ).then(async response => { const responseData = await response.json(); return { data: responseData.results, count: responseData.info.count }; }).finally(() => { tableSSR.loading = false; }); }; | | rowAutoGrown | Determine if the rows will adopt a autogrown behaviour by the content or if the overflow will be hidden | false |

IRequestParam

Defines the request parameters used by AqTable in SERVER_MODE to handle server-side operations such as pagination, sorting, and filtering.

{
  perPage: number;
  page: number;
  sort?: { columnId: string; direction: [SORT](<https://masivapp.notion.site/Enums-2321de3976b98071928ad09b5de81605>) };
  filter?: string;
}
Key Description Example
perPage Return the current perPage value 2
page Return the current page value 5
sort Return the current column that is sorted `{
columnId: “price”,
direction: SORT.ASC
}`
filter Return the current value that is in the search bar “Any query value”

IRequestData

This defines the structure in which AqTable expects to receive data when operating in SERVER_MODE. It ensures consistent communication between the table component and your backend, allowing for features like server-side pagination, sorting, and filtering.

{
  data: any[];
  count: number;
}

| --- | --- | --- |

IAligment

Specifies how the content inside a column’s cells should be aligned (e.g., left, center, or right).

{
  content?: [ALIGMEN](<https://masivapp.notion.site/Enums-2321de3976b98071928ad09b5de81605>)[T](<https://masivapp.notion.site/AqTable-2241de3976b980b09454fdcf75919924>),
  header?: [ALIGMENT](<https://masivapp.notion.site/Enums-2321de3976b98071928ad09b5de81605>)
}