Using react-table instead

❓Question

From this example i know it's possible to have a limit on how many rows an user can select.

https://codesandbox.io/s/priceless-shaw-7fmyx?file=/src/App.js

but i don't have access to rows from the useTableContext you export. Is there anyway to implement a max allowed to select using your table? or should I use tanstack table directly?

❓Question

From this example i know it's possible to have a limit on how many rows an user can select.

https://codesandbox.io/s/priceless-shaw-7fmyx?file=/src/App.js

but i don't have access to rows from the useTableContext you export. Is there anyway to implement a max allowed to select using your table? or should I use tanstack table directly?

🐛 Bug report

Current Behavior

If getResult() is used, then defaultToOnlyOption never gets selected.

Expected behavior

Be able to get the selected/ default option when defaultToOnlyOption is true using getResult().

I missed that the return value for the getResult callback has to be an array. Working as expected

🐛 Bug report

Current Behavior

If getResult() is used, then defaultToOnlyOption never gets selected.

Expected behavior

Be able to get the selected/ default option when defaultToOnlyOption is true using getResult().

❓Question

https://availity.github.io/availity-react/components/table/tableControls

What's the best way of setting itemsPerPage when doing something like

    <Table
      initialState={{}}
      columns={isProviderTable ? providerColumns : columns}
      data={data}
      selectable={isProviderTable}
      sortable={isProviderTable}
      paged={isProviderTable}
      onRowSelected = {(event) => {
        if (event && event.selectedRows.length > 0) {
          setSelectedRows(event.selectedRows)
        }
      }}
    >
      <TableControls>
        <TableContent />
        <div style={{ display: 'flex', justifyContent: 'center', width: '100%' }}>
          <TableContext.Consumer>
            {({ instance }) => {
              console.log(instance);
              return (
                <Pagination
                  // itemsPerPage={instance.setPageSize(6)}
                  // itemsPerPage={6}
                  itemsPerPage={instance.state. pageSize}
                  page={instance.currentPage}
                  onPageChange={(page) => {
                    const { gotoPage } = instance;
                    gotoPage(page - 1);
                  }}
                  items={isProviderTable ? selectedUsers : preferences.preferences}
                >
                  <PaginationControls
                    className="pt-3"
                    // listClassName="pagination"
                    directionLinks
                    // showPaginationText
                    pageRange={3}
                    marginPages={1}
                  />
                </Pagination>
              )}}
          </TableContext.Consumer>
        </div>
      </TableControls>
    </Table>

for future reference

  if (instance.state.pageSize !== resultPerPage) {
    setTimeout(() => {
      instance.setPageSize(resultPerPage)
    }, 500)
  }
}

🐛 Bug report

Current Behavior

When using <Table selectable onRowSelected={(e) => console.log(e)}></Table> the onRowSelected() gets called multiple times

Expected behavior

I would like to know how to have it call my callback function only once.

Reproducible example

https://stackblitz.com/edit/react-qbhltv?file=TableComponent.js

Closing as the issue is not with

If i use the instance.setPageSize(6) withing the <Pagination></Pagination> like the example above, or before the return, the app gets into an infinite loop. FYI

❓Question

https://availity.github.io/availity-react/components/table/tableControls

What's the best way of setting itemsPerPage when doing something like

    <Table
      initialState={{}}
      columns={isProviderTable ? providerColumns : columns}
      data={data}
      selectable={isProviderTable}
      sortable={isProviderTable}
      paged={isProviderTable}
      onRowSelected = {(event) => {
        if (event && event.selectedRows.length > 0) {
          setSelectedRows(event.selectedRows)
        }
      }}
    >
      <TableControls>
        <TableContent />
        <div style={{ display: 'flex', justifyContent: 'center', width: '100%' }}>
          <TableContext.Consumer>
            {({ instance }) => {
              console.log(instance);
              return (
                <Pagination
                  // itemsPerPage={instance.setPageSize(6)}
                  // itemsPerPage={6}
                  itemsPerPage={instance.state. pageSize}
                  page={instance.currentPage}
                  onPageChange={(page) => {
                    const { gotoPage } = instance;
                    gotoPage(page - 1);
                  }}
                  items={isProviderTable ? selectedUsers : preferences.preferences}
                >
                  <PaginationControls
                    className="pt-3"
                    // listClassName="pagination"
                    directionLinks
                    // showPaginationText
                    pageRange={3}
                    marginPages={1}
                  />
                </Pagination>
              )}}
          </TableContext.Consumer>
        </div>
      </TableControls>
    </Table>

Are you getting anything back from this.loadOptions? aside from the loadOptions not setting a default value?

🐛 Bug report

Current Behavior

When using <Table selectable onRowSelected={(e) => console.log(e)}></Table> the onRowSelected() gets called multiple times

Expected behavior

I would like to know how to have it call my callback function only once.

Reproducible example

https://stackblitz.com/edit/react-qbhltv?file=TableComponent.js