# @fairfair/f-table

> ## Default values

Latest version **1.1.6** (published 2022-03-14) · 0 weekly downloads

## Install

```sh
npm install @fairfair/f-table
pnpm add @fairfair/f-table
yarn add @fairfair/f-table
bun add @fairfair/f-table
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.6 |
| Published | 2022-03-14 |
| First published | 2022-01-17 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 62.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | cortopratt, shamzic, eloiletagant |

## Links

- npm: https://www.npmjs.com/package/@fairfair/f-table
- npm.io page: https://npm.io/package/@fairfair/f-table

## Recent versions

- 1.1.6 (latest) — 2022-03-14
- 1.1.5 — 2022-03-11
- 1.1.4 — 2022-03-07
- 1.1.3 — 2022-03-04
- 1.1.2 — 2022-03-03
- 1.1.1 — 2022-03-03
- 1.1.0 — 2022-03-02
- 1.0.4 — 2022-03-01
- 1.0.3 — 2022-03-01
- 1.0.2 — 2022-03-01
- 1.0.1 — 2022-02-24
- 1.0.0 — 2022-02-23
- 0.1.14 — 2022-02-23
- 0.1.13 — 2022-02-23
- 0.1.12 — 2022-02-23
- … 12 more at https://npm.io/package/@fairfair/f-table/versions

## README

# 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

---
_Source: https://npm.io/package/@fairfair/f-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._