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

AqDatePicker 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.

ICalendarInstance

Each instance holds a unique identifier and its corresponding date value. This is useful for rendering multiple calendar views, like in range pickers or linked calendars.

{
  uid: string;
  value: string;
}
Key Description Example
uid Unique identifier for the calendar instance. It is used to differentiate between calendars when multiple are rendered. "calendar-01"
value The current value associated with the calendar. Usually a date in ISO string format (e.g., "2025-07-29"). "2025-07-29"

IDateValue

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

// IDateValue.ts
{
  start: string;
  end: string;
  hover?: string;
}
Key Description Example
start The initial date selected in the range, represented as an ISO string. "2025-07-01"
end The final date selected in the range, also as an ISO string. "2025-07-15"
hover? (Optional) Temporary date under the user's cursor during selection. "2025-07-10"

IRange

Defines a dynamic object where each key is a translation label (e.g., "today", "last7Days"), and its value is an array of DateTime objects (from Luxon) representing a date range.

// IDateValue.ts
{
  [date: string]: DateTime[];
}
Key Description Example
[key: string] Translation key used as label in UI. "last7Days"
DateTime[] Array of two DateTime objects: [startDate, endDate]. [DateTime.now().minus({ days: 6 }), DateTime.now()]

IMonthSelection

Represents a specific month and year combination, often used for month/year pickers or navigation logic within the date picker.

// IDateValue.ts
{
  month: number;
  year: number;
}
Key Description Example
month Month number (1–12). January is 1, December is 12. 7
year Full year number in YYYY format. 2025

IDatePickerTranslation

This interface ensures localization and accessibility by allowing full customization of labels, placeholders, summaries, and range names.

// ITranslations.ts
{
  // Common
  today: string;
  clear: string;
  cancel: string;
  apply: string;

  // Months
  months: {
    january: string;
    february: string;
    march: string;
    april: string;
    may: string;
    june: string;
    july: string;
    august: string;
    september: string;
    october: string;
    november: string;
    december: string;
  };

  // Weekdays
  weekdays: {
    sunday: string;
    monday: string;
    tuesday: string;
    wednesday: string;
    thursday: string;
    friday: string;
    saturday: string;
  };

  // Range
  range: {
    start: string;
    end: string;
    range: string;
  };

  // Timer:
  timeWrapper: {
    start: string;
    end: string;
  };

  rangeSelection: {
    'today': string;
    'yesterday': string;
    'last 7 days': string;
    'last 30 days': string;
    'this month': string;
    'last month': string;
    'custom': string;
  };
}

On this page

✨ Design together. Build together. Speak the same language. ✨

back Aqua.png