Logo
Chakra-UIReactJsNext.JS
Head

@codecraftkit

Documentation

useDataTable

Description#

The useDataTable is a hook that is used to manage the DataTable along with the Paginate and a custom filter.

Installation#

Code Example

npm i @codecraftkit/useDataTable

Import#

it can be imported from hooks.

Code Example

import { useDataTable } from "@codecraftkit/hooks";

or alone.

Code Example

import { useDataTable } from "@codecraftkit/useDataTable";

Usage#

This hook allows you to get the data and send it to the dataTable from Comet, api or graphql

it gives you the props to use to the Paginate component, dataTable and the custom filter

Let's see an example getting the data from the meteor backend

Code Example

//useDataTable arguments
  const initialValues = {
    info: '',
    status: '',
    passwordValidated: '',
    teamId: '',
    userTypeIds: []
  };


  const useDataTableProps = {
    limit: 10,
    initialValues,
    path: 'user.list',
    field: 'users'
  };


  const [dataTable, paginate, filter, { refreshList }] = useDataTable(useDataTableProps);


  //DataTable extra props
  const [usersSelected, setUsersSelected] = useState([]);
  const [usersSelectedItems, setUsersSelectedItems] = useState([]);


  const headLabel = [
    { field: 'img', label: 'Avatar', type: 'avatar', options: {} },
    { field: 'name', label: 'Name', options: {} },
    { field: 'email', label: 'email', size: '5px', options: {} },
    { field: 'identification', label: 'identification', size: '5px', options: {} },
    { field: 'position', label: 'Type Profile', size: '5px', options: {} },
    { field: 'lastSession.createdAtHumanized', label: 'Last Session', type: 'multi' },
    { field: 'team.name', label: 'Team', size: '5px', options: {}, type: 'multi' },
    { field: 'isEnable', label: 'Enable', type: 'icon-true/false', size: '16px', options: {} },
  ]


  const actions = [
    {
     label: 'Log',
     icon: 'email',
     handler: (user) =>
        console.log('%c user._id', 'background: #222; color: #bada55',user.name)
    },
  ]

Code Example

<Grid templateColumns='3fr 1fr' gap={4}>
<Grid templateRows='auto 1fr' gap={4}>
  <PageHeader
    title='Users'
    leftAction={<Stack isInline spacing={4}>
      <Button mt='1' size='sm' onClick={refreshList}>Refresh</Button>
    </Stack>}
    rightAction={<Paginate {...paginate}/>}
  />
  <Table
    {...dataTable}
    head={headLabel}
    actions={actions}
    selection
    selected={usersSelected}
    setSelected={setUsersSelected}
    selectedRows={usersSelectedItems}
    setSelectedRows={setUsersSelectedItems}
    noDataComponent={<NoDataAnimation/>}
  />
</Grid>
<UserFilter {...filter}/>
</Grid>

Usage With Gql#

We'll use the same component structure as above, the only thing that will change is the hook's props

To get data from Graphql and paginate you need to use two services, one to get the data and the other to get the amount of data

Code Example

//useDataTable arguments
  //useDatatableGraph
  const initialValuesGraph = {
    name:"",
  };


  const useDataTablePropsGraph = {
    limit:20,
    useDatatableGraph,
    collection:"P_Agency",
    QUERY:P_AGENCY,
    collectionCount: "P_AgencyCount",
    QueryCount:P_AGENCY_COUNT,
  };


  const [dataTable, paginate, filter, { refreshList }] = useDataTable(useDataTablePropsGraph);


  //dataTable
  const headGraph = [
    'name',
    'email',
  ];

Using Local Pagination#

To use LocalPagination pass the prop LocalPaginate to the useDataTable hook, and make sure to set the total state correctly

Code Example

//useDataTable arguments
const initialValues = {
  info: '',
  status: '',
  passwordValidated: '',
  teamId: '',
  userTypeIds: []
};


const useDataTableProps = {
  limit: 100,
  initialValues,
  path: 'user.list',
  localPaginate:true,
  customResponse: (setList, setTotal, res) => {
    setList(res?.data)
    setTotal(res?.data.length)
  },
};


const [dataTable, paginate, filter, { refreshList }] = useDataTable(useDataTableProps);


const headLabel = [ 'name' ]

Code Example

<Grid templateColumns='3fr 1fr' gap={4}>
<Grid templateRows='auto 1fr' gap={4}>
  <PageHeader
    title='Users'
    leftAction={<Stack isInline spacing={4}>
      <Button mt='1' size='sm' onClick={refreshList}>Refresh</Button>
    </Stack>}
    rightAction={<Paginate {...paginate}/>}
  />
  <Table
    limit={dataTable.limit}
    page={dataTable.page}
    list={dataTable.list}
    loading={dataTable.loading}
    localPaginate={dataTable.localPaginate}
    // {...dataTable}
    head={headLabel}
    noDataComponent={<NoDataAnimation/>}
  />
</Grid>
<UserFilter {...filter}/>
</Grid>

Arguments#

name

type

required

default

description

limit

Number

no

20

The total of that will be displayed in one page

initialValues

Object

no, unless you are using a filter

{}

The values to filter the data

path

String

no, unless you are using Comet or an api

The path where the dataTable will get the data

api

String

no

If you don't specify and api the useDataTable will use Comet by default

specify the platform to do the call

field

String

no

In the response the name of the object that contains the array, not pass this argument if the array is in the response root

QUERY

Graphql Query

no

The Query where to get the data using gql

collection

String

no

The name of the collection

queryOptions

Object

no

Options that can be customize in the useQuery hook in Query

QueryCount

Graphql Query

no

The Query where to get the length of the data using gql

collectionCount

String

no

The name of the count collection

queryCountOptions

Object

no

Options that can be customize in the useQuery hook in Query Count

customParams

Function

no

Function that receive the actualPage, limit, filter and returns the object to send through params

customParamsCount

Function

no

Function that receive the actualPage, limit, filter and returns the object to send through params, just using gql it is sent to the count query

getCompleteData

Boolean

no

Make the dataTable list return everything that is inside data

disableAutoFetch

Boolean

no

Disabled auto fetch

customResponse

Function

no

Function that receive the setList state, setTotal state, and the response and returns in dataTable.list

localPaginate

Boolean

no

Enable local paginate (it avoid fetching the method on pageChange also passed the necessary props to the datatable)

paginateBottom

Boolean

no

true

Send the necessary props to the datatable to enable its bottom pagination

Results#

name

type

data

description

dataTable

Object

limitpagelistloadinglocalPaginate

The total of that will be displayed in one page

paginate

Object

totallimitonPageChangeloading

The values to filter the data

filter

Object

filterloadingonFilterSubmitinitialValues

The path where the dataTable will get the data

utils

Object

refreshListsetDataTableLoadingpage

The path where the dataTable will get the data

error

Error

error

specify the platform to do the call