Intro

Demo

Components

• ps-table

  This component is the main component and everything you need to add in order to get a table into your application.

  Attributes

  data	Data Type: Array of Objects Explanation: Each Object represents the Data for one row.
  lang	Data Type: String Explanation: I18n - The current lang of the application - can be a dynamic variable Example:
  columns	Data Type: Array of Objects. Explanation Each object represents one Column. The Column Object can hold various attributes to customize each column.  Attributes: --- key Data Type: String Optional: no This value is the unique identifier of the column. The key will be used as reference in the i18n_columns to display the column name in the current language. If path is not defined, it will also be used to get the value from the equally named attribute in the data object of this row. --- path Data Type: Json encoded Array Optional: yes If Path is defined, the path will be used to get the value from the data object. That way, it is possible to get a specific value from a nested data object. This is useful data from Supabase containing table joins. --- show Data Type: boolean Optional: yes If this flag is set, the column will be shown by default. It is possible for the enduser to hide/show columns as desired. --- search_index Data Type: boolean Optional: yes One or more columns can be set to true. If multiple columns have search_index = true, the row will be shown if the search value is in any of those columns. If no column has search_index = true then the search is disabled and will not filter. It is possible for the enduser to edit any combination of search columns as desired. --- header_sticky Data Type: boolean Optional: yes If set to true, this column will stick to the left side of the table if the table is to wide for the screen and will be scrolled from left to right ( mobile view as example ). If another column comes from the right that is also sticky, it will be cover the previous sticky column. --- type: Data Type: String Optional: yes This value defines if specific processing should be done to the value before it will be displayed. current options are: - currency currency is adding the currency stated in the attributes to the front of the value. No 1000s seperation or rounding will be done. - date this uses "Format Date" Function and any valid attributes can be passed to it as to the function itself to convert the value to the desired time/date display --- attributes: Data Type: object Optional: yes This provides additional settings in relation to the type of the column. See "type" for more details
  i18n_columns	Data Type: Object of Objects Explanation: The Main Object has attributes for each available language Each Language Object contains keys and their respected value for the given language.

  Events

  Action	This action gets triggered when a action button of one of the rows gets clicked. The event contains a customizable type and the full row as an object
  Selected_Items	This action gets triggered every time a row is selected or unselected. The event contains an array of objects where every object represents one selected row - the array is orderd by index 0 is first clicked item, index 0 is second clicked item,..

Style variables