Class DataTable<T>

Represents a dynamic and interactive table with features like sorting, searching, filtering, column resizing, column rearranging, and virtual scrolling.

Example

type DataType = {id: number, name: string, age: number};

const dataTable = new DataTable<DataType>('#myTable', [
    { field: 'id', title: 'ID', sortable: true },
    { field: 'name', title: 'Name', searchable: true },
    { field: 'age', title: 'Age', sortable: true, valueFormatter: (value) => `${value} years` }
  ], {
  data: [
    { id: 1, name: 'Alice', age: 30 },
    { id: 2, name: 'Bob', age: 24 },
  ],
  virtualScroll: true,
  resizable: true,
  rearrangeable: true,
});

Type Parameters

Hierarchy

EventTarget
- DataTable

Constructors

constructor

new DataTable<T>(
    table: string | HTMLTableElement,
    columns: ColumnInitOptions<T>[],
    options?: TableInitOptions<T>,
): DataTable<T>
Initializes a new instance of the DataTable.
Type Parameters
- T
Parameters
- table: string | HTMLTableElement
  The HTMLTableElement or a CSS selector string for the table.
- columns: ColumnInitOptions<T>[]
  List of ColumnOptions for the table.
- options: TableInitOptions<T> = {}
  Optional configuration options for the DataTable.
Returns DataTable<T>
Throws
If the table selector does not find an element.

Throws
If the provided table element is not an HTMLTableElement or if columns option is not an array.
Overrides EventTarget.constructor
- Defined in src/data-table/data-table.ts:129

Accessors

data

get data(): T[]
Gets the underlying data

Returns T[]
- Defined in src/data-table/data-table.ts:189

rows

get rows(): T[]
Gets the currently filtered and sorted rows displayed in the table.

Returns T[]
- Defined in src/data-table/data-table.ts:182

table

get table(): HTMLTableElement
Gets the underlying HTMLTableElement managed by this DataTable instance.

Returns HTMLTableElement
- Defined in src/data-table/data-table.ts:196

tableOptions

get tableOptions(): ConcreteTableOptions<T>
Gets the current options applied to the table.

Returns ConcreteTableOptions<T>
- Defined in src/data-table/data-table.ts:175

Methods

addEventListener

addEventListener<K extends keyof DataTableEventMap<T>>(
    type: K,
    listener: (
        this: DataTable<T>,
        ev: CustomEvent<DataTableEventMap<T>[K]>,
    ) => any,
    options?: boolean | AddEventListenerOptions,
): void
Appends an event listener for events whose type attribute value is type. The callback argument sets the callback that will be invoked when the event is dispatched.

The options argument sets listener-specific options. For compatibility this can be a boolean, in which case the method behaves exactly as if the value was specified as options's capture.

When set to true, options's capture prevents callback from being invoked when the event's eventPhase attribute value is BUBBLING_PHASE. When false (or not present), callback will not be invoked when event's eventPhase attribute value is CAPTURING_PHASE. Either way, callback will be invoked if event's eventPhase attribute value is AT_TARGET.

When set to true, options's passive indicates that the callback will not cancel the event by invoking preventDefault(). This is used to enable performance optimizations described in § 2.8 Observing event listeners.

When set to true, options's once indicates that the callback will only be invoked once after which the event listener will be removed.

If an AbortSignal is passed for options's signal, then the event listener will be removed when signal is aborted.

The event listener is appended to target's event listener list and is not appended if it has the same type, callback, and capture.

MDN Reference
Type Parameters
- K extends keyof DataTableEventMap<T>
Parameters
- type: K
- listener: (this: DataTable<T>, ev: CustomEvent<DataTableEventMap<T>[K]>) => any
- Optionaloptions: boolean | AddEventListenerOptions
Returns void
Overrides EventTarget.addEventListener
- Defined in src/data-table/data-table.ts:1732
addEventListener(
    type: string,
    listener: EventListenerOrEventListenerObject,
    options?: boolean | AddEventListenerOptions,
): void
Parameters
- type: string
- listener: EventListenerOrEventListenerObject
- Optionaloptions: boolean | AddEventListenerOptions
Returns void
Overrides EventTarget.addEventListener
- Defined in src/data-table/data-table.ts:1742

clearMessage

clearMessage(): void
Clears the current message and dispalsy the normal table data.

Returns void
- Defined in src/data-table/data-table.ts:401

deleteRow

deleteRow(index: number): void
Deletes a row at a specific original index from the table.
Parameters
- index: number
  The original index of the row to delete.
Returns void
- Defined in src/data-table/data-table.ts:770

destroy

destroy(): void
Returns void
- Defined in src/data-table/data-table.ts:794

dispatchEvent

dispatchEvent(event: Event): boolean
Dispatches a synthetic event event to target and returns true if either event's cancelable attribute value is false or its preventDefault() method was not invoked, and false otherwise.

MDN Reference
Parameters
- event: Event
Returns boolean
Inherited from EventTarget.dispatchEvent
- Defined in node_modules/typescript/lib/lib.dom.d.ts:8882

export

export(filename: string, all?: boolean): void
Export the current visible table data to a CSV file.
Parameters
- filename: string
  The name of the file to save.
- all: boolean = false
  If true, exports all original data (ignoring filters). If false (default), exports only the currently visible (filtered and sorted) rows.
Returns void
- Defined in src/data-table/data-table.ts:578

filter

filter(
filters?: null | FilterCallback<T> | Partial<{ [K in string]: any }>,
): void
Applies filters to the table rows. Filters can be an object where keys are field names and values are the criteria to filter by, or a callback function that receives a row and its index and returns true if the row should be included.
Parameters
- Optionalfilters: null | FilterCallback<T> | Partial<{ [K in string]: any }>
  An object defining field-based filters or a custom filter callback function.
Returns void
Throws
If filters is not an object or a function.
- Defined in src/data-table/data-table.ts:454

getColumnOptions

getColumnOptions(): Required<ColumnOptions<T>>[]
Returns Required<ColumnOptions<T>>[]
- Defined in src/data-table/data-table.ts:301
getColumnOptions(field: NestedKeyOf<T>): Required<ColumnOptions<T>>
Parameters
- field: NestedKeyOf<T>
Returns Required<ColumnOptions<T>>
- Defined in src/data-table/data-table.ts:302

getState

getState(): TableState<T>
Gets the current state of the table.

Returns TableState<T>
- Defined in src/data-table/data-table.ts:203

hideColumn

hideColumn(field: NestedKeyOf<T>): void
Hides a visible column.
Parameters
- field: NestedKeyOf<T>
  The field name of the column to hide.
Returns void
- Defined in src/data-table/data-table.ts:569

indexOf

indexOf(field: string, value: any): number
Finds the original index of the first row where the specified field matches the given value. This searches through the original, unfiltered dataset.
Parameters
- field: string
  The field name within the row data to search.
- value: any
  The value to match against the field's content.
Returns number
The original index of the found row, or -1 if no match is found.
Example
```
const index = dataTable.indexOf('id', 12345);
if (index >= 0) {
 dataTable.updateRow({description: "Updated description"}, index);
}
```
- Defined in src/data-table/data-table.ts:730

loadData

loadData(rows: T[], options?: LoadOptions): void
Loads data into the table
Parameters
- rows: T[]
  An array of data to be loaded
- options: LoadOptions = {}
  Configuration for the load operation
Returns void
- Defined in src/data-table/data-table.ts:358

refresh

refresh(): void
Refreshes the table display. This re-applies filters, sorting, and updates headers and rows.

Returns void
- Defined in src/data-table/data-table.ts:711

removeEventListener

removeEventListener<K extends keyof DataTableEventMap<T>>(
    type: K,
    listener: (
        this: DataTable<T>,
        ev: CustomEvent<DataTableEventMap<T>[K]>,
    ) => any,
    options?: boolean | EventListenerOptions,
): void
Removes the event listener in target's event listener list with the same type, callback, and options.

MDN Reference
Type Parameters
- K extends keyof DataTableEventMap<T>
Parameters
- type: K
- listener: (this: DataTable<T>, ev: CustomEvent<DataTableEventMap<T>[K]>) => any
- Optionaloptions: boolean | EventListenerOptions
Returns void
Overrides EventTarget.removeEventListener
- Defined in src/data-table/data-table.ts:1753
removeEventListener(
    type: string,
    listener: EventListenerOrEventListenerObject,
    options?: boolean | EventListenerOptions,
): void
Parameters
- type: string
- listener: EventListenerOrEventListenerObject
- Optionaloptions: boolean | EventListenerOptions
Returns void
Overrides EventTarget.removeEventListener
- Defined in src/data-table/data-table.ts:1763

restoreState

restoreState(state: RestorableTableState<T>): void
Restores the table to the provided state.
Parameters
- state: RestorableTableState<T>
  The state to restore the table to.
Returns void
- Defined in src/data-table/data-table.ts:226

scrollToFilteredIndex

scrollToFilteredIndex(index: number): void
Parameters
- index: number
Returns void
- Defined in src/data-table/data-table.ts:650

scrollToOriginalIndex

scrollToOriginalIndex(index: number): void
Scrolls the table to bring the row at the specified original index into view.
Parameters
- index: number
  The original index of the row (from the initial dataset).
Returns void
- Defined in src/data-table/data-table.ts:635

scrollToPx

scrollToPx(px: number): void
Parameters
- px: number
Returns void
- Defined in src/data-table/data-table.ts:670

scrollToRow

scrollToRow(row: T): void
Parameters
- row: T
Returns void
- Defined in src/data-table/data-table.ts:621

search

search(query?: null | string | RegExp): void
Filters rows based on a search query. The search is performed on columns marked as searchable and extraSearchFields.
Parameters
- Optionalquery: null | string | RegExp
  The search term (string) or a regular expression. An empty string clears the search.
Returns void
- Defined in src/data-table/data-table.ts:410

setColumnOrder

setColumnOrder(fields: NestedKeyOf<T>[]): void
Sets the display order of the columns in the table.
Parameters
- fields: NestedKeyOf<T>[]
  An array of field names representing the new order of columns. Columns not included in the array will be placed at the end.
Returns void
Throws
If fields is not an array.
- Defined in src/data-table/data-table.ts:685

setColumnVisibility

setColumnVisibility(colName: NestedKeyOf<T>, visisble: boolean): void
Sets the visibility of a specified column.
Parameters
- colName: NestedKeyOf<T>
  The field name of the column.
- visisble: boolean
  true to show the column, false to hide it.
Returns void
- Defined in src/data-table/data-table.ts:524

showColumn

showColumn(field: NestedKeyOf<T>): void
Shows a previously hidden column.
Parameters
- field: NestedKeyOf<T>
  The field name of the column to show.
Returns void
- Defined in src/data-table/data-table.ts:561

showMessage

showMessage(text: string, ...classes: string[]): void
Displays a message in the table body, typically used for "no data" or "no results" states. The message is shown in a single row spanning all columns.
Parameters
- text: string
  The text or HTML message to display.
- ...classes: string[]
  A string or array of strings for CSS classes to apply to the message row.
Returns void
- Defined in src/data-table/data-table.ts:393

sort

sort(colName: NestedKeyOf<T>, order: null | SortOrder): void
Sorts the table by a specified column and order. If order is null, the sort on this column is removed.
Parameters
- colName: NestedKeyOf<T>
  The field name of the column to sort by.
- order: null | SortOrder
  The sort order: 'asc', 'desc', or null to remove sorting for this column.
Returns void
- Defined in src/data-table/data-table.ts:465

updateColumnOptions

updateColumnOptions(
column: NestedKeyOf<T>,
options: ColumnOptionsWithoutField<T>,
): void
Parameters
- column: NestedKeyOf<T>
- options: ColumnOptionsWithoutField<T>
Returns void
- Defined in src/data-table/data-table.ts:324

updateRow

updateRow(index: number, data: Partial<T>): void
Updates the data of a row at a specific original index.
Parameters
- index: number
  The original index of the row to update.
- data: Partial<T>
  An object containing the new data to assign to the row. Existing fields will be updated, and new fields will be added.
Returns void
Example
```
const index = dataTable.indexOf('id', 12345);
if (index >= 0) {
 dataTable.updateRow(index, {description: "Updated description"});
}
```
- Defined in src/data-table/data-table.ts:757

updateTableOptions

updateTableOptions(options: UpdatableTableOptions<T>): void
Parameters
- options: UpdatableTableOptions<T>
Returns void
- Defined in src/data-table/data-table.ts:274

withoutUpdates

withoutUpdates(callback: (dataTable: DataTable<T>) => void): void
Executes a callback function without triggering table updates (like re-rendering or event dispatches) until the callback has completed. This is useful for batching multiple operations.
Parameters
- callback: (dataTable: DataTable<T>) => void
  A function to execute. It receives the DataTable instance as its argument.
Returns void
Example
```
dataTable.withoutUpdates(dt => { dt.sort('name', 'asc'); dt.filter({ age: '>30' }); });
```
- Defined in src/data-table/data-table.ts:781

Class DataTable<T>

Example

Type Parameters

Hierarchy

Index

Constructors

Accessors

Methods

Constructors

constructor

Type Parameters

Parameters

Returns DataTable<T>

Throws

Throws

Accessors

data

Returns T[]

rows

Returns T[]

table

Returns HTMLTableElement

tableOptions

Returns ConcreteTableOptions<T>

Methods

addEventListener

Type Parameters

Parameters

Returns void

Parameters

Returns void

clearMessage

Returns void

deleteRow

Parameters

Returns void

destroy

Returns void

dispatchEvent

Parameters

Returns boolean

export

Parameters

Returns void

filter

Parameters

Returns void

Throws

getColumnOptions

Returns Required<ColumnOptions<T>>[]

Parameters

Returns Required<ColumnOptions<T>>

getState

Returns TableState<T>

hideColumn

Parameters

Returns void

indexOf

Parameters

Returns number

Example

loadData

Parameters

Returns void

refresh

Returns void

removeEventListener

Type Parameters

Parameters

Returns void

Parameters

Returns void

restoreState

Parameters

Returns void

scrollToFilteredIndex

Parameters

Returns void

scrollToOriginalIndex

Parameters