react-table#useAsyncDebounce JavaScript Examples

The following examples show how to use react-table#useAsyncDebounce. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Table.js    From CampaignFinance with MIT License 5 votes vote down vote up 
export default function Table({
  columns,
  data,
  onFetchData,
  initialSortBy,
  isLoading = false,
}) {
  const defaultColumn = React.useMemo(
    () => ({
      disableFilters: true,
      disableSortBy: true,
    }),
    []
  )

  // Use the useTable Hook to send the columns and data to build the table
  const {
    getTableProps, // table props from react-table
    getTableBodyProps, // table body props from react-table
    headerGroups, // headerGroups, if your table has groupings
    rows, // rows for the table based on the data passed
    prepareRow, // Prepare the row (this function needs to be called for each row before getting the row props)
    state: { sortBy, filters }, // track the current sort and filter state so we can call appropriate callbacks
  } = useTable(
    {
      columns,
      data,
      defaultColumn,
      initialState: initialSortBy ? { sortBy: initialSortBy } : undefined,
      disableMultiSort: true,
      manualSortBy: true,
      manualFilters: true,
    },
    useFilters,
    useGlobalFilter,
    useSortBy
  )

  // 250ms debounce
  const onFetchDataDebounced = useAsyncDebounce(onFetchData, 250)

  useEffect(() => {
    if (onFetchData) {
      onFetchDataDebounced({ filters, sortBy })
    }
  }, [onFetchData, onFetchDataDebounced, filters, sortBy])

  return (
    <USTable bordered={true} fullWidth={true} {...getTableProps()}>
      <thead>
        {headerGroups.map((headerGroup) => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map((column) => (
              <th {...column.getHeaderProps()}>
                <div {...column.getSortByToggleProps()}>
                  {column.render('Header')}
                  {column.isSortedDesc === true && (
                    <img
                      src={SortDescending}
                      alt="Descending"
                      style={{
                        verticalAlign: 'middle',
                        marginLeft: '2px',
                        position: 'absolute',
                        marginTop: '4px',
                      }}
                      height="18px"
                      width="18px"
                    />
                  )}
                  {column.isSortedDesc === false && (
                    <img
                      src={SortAscending}
                      alt="Ascending"
                      style={{
                        verticalAlign: 'middle',
                        marginLeft: '2px',
                        position: 'absolute',
                        marginTop: '4px',
                      }}
                      height="18px"
                      width="18px"
                    />
                  )}
                  {column.canSort && column.isSortedDesc === undefined && (
                    <img
                      src={SortUnsorted}
                      alt="Unsorted"
                      style={{
                        verticalAlign: 'middle',
                        marginLeft: '2px',
                        position: 'absolute',
                        marginTop: '4px',
                      }}
                      height="18px"
                      width="18px"
                    />
                  )}
                </div>
                <div>{column.canFilter && column.render('Filter')}</div>
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {isLoading ? (
          <tr>
            <td colSpan={columns.length}>
              <Spinner />
            </td>
          </tr>
        ) : (
          <>
            {rows.map((row, i) => {
              prepareRow(row)
              return (
                <tr {...row.getRowProps()}>
                  {row.cells.map((cell) => {
                    return (
                      <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                    )
                  })}
                </tr>
              )
            })}
          </>
        )}
      </tbody>
    </USTable>
  )
}