API Documentation

LineUp is implemented in clean TypeScript in an object oriented manner. A fully generated API documentation based on TypeDoc is available at https://lineup.js.org/main/docs.

LineUp can be build manually or using via the builder design pattern (see Advanced Usage Example). The builder design pattern in the more common way.

LineUp Builder

The simplest methods to create a new instance are:

• asLineUp returning a ready to use LineUp instance

  asLineUp(node: HTMLElement, data: any[], ...columns: string[]): LineUp
  

• asTaggle returning a ready to use Taggle instance

  asTaggle(node: HTMLElement, data: any[], ...columns: string[]): Taggle
  

• builder returning a new DataBuilder

   builder(arr: any[]): DataBuilder`
  

The DataBuilder allows on the one hand to specify the individual columns more specificly and the creation of custom rankings.

Builder factory functions for creating column descriptions include:

• buildStringColumn returning a new StringColumnBuilder

  buildStringColumn(column: string): StringColumnBuilder
  

• buildNumberColumn returning a new NumberColumnBuilder

  buildNumberColumn(column: string, domain?: [number, number]): NumberColumnBuilder
  

• buildCategoricalColumn returning a new CategoricalColumnBuilder

  buildCategoricalColumn(column: string, categories?: (string | Partial<ICategory>)[]): CategoricalColumnBuilder
  

• buildHierarchicalColumn returning a new HierarchyColumnBuilder

  buildHierarchicalColumn(column: string, hierarchy?: IPartialCategoryNode): HierarchyColumnBuilder
  

• buildDateColumn returning a new DateColumnBuilder

  buildDateColumn(column: string): DateColumnBuilder
  

• buildActionsColumn returning a new ActionsColumnBuilder

  buildActionsColumn(): ActionsColumnBuilder
  

In order to build custom rankings within the DataBuilder the buildRanking returning a new RankingBuilder is used.

buildRanking(): RankingBuilder

LineUp classes and manual creation

The relevant classes for creating a LineUp instance manually are LineUp, Taggle, and LocalDataProvider. A LocalDataProvider is an sub class of ADataProvider implementing the data model management based on a local JavaScript array. LineUp and Taggle are the visual interfaces to the LocalDataProvider.

The classes can be instantiated either using the factory pattern or via their regular class constructors:

createLineUp(container: HTMLElement, data: ADataProvider, config?: Partial<ILineUpOptions>): LineUp

createTaggle(container: HTMLElement, data: ADataProvider, config?: Partial<ITaggleOptions>): Taggle

createLocalDataProvider(data: any[], columns: IColumnDesc[], options?: Partial<ILocalDataProviderOptions>): LocalDataProvider

new LineUp(node: HTMLElement, data: DataProvider, options?: Partial<ILineUpOptions>): LineUp
new Taggle(node: HTMLElement, data: DataProvider, options?: Partial<ITaggleOptions>): Taggle
new LocalDataProvider(data: any[], columns?: IColumnDesc[], options?: Partial<ILocalDataProviderOptions & IDataProviderOptions>): LocalDataProvider

Both LineUp and Taggle are sub classes of ALineUp. The most important functions of this class include:

• getHighlight(): number / setHighlight(dataIndex: number): void to get and set the highlighted row identified by its index in the data. If none is highlighted -1 is returned.
• getSelection(): number[] / setSelection(dataIndices: number[]): void to get and set the selected rows identified by their indices in the data
• on(type: string, listener: IEventListener | null): this to listen to highlight and selection events. LineUp.js event mechanism is based on d3 dispatch, thus instead of and off method null is passed to disable listening to the event. The following events are sent out:
  • highlightChanged(dataIndex: number): void
  • selectionChanged(dataIndices: number[]): void