---

Installation

Install using Yarn:

yarn add @resourge/react-hook-table

or NPM:

npm install @resourge/react-hook-table --save

(optional) Setup navigation

By default, @resourge/react-hook-table uses native javascript history to update the URL. This can create a problem with packages that don’t connect to native javascript history, for example react-router.

To fix this do:

import { createBrowserHistory } from 'history';

export const history = createBrowserHistory();

// This functions connects the @resourge/react-hook-table to the react-router history
setDefaultNavigation(({ location }) => history.replace(location.path))

This connects react-router navigation with @resourge/react-hook-table

Usage

const [
  data, // Variable containing "data"
  {
    changeItemsPerPage, changePage, sortTable, 
    setFilter, getPaginationHref,
    filter, sort, pagination
    // Pagination Methods as well as filter/sort/pagination
  }
  getFetch // Method to re-fetch
] = useFetchPagination(
  async ({ pagination, sort, filter }) => {
    const { data, pagination: { totalItems } } = await fetch(...)
      
    return {
      data,
      totalItems
    }
  },
  {
    initialState: [],
	/*
	  // Default values
      filter,
	  sort,
	  pagination
	*/
  },
  {
	deps: [] // Extra dependencies
  }
)

Quickstart

import React from 'react';
import { useTable } from '@resourge/react-hook-table';

export default function Form() {
  const [
    products, // Variable containing "data"
    {
      changeItemsPerPage, changePage, sortTable, 
      setFilter, getPaginationHref,
      filter, sort, pagination
      // Pagination Methods as well as filter/sort/pagination
    }
    getFetch // Method to re-fetch
  ] = useFetchPagination(
    async ({ pagination, sort, filter }) => {
      // fetch... use Http
        
      return await Promise.resolve({
        data: [
          { id: Math.random(), name: 'Apple' }
        ],
        totalItems: 10
      })
    },
    {
      initialState: [],
  	  /*
  	    // Default values
          filter,
  	    sort,
  	    pagination
  	  */
    },
    {
  	  deps: [] // Extra dependencies
    }
  )

  return (
    <table>
      <tbody>
        {
          products.map((product, index) => (
            <tr key={`${index}`}>
        	  <td>{ product.id } </td>
        	  <td>{ product.name } </td>
			</tr>
          ))
        }
      </tbody>
    </table>
  )
}

---