refactor(DataTable): simplify search handling by removing unnecessary trimming; adjust column width handling for better responsiveness

This commit is contained in:
Marco Beretta 2025-10-26 12:21:19 +01:00
parent 1cbe3e1326
commit c6df907734
No known key found for this signature in database
GPG key ID: D918033D8E74CC11
4 changed files with 11 additions and 13 deletions

View file

@ -73,12 +73,11 @@ export default function SharedLinks() {
const [allKnownLinks, setAllKnownLinks] = useState<SharedLinkItem[]>([]);
const handleSearchChange = useCallback((value: string) => {
const trimmedValue = value.trim();
setSearchValue(trimmedValue);
setSearchValue(value);
setAllKnownLinks([]);
setQueryParams((prev) => ({
...prev,
search: trimmedValue,
search: value,
}));
}, []);

View file

@ -97,11 +97,10 @@ export default function ArchivedChatsTable() {
});
const handleSearchChange = useCallback((value: string) => {
const trimmedValue = value.trim();
setSearchValue(trimmedValue);
setSearchValue(value);
setQueryParams((prev) => ({
...prev,
search: trimmedValue,
search: value,
}));
}, []);

View file

@ -464,7 +464,7 @@ function DataTable<TData extends Record<string, unknown>, TValue>({
role="table"
aria-label={localize('com_ui_data_table')}
aria-rowcount={data.length}
className="table-fixed"
className="table-auto"
unwrapped={true}
>
<TableHeader className="sticky top-0 z-10 bg-surface-secondary">
@ -516,9 +516,7 @@ function DataTable<TData extends Record<string, unknown>, TValue>({
? {
width: `${metaWidth}%`,
maxWidth: `${metaWidth}%`,
minWidth: isSmallScreen
? `${Math.max(metaWidth * 0.7, 10)}%`
: `${metaWidth}%`,
minWidth: `${metaWidth}%`,
}
: {};
return (

View file

@ -47,6 +47,7 @@ interface TableRowComponentProps<TData extends Record<string, unknown>> {
selected: boolean;
}
// ...existing code...
const TableRowComponent = <TData extends Record<string, unknown>>(
{ row, virtualIndex, style, selected }: TableRowComponentProps<TData>,
ref: React.Ref<HTMLTableRowElement>,
@ -72,11 +73,11 @@ const TableRowComponent = <TData extends Record<string, unknown>>(
const widthStyle =
cell.column.id === 'select'
? { width: '32px', maxWidth: '32px', minWidth: '32px' }
: percent && percent >= 1 && percent <= 100
: percent
? {
width: `${percent}%`,
maxWidth: `${percent}%`,
minWidth: isSmallScreen ? `${Math.max(percent * 0.7, 10)}%` : `${percent}%`,
minWidth: `${percent}%`, // Don't shrink on mobile
}
: undefined;
@ -93,7 +94,7 @@ const TableRowComponent = <TData extends Record<string, unknown>>(
<CellComponent
key={cell.id}
className={cn(
'truncate px-2 py-2 md:px-3 md:py-3',
'max-w-0 truncate px-2 py-2 md:px-3 md:py-3',
cell.column.id === 'select' && 'w-8 p-1',
meta?.className,
isDesktopOnly && 'hidden md:table-cell',
@ -108,6 +109,7 @@ const TableRowComponent = <TData extends Record<string, unknown>>(
</TableRow>
);
};
// ...existing code...
type ForwardTableRowComponentType = <TData extends Record<string, unknown>>(
props: TableRowComponentProps<TData> & React.RefAttributes<HTMLTableRowElement>,