BuckyGuideAPI ReferenceEmbeddables

Navigation options

Navigation options is the place where the customizability really shows. These options include a way to do a table-search, update the table-columns visibility, hide the tables search-bar etc.

Currently only the options on the table-routes are present. This will be extended in the future.

Table options

On the table-views we have our own set of options relating to this. We will

import { Embeddable, Routes, type RoutesFilterValues } from 'embeddables'

const embeddable = new Embeddable({
  embedToken: getEmbedToken(),
})

embeddable.createView({
  ...config,
  route: {
    path: Routes.ACCOUNTS,
    options: {
      table: {
        // Table options
      },
    },
  },
})

Lets look at the type definitions.

This is the type-definition for the Table route-config:

type TableRouteConfig<T extends Routes> = {
  table?: {
    // The static search-values. See below for more information.
    staticSearch?: T extends keyof RoutesFilterValues ? RoutesFilterValues[T] : never
    /**
     * Table search options
     * @param useSearch
     *  - If true, the table will have a search input
     *  - If false, the table will not have any search related inputs
     *  - If 'custom', the table will have still have the search icons in the table header, but no input.
     *    This is useful if you want to implement your own search functionality.
     *    NOTE: Event listeners for this will come.
     */
    useSearch?: true | false | 'custom'
    
    // NOTE: Currently not implemented    
    usePagination?: true | false | 'custom'
  }
} & TableRouteEvent<T> // This is merged with the TableRouteEvent below.

Here is the type-definition for the Table route-events:

type TableRouteEvent<T extends Routes> = {
  table?: {
    // The User search-values. See below for more information.
    search?: RouteFilterSearch<T>

    // NOTE: Currently not implemented
    pagination?: {
      size?: number
      page?: number
    }
    
    // The sorting values of the table, NOTE: Currently not implemented
    sorting?: {
      sortBy: keyof RouteFilterSearch<T>
      sorter: 'Ascending' | 'Descending'
    }

    // The columns visible in the table
    columnsVisible?: (keyof RouteFilterSearch<T>)[]
  }
}

Searching

There are two types of searches to be made, Static search (known as the staticSearch-property) and User search (known as the search-property).

Static search

The staticSearch-property is a search that the user cannot see. It is hidden from the UI-view what the search is. This is especially useful when you want to have a base search, e.g. by a specific business, on top of the User search.

Please be aware that the search is still on the client. Do not use this search for filtering sensitive information. Sensitive information is filtered in the Embed Token from the GetEmbedToken-endpoint.

Examples 

embeddable.createView({
  ...config,
  route: {
    path: Routes.ACCOUNTS,
    options: {
      table: {
        staticSearch
      },
    },
  },
})

User search

The user search is the same as the staticSearch in terms of structure. The only difference is that this is visible and mutable by the user in the UI. If you want to implement your own search bar, this is the property to us to search. It can be changed dynamically, see:

Updating the state

Column visibility