th-datatable

Handle data with uniform UX

• author - Tillhub
• license - UNLICENSED

slots

• actions

• actions-post

• tools

• expanding-row

• no-data

props

• resource String (required)

  Define which SDK resource is allowed and will be built.

• custom-resource Object (optional) default: undefined

• resource-limit Number (optional) default: undefined

  The limit of API items and hence size of an API page.

• resource-query Object (optional) default: undefined

  The options object that will be passed to the SDK

• meta-options Object (optional) default: undefined

  The options object that will be passed to SDK when calling .meta functions

• height String (optional) default: '100%'

  Height in DOM

• width String (optional) default: '100%'

  Width in DOM

• color String (optional) default: 'black'

  Font color in DOM (not in use)

• table-data Array (optional) default: null

  Injectable data. This will lead to API calls not being made (not in use)

• headers Array (required)

  ElTable header configuration

• show-tools Boolean (optional) default: true

  Toggle visibility of the toolbar.

• show-actions Boolean (optional) default: true

  Toggle visibility of the action bar.

• show-operations Boolean (optional) default: true

  Toggle visibility of the operations bar.

• headers-filterable Boolean (optional) default: undefined

  Toggle filterability of the headers

• show-search-filter Boolean (optional) default: undefined

  Toggle visibilty of the search filter (ot in use).

• search-filters Array (optional) default: [object Object]

  Toggle visibilty of the search filters.

• multiple-select Boolean (optional) default: false

  Allow multiple select and multi actions in the item list.

• show-tool-header Boolean (optional) default: true

  Toggle visibilty of the tool header.

• operations Object (optional) default: [object Object]

  Configure customisable operations.

• paging Boolean (optional) default: true

  Define whether to page or not (not in use)

• no-meta-check Boolean (optional) default: false

  Allow or disallow meta checks. If disallowed, pages will rely on the local data count

• show-loading Boolean (optional) default: true

  Toggle loading indicator

• do-route Boolean (optional) default: false

  Define whether to route, e.g. on click events

• do-route-filters Boolean (optional) default: undefined

  Define whether to route on filters being set. This e.g. triggers query parameters in the browser

• route-base String (optional) default: [object Object]

  Define a base for routing, e.g. if you do not wish to route on the current URL.

• page-size Number (optional) default: 20

  Define a page size

• page-sizes Array (optional) default: [object Object]

  Define available page sizes the user can choose from

• transform-fetched-data Function (optional) default: undefined

  Transform data the after it arrives from the SDK.

• transform-table-data Function (optional) default: undefined

  Transform data the before it will be injected into the DOM.

• expanding-row Boolean (optional) default: false

  Toggle expandable rows.

• log-exception Function (optional) default: [object Object]

  General error handler. Will be called with no-op if not set.

• headers-config Object (optional) default: undefined

• message String (optional) default: ''

• show-message Boolean (optional) default: false

• headers-default-hide Array (optional) default: [object Object]

• buttons Array (optional) default: [object Object]

• fuzzy-search Boolean (optional) default: true

• search-filter-config Object (optional) default: [object Object]

• sortable Boolean (optional) default: false

  Toggle sortability

• locale String (optional) default: 'en'

  Set locale to be used downstream (not in use)

• row-menu-options Array (optional) default: [object Object]

  Configure ElTable row menus

• handle-row-menu-click Function (optional) default: [object Object]

  Function that will be called on row menu click

data

• localData

initial value: [object Object]

• isLoading

initial value: false

• currentPage

initial value: 1

• page

initial value: [object Object]

• totalCount

initial value: null

• next

initial value: null

• localPageSize

initial value: [object Object]

• show

initial value: [object Object]

• defaultFallback

initial value: '--'

computed properties

• initialHeaders

  dependencies: headersDefaultHide, headersConfig

• filterHeaders

  dependencies: headers, initialHeaders, initialHeaders

• loading

  dependencies: isLoading, showLoading

• apiPageCount

  dependencies: localData

• totalPages

  dependencies: totalCount, pageSize, totalCount, pageSize

• parsedFilter

  dependencies: $route, $route, $route

• hasFilters

  dependencies: parsedFilter

• isSearch

  dependencies: hasFilters, parsedFilter, fuzzySearch

• doMetaCheck

  dependencies: noMetaCheck, hasFilters

• showNoData

  dependencies: localData, isLoading

events

• loading

• loaded

• delete-requested

• edit-requested

• size-changed

  order of execution might be important here, as we allow outside pageSize changes

• will-handle-page-change

• current-page-changed

• will-handle-page

• page-handled

• handled-count

• loading-error

• row-click

• row-dblclick

• selection-change

• headers-config

• search-filter

• search-filter-submit

• search-filter-submit-route

methods

• fetch()

  Simultaneously fetch the total count and first page of a resource's data. Fetching requires a uniform layout of the Tillhub SDK, hence the availability of a resource as an instance class and that having a .meta and .getAll call that behavior exactly the same across pageable resources. That is also that a second API page will be returned as next cursor from the SDK.

  This function propagetes some usage mistage as exceptions. It also handles some unexpected errors based on it's surroundings, e.g. throwing if no error listener is attached.

• getResourceOptions()

• handleIncomingData(data)

• handleSearchData(data)

• handleNext(bound)

  handle an available next cursor. If a user jumps to any arbitrary page, we need to page until that data becomes available

  parameters:

  • bound Number - defines when to stop fetch recursively

• deleteRow(index)

  let the caller handle deletion events

• edit(index)

  the caller will be notified about edit requests, which usually will have routing to an edit page as a consequence. Since this is common we offer a convenience options to route based on the resource

• extendedFormatter(item, formatter, field, index)

  apply a user defined formatter. If none is defined we expect the passed formatter to be the field value. TODO: review.

• handleSizeChange(val)

  will be emitted from the pagination component. Any size change will cause the table to return to page 1

  parameters:

  • val Number - page size that was defined in the page size options

• handleCurrentChange(val)

  any page control will trigger this event, e.g. a paging number or a goto input

  parameters:

  • val Any - page index

• handlePage()

  Slice local data based on current page and the page size. This function also handles boundaries and behaviors when one is overstepped.

• handleMeta(metadata)

  Handle incoming metadata by setting total items etc.

  parameters:

  • metadata Object - the result of a TH SDK .meta call

• refresh()

  Refresh the data, triggering re-render if data is available

• maybeHandleError(err)

  Emit an error to the caller if a listener is set. Otherwise throw.

  parameters:

  • err Error - upstream error

• handleRowClick(row, column, event)

  Simple row click handler. Routes if doRoute is set.

• handleRowDblClick(row, column, event)

  Simple row double click handler. Routes if doRoute is set or routing on double click is specifically requested.

  Migh not be fired when click triggers first and has an action that will choke the second click.

  parameters:

  • row Object - EltableRowData
  • column Object - EltableColumnData
  • event Object - EltableColumnEvent

• handleSelectionChange(val)

  Emit selection change to the implementor

  parameters:

  • val Object - value of selected item

• changeTotalCount(count)

• updateHeadersConfig(activeHeaders)

• injectFilter()

• handleSearchFilterInput(v)

• handleSearchFilterSubmit(v)

• toggleShow()

• getResourceInstance()

• isNull(value, fallback)

• sortChange(info)

• compareRow(a, b, info)

• isRowMenu(column, event)