Class Table<StoreType>

Table component

Example

const records:StoreRecord[] = [];

for(let i = 1; i <= 100; i++) {
records.push({number: i, description: "Test " + i, createdAt: (new DateTime()).format("c")});
}

const table = table({
store: const store = jmapstore({
entity: "TaskList",
properties: ['id', 'name', 'support'],
queryParams: {
limit: 20,
filter: {
forSupport: true,
role: "support", //support tasklists
}
},
sort: [{property: "name", isAscending: true}]
}),
cls: "fit",
columns: [
{
header: "Index",
id: "id",
renderer: (value, record, td, table) => {
return table.getStore().findRecordIndex(r => record.number == r.number).toString();
},
resizable: true,
width: 60,
sortable: false
},
{
header: "Number",
id: "number",
sortable: true,
resizable: true,
width: 200
},
{
header: "Description",
id: "description",
sortable: true,
resizable: true,
width: 300
},
datecolumn({
header: "Created At",
id: "createdAt",
sortable: true
})
]
});

Type Parameters

Hierarchy

  • List<StoreType>
    • Table

Constructors

Properties

_cls?: string
baseCls: string = "goui-table"

A base class not configurable. cls can be used to add extra classes leaving this class alone

colsAreFixed: boolean = false
columnMenu: undefined | Menu
columns: TableColumn[]

The table columns

dataSet: Record<string, any> = {}

Set arbitrary data on a component.

Should be used with caution as this data is not typed.

draggable: boolean = false

Allow items to be dragged

dropBetween: boolean = false

Allow to drop between items

dropOn: boolean = false

Allow to drop on items

emptyStateHtml: string = ...

Shown when the list is empty.

emptyStateTag: keyof HTMLElementTagNameMap = 'caption'
fitParent: boolean = false

Make the table fits its container in width by setting min-width: 100% Defaults to true

groupBy?: string

Group the table by this property.

groupByRenderer: GroupByRenderer = ...

Group renderer function

groupEl?: HTMLTableSectionElement
headers: boolean = true

Show headers

headersRow?: HTMLTableRowElement
itemTag: keyof HTMLElementTagNameMap = 'tr'
lastGroup?: string
minCellWidth: number = 30
parent?: Component

When this item is added to a Component this is set to the parent Component

renderTo?: HTMLElement

Normally components are rendered to its parent component's element. But in some cases like menu's it's desired to render them to the root and position them absolute.

renderer: RowRenderer
stateId?: string

ID used for storing state of the component in the State storage.

If stateId is given it will also be used as itemId

If not set then the component won't store it's state.

store: StoreType

Store to provide data

tagName: keyof HTMLElementTagNameMap = "div"

The tagname used for the root HTMLElement of this component

Accessors

  • set attr(attr): void
  • Set attributes of the DOM element

    Parameters

    • attr: Record<string, string>

    Returns void

  • set cls(cls): void
  • Class name to add to element

    Some common classes to add for layout:

    • hbox: Set's flex layout to horizontal boxes. Use flex: n to stretch columns
    • vbox: As above but vertical
    • fit: Fit the parent's size
    • scroll: Set's autoscroll: true
    • pad: Set common padding on the element
    • border-(top|bottom|left|right) to add a border

    Other:

    • goui-fade-in: The component will fade in when show() is used.
    • goui-fade-out: The component will fade out when hide is used.

    Parameters

    • cls: string

    Returns void

  • get disabled(): boolean
  • Returns boolean

  • set disabled(disabled): void
  • Disable component

    Parameters

    • disabled: boolean

    Returns void

  • get flex(): string | number
  • CSS flex value

    Returns string | number

  • set flex(flex): void
  • CSS flex value

    Parameters

    • flex: string | number

    Returns void

  • get height(): number
  • Returns number

  • set height(height): void
  • The height in scalable pixels

    Parameters

    • height: number

    Returns void

    See

    width

  • get html(): string
  • Returns string

  • set html(html): void
  • Set the HTML contents of the component (innerHTML)

    Parameters

    • html: string

    Returns void

  • get itemId(): string
  • Component item ID that can be used to lookup the Component inside a Component with Component.findItem() and Component.findItemIndex();

    if stateId is given it will also be used as itemId

    Returns string

  • set itemId(itemId): void
  • Parameters

    • itemId: string

    Returns void

  • get rendered(): boolean
  • Check if the component has been rendered and added to the DOM tree

    Returns boolean

  • get resizable(): boolean
  • Returns boolean

  • set resizable(resizable): void
  • Make it resizable

    Parameters

    • resizable: boolean

    Returns void

  • set rowSelectionConfig(rowSelectionConfig): void
  • Row selection object

    Parameters

    Returns void

  • get style(): Partial<CSSStyleDeclaration>
  • Returns Partial<CSSStyleDeclaration>

  • set style(style): void
  • Set inline style

    Parameters

    • style: Partial<CSSStyleDeclaration>

    Returns void

  • get tabIndex(): number
  • Returns number

  • set tabIndex(tabIndex): void
  • The tabindex attribute specifies the tab order of an element (when the "tab" button is used for navigating).

    Parameters

    • tabIndex: number

    Returns void

  • get width(): number
  • Returns number

  • set width(width): void
  • Set the width in scalable pixels

    The width is applied in rem units divided by 10. Because the font-size of the html element has a font-size of 62.5% this is equals the amount of pixels, but it can be scaled easily for different themes.

    Parameters

    • width: number

    Returns void

Methods

  • Returns the sum of column widths

    Parameters

    • untilColumnIndex: number = -1

      Calc width until this column

    Returns number

  • Cascade down the component hierarchy

    Parameters

    • fn: ((comp) => boolean | void)

      When the function returns false then the cascading will be stopped. The current Component will be finished!

        • (comp): boolean | void
        • Parameters

          Returns boolean | void

    Returns Table<StoreType>

  • Find ancestor

    The method traverses the Component's ancestors (heading toward the document root) until it finds one where the given function returns true.

    Parameters

    • fn: ((cmp) => boolean | void)

      When the function returns true the item will be returned. Otherwise it will move up to the next parent.

        • (cmp): boolean | void
        • Parameters

          Returns boolean | void

    Returns undefined | Component

  • Find parent by instance type of the parent

    Type Parameters

    Parameters

    • cls: T

    Returns undefined | InstanceType<T>

    Example

    const form = textField.findAncestorByType(Form);
    
  • Find child by instance type of the parent

    Type Parameters

    Parameters

    • cls: ClassTypeOf<T>

    Returns undefined | T

    Example

    const form = textField.findAncestorByType(Form);
    
  • Find children by instance type of the parent

    Type Parameters

    Parameters

    • cls: ClassTypeOf<T>

    Returns T[]

    Example

    const form = textField.findAncestorByType(Form);
    
  • Fire an event

    When a listener returns false this function will return false too.

    Type Parameters

    Parameters

    • eventName: K
    • Rest ...args: Parameters<ListEventMap<any>[K]>

    Returns boolean

  • Private

    When resizing columns we must calculate absolute pixel widths

    Returns void

  • Protected

    Finds the DOM node in the parent's children to insert before when rendering a child component

    Returns undefined | Node

  • Hide this component

    This sets the "hidden" attribute on the DOM element which set's CSS display:none. You can change this to fade with css class "goui-fade-in" and "goui-fade-out"

    If you want to override this function, please override internalSetHidden instead so the beforeshow and show event fire at the right time.

    Returns boolean

  • Protected

    Overridable method so that the (before)show/hide event fire before and after.

    Parameters

    • hidden: boolean

    Returns void

  • Mask the component to disable user interaction It creates an absolute positioned Mask component. This component should have a non-static position style for this to work.

    Parameters

    • delay: number = 300

    Returns void

  • Parameters

    • dataIndex: string
    • header: HTMLTableCellElement

    Returns void

  • Render the component

    Parameters

    • Optional parentEl: Node

      The element this componennt will render into

    • Optional insertBefore: Node

      If given, the element will be inserted before this child

    Returns HTMLElement

  • Protected

    Call save start when something relevant to the state changes. Implement buildState() to save relevant state properties and restore it in restoreState()

    stateId must be set on components to be stateful

    Returns void

  • Show the component

    If you want to override this function, please override internalSetHidden instead so the beforeshow and show event fire at the right time.

    Returns boolean

Generated using TypeDoc