#Pagination error when rendering a table inside a tab

1 messages · Page 1 of 1 (latest)

charred nova
#

I've made a custom table component that uses Table from nextui with pagination. Rendering the table inside a page has pagination working correctly. When I put the table in the non-selected tab when the page is rendered, the selected page <span> is on top of the go-to-previous-page button. And in the elements tab I see that the inline style is
style="transform: translateX(0px) scale(1); instead of the style="transform: translateX(40px) scale(1);. I did some digging around and I found out that when I dont have the prop
destroyInactiveTabPanel={false} in the Tabs component, the pagination renders fine. The problem is that I do want to prevent the app from destroying the inactive tab. Is there a fix on this problem? For pagination im using the example from https://nextui.org/docs/components/table#paginated-table and this is my tabs usage

# 
<Tabs 
      aria-label='File tabs'
      classNames={{
        // tabList: "gap-6 w-full relative rounded-none p-0 ",
        cursor: "w-full bg-[--primary-color] dark:bg-[--primary-color]",
        // tab: "max-w-fit px-0 h-12",
        // tabContent: "group-data-[selected=true]:text-[--primary-color]",
        panel: 'flex h-[calc(100%-40px)] px-0 pb-0',
      }}
      // variant="underlined"
      destroyInactiveTabPanel={false}
    >
      <Tab 
        key="preview"
        title={
          <div className="flex items-center space-x-2">
              <PiFileMagnifyingGlass className="h-5 w-5" />
              <span>{translations.file_preview}</span>
          </div>
        }
      >
        <FileViewFrame
          fileType={fileData.mime_type}
          fileName={fileData.name}
          fileId={fileData.id}
          session={session}
          noPreview={translations.no_preview}
        />
      </Tab>
      <Tab 
        key="activity" 
        title={
            <div className="flex items-center space-x-2">
                <BsActivity className="h-5 w-5" />
                <span>{translations.file_activity}</span>
            </div>
          }
      >
        <TableComponent 
          columns={activityTableColumns}
          rows={activityTableRows}
          classNames={classNames}
          isHeaderSticky
          tableLabel={"Activity table"}
          rowsPerPageOptions={rowsPerPageOptions}
          emptyContent={translations.no_activity}
          bottomContentPlacement="outside"
        />
      </Tab>
    </Tabs>
upbeat kernel
#

i think someone reported that before

charred nova
#

I searched but didnt manage to find anything similar on discord/github . Was there a solution found?

sand steppe
charred nova
#

yes?

sand steppe
#

hi, are you there?

charred nova
#

yes

charred nova
#

@upbeat kernel @sand steppe I got a similar error, where the selected page isnt shown at all, on a table that I use async pagination as used in the docs and I came to the conclusion that the data-moving attribute on pagination as well as the inline style is not applied when page loads. This is the selected page span tag as soon as the page loads:

<span aria-hidden="true" data-slot="cursor" class="absolute flex overflow-visible items-center justify-center origin-center left-0 select-none touch-none pointer-events-none z-20 bg-primary text-primary-foreground data-[moving=true]:transition-transform !data-[moving=true]:duration-300 opacity-0 data-[moving]:opacity-100 min-w-9 w-9 h-9 text-small rounded-medium">1</span>
upbeat kernel
#

someone has created a PR. but im still waiting for him to add the test cases

sand steppe