@maximus905/simple-table v1.0.0

table component

Simple Table component

Some of props definition:

• tableDataLoader - async function
  • default loader:

  const defaultTableDataLoader = async ({url, filters, extFilters, sorting, pagination, dataFieldName, dataCounterFieldName}) => {
      try {
          const res = await axios.get(url, {
              params: {filters, extFilters, sorting, pagination, dataFieldName, dataCounterFieldName}
          })
          if (res.status !== 200 || !Array.isArray(res.data[dataFieldName])) {
              console.log('Error fetching data from server: ', res)
              throw new Error('Error fetching data from server')
          }
          return res.data
      } catch (e) {
          alert(e.toString())
          return []
      }
  }

• url argument is got from props.tableDataUrl (see below). It should return object structure like this:

  {
      [dataFieldName]: [
          {accessor1: 'value 1'}, {accessor2: 'value 2'},
          {accessor1: 'value n'}, {accessor2: 'value n'}
      ],
      [dataCounterFieldName]: 'numberOfRecords'
  }

  if the field dataCounterFieldName isn't presented in response, counter of records and pagination won't be shown in the footer

Default values:

    dataFieldName: 'data',
    counterFieldName: 'counter'

• dataFieldName - field name for data in the structure above
• dataCounterFieldName - field name of record counter in the structure above. This number will be shown in the footer as a records counter. And this number is also used for calculating pagination parameters.

Where are used dataFieldName and dataCounterFieldName?

our server should send table data in structure like:

{
    [dataFieldName]: [table data],
    [dataCounterFieldName]: number_of_records
}

• filterDataLoader - async function fetched data for filters of LIST type
  • default loader:

    const defaultFilterDataLoader = async ({url, filters, extFilters, accessor, dataFieldName}) => {
        try {
            const res = await axios.get(url, {
                params: {accessor, filters, extFilters, dataFieldName}
            })
            if (res.status !== 200 || !Array.isArray(res.data[dataFieldName])) {
                console.log('invalid data from server: ', res)
                throw new Error('Error fetching filter list from server')
            }
            return res.data[dataFieldName]
        } catch (e) {
            alert(e.toString())
            return []
        }
    }

    url argument is got from props.filterDataUrl (see below). It should return array of ordered values or array of objects, where each object should look like

{filterValueName: 'value', filterLabelName: 'label'}

. If the function returns simple array, each value is used as value and as label

• filterValueName - field name of value. This prop is used only if getFilterList function returns array of objects
• filterLabelName - field name of label. This prop is used only if getFilterList function returns array of objects
• tableDataUrl - URL for fetching table data.
• filterDataUrl - URL for fetching filter data (it's used only for LIST type of filters).
• extFilters - external filter that can be passed to table and changed onu of table. If passThrowExtFilter=== true, this filter will be sent to server as is, but if passThrowExtFilter=== false, this filter will be converted as usual table filter. So, to be able to convert as usual table filter it should have structure like this:

  {
    filterBy: '', // string
    value: [], // array of values
    type: '', // one of available filter types (see below)
    selectAll: true/false // this field is required only for LIST type
  }

• api - usually empty object that will be filled after mounting table by useful methods
  • api.reload update table's data with current settings(filters, sorting etc.)
• onBeforeRequestData (function) is called before loading data from a server (without any arguments).
• onAfterSuccessfulRequestData (function) is called after successful loading data from a server (without any arguments).
• onAfterFailedRequestData (function) is called after failed loading data from a server (without any arguments).
• onAfterRequestData (function) is called after either successful or failed loading data from a server (without any arguments).

Filter types:

• type: EQ, label: '=', filterName: 'равно'},
• type: NE, label: '!=', filterName: 'не равно'},
• type: LT, label: '<', filterName: 'меньше'},
• type: LE, label: '<=', filterName: 'меньше или равно'},
• type: GT, label: '>', filterName: 'больше'},
• type: GE, label: '>=', filterName: 'больше или равно'},
• type: STARTING, label: 'начинается с'},
• type: ENDING, label: 'заканчивается на'},
• type: INCLUDING, label: 'содержит'},
• type: LIST, label: 'список', loadFromServer: true, }