FTable Component

Default values

• perPage : 20
• sortBy : first column
• orderBy : DESC

Development use

Clone .env.example as .env and fill it with accurate variables

Required props

• name: name of the table (used for localstorage)
• apiUrl: api endpoint
• apiInstance: axios instance
• columns: array of columns to display in the table

example of column object:

{
    name: 'Statut', // required: column title
    field: 'order_status', // required: database field name (accept callback)
    searchField: true,
    type: 'badge',
    badgeOptions: [
        {
          name: 'A proposer',
          field: 'order_status',
          value: 0,
          color: 'red',
          colors: { // NEW OPTION (no breaking change) => Custom background & text colors in order to add full classnames for tailwindcss purge
              background: 'bg-red-100',
              text: 'text-red-800',
          },
          brotherFilters: [ // Optionnal : apply other fields condition on the same filter
            { 
              field: 'order_end_reason', // example
              value: 'null' // example
            }
          ],
        },
        { ... },
    ], 
}

Note about type options:

• text (default) : use 'contains' operator in queries
• id : use 'eq' operator in queries
• date & age : format value as human readable data
• duration-day : Convert seconds integer into days integer
• badge : display a label according to badgeOptions if exist, show field value else

Optional props: options object, with following keys

• defaultParams: to override default values, for every request (see api doc for syntax)

  • perPage: number of lines displayed per page
  • orderBy: only value accepted is 'ASC' (default 'DESC')
  • sortBy: field string to sort data
  • filters: object of filters

• params: merged to defaultParams, used until reset

  • filters

• filters: array of clickable filters (see labelled item above for syntax)

• onRowClicked: behavior when a row is clicked

  • field: field used as param for redirection (default is first column)
  • page: target component name ; if undefined, an event 'on-row-clicked' is emitted with field value

/!\ DEPRECATED since v1.0.0

• perPage: now defaultParams.perPage
• orderBy: now defaultParams.orderBy
• sortBy: now defaultParams.sortBy
• permanentFilters: now defaultParams.filters
• defaultFilters: now params.filters
• filterButtons: now filters