react-criteria-table

Wrapper for ReactTable

Usage no npm install needed!

<script type="module">
  import reactCriteriaTable from 'https://cdn.skypack.dev/react-criteria-table';
</script>

README

React Criteria Table

React Criteria Table is a wrapper for React Table (https://react-table.js.org), which is designed to extend base functional.

React Criteria Table is use context (https://reactjs.org/docs/context.html).

Usage

<CriteriaTableController>
   <CriteriaTable 
        cacheKey="tableOne" 
        onFetchData={(state: Partial<CriteriaTableState>) => /*do requests here*/
        onDefaults={(state: CriteriaTableState) => () => ([
            {id: "name", show: true },
            {id: "surName", show: true },
            {id: "birthDate", show: false }
        ])}
    />
   <CriteriaTableSettings activeTableKey="tableOne"/>
</CriteriaTableController>
  • cacheKey is identifier of table. Is also used to save data to local storage
  • activeTableKey is define, which of table settings must be displayed
  • onFetchData is callback, of React Table onFetchData (https://react-table.js.org/#/story/readme)
  • onDefaults is callback, that called on ComponentWillMount and initialize saved data and default data
Interfaces

ConditionType : "=" | "<>" | ">" | "<" | "!=" | ">=" | "<=" | "like" | "in"

Condition: [ConditionType, string, string | number | boolean]

CriteriaTableState:

  • cancelToken?: CancelTokenSource(https://github.com/axios/axios#cancellation)
  • queries?: Array<Condition>
  • data: {
    • list: Array<any>
    • count: number
    • total: any }
  • sorted?: Array<{ id: string, desc: boolean }>
  • pageSize?: number
  • pages?: number
  • page?: number