Poor performance on Table (Unusable atm) #4758
Comments
|
#4590 ? |
Good suggestion, could be related :) . But the hovering is no issue, It's probably hard to see in the video, but it's all interaction with the table. Here is an example with the Pro table: |
|
In my case I have around 20-30 rows and I have so much performance issues with it that I'm actually thinking of just using an styled native table instead. I have a hard time understanding the issues, trying my best to debug. Any suggestions are much appreciated. I have tried to remove all surrounding application code like navigation and such to only have HeroUI provider and the table, but it still performs sluggish. Edit: |
J4v4Scr1pt
changed the title
|
I'm having the same issue, I've been unable to memoize the rows. I get a Here is the full errorCodeimport {Button, cn, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger, Select, SelectItem, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow} from "@heroui/react";
import {Icon} from "@iconify/react";
import {memo, useMemo} from "react";
import {Departments} from "../ts/printer.ts";
import $ from "jquery";
export default function TestTablePage()
{
return (
<Table
removeWrapper
isStriped
isHeaderSticky
className={"w-auto mx-8 mt-4 grow"}
classNames={{
td: cn(
"data-[price]:!text-danger data-[mp]:!text-success data-[price]:!font-bold data-[mp]:!font-bold",
"before:!bg-transparent"
),
tr: cn(
"data-[selected=true]:!bg-primary/20 data-[selected=true]:data-[hover=true]:!bg-primary/30",
"data-[odd=true]:bg-foreground/5 data-[hover=true]:hover:bg-foreground/10 transition-colors",
"dark:data-[odd=true]:bg-default-100/10 dark:data-[hover=true]:hover:bg-default-100/50"
),
th: "dark:bg-background/50 backdrop-blur-md saturation-150 dark:brightness-150 mx-2",
base: "max-h-[calc(100dvh_-_150px)] overflow-y-auto min-h-[250px]"
}}
>
<TableHeader>
<TableColumn>UPC</TableColumn>
<TableColumn>Description</TableColumn>
<TableColumn>Retail</TableColumn>
<TableColumn>Department</TableColumn>
<TableColumn>Actions</TableColumn>
</TableHeader>
<TableBody>
{Array.from({length: 300}).map((_, index) => (
<InventoryTableRow id={index}/>
))}
</TableBody>
</Table>
);
}
// This function causes the error
const InventoryTableRow = memo(function InventoryTableRow({id}: { id: number })
{
return (
<TableRow>
<TableCell>194346264193</TableCell>
<TableCell>*HARV SHAP CKIE 12OZ</TableCell>
<TableCell>$4.48</TableCell>
<TableCell><DepartmentDropdown id={id.toString()}/></TableCell>
<TableCell>
<DropdownExample key={``} index={id}/>
</TableCell>
</TableRow>
);
});
const DropdownExample = memo(function DropdownExample({index}: { index: number })
{
return (
<Dropdown key={`action-dropdown-${index}`}>
<DropdownTrigger>
<Button>
<Icon icon="mdi:dots-vertical"/>
</Button>
</DropdownTrigger>
<DropdownMenu>
<DropdownItem key={`action-${index}`}>Action</DropdownItem>
<DropdownItem key={`another-action-${index}`}>Another action</DropdownItem>
</DropdownMenu>
</Dropdown>
);
});
const DepartmentDropdown = memo(function DepartmentDropdown({id}: { id: string })
{
const filteredDepartments = useMemo(() =>
Departments.filter(i => i.id > 0),
[Departments]
);
return (
<Select
key={`${id}-dept-selector`}
label={"Department"}
placeholder={"Select a department to print"}
radius={"full"}
classNames={{}}
onSelectionChange={selection =>
{
const dept = Departments.find(i => i.id === +(
([...selection][0] as string)
.replace(`${id}-`, "")
.trim()
))?.id ?? -1;
$(`tr#${id}`).attr("data-department", dept);
}}
>
{
filteredDepartments.map(
dept =>
<SelectItem
key={`${id}-${dept.id}`}
value={dept.name}
textValue={dept.name}
>
{dept.id} - {dept.name}
</SelectItem>
)
}
</Select>
);
});
20250131-1600-56.8630991.mp4 |
|
@Drew-Chase I also got this if I used the table components outside of the table and not directly nested. I can share my implementation on Monday when I'm back at the computer. Because I got an ok performance with a max row count of 7 and a lot of memoization. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I'm implementing a table but are experience a lot of sluggish behavior, especially if there are many rows.
Tested with react-scan and wonder if this is normal to have whole component re-render when you open the menu or just by clicking on the row with "selectionMode" set to none.
Using the "Use Case" example from the docs.
Recording.2025-01-02.163328.mp4
As a PRO user I have also tried that table but even with all the useMemoizedCallback and other memoization methods its still very sluggish to use.
Originally posted by @J4v4Scr1pt in #4480
The text was updated successfully, but these errors were encountered: