franpcode/format_twitter_projects_accounts_tweets
1
0
Fork 0
mirror of https://github.com/FranP-code/format_twitter_projects_accounts_tweets.git synced 2025-10-13 00:32:19 +00:00
Code Issues 1 Packages Projects Releases Wiki Activity

Fix table overflow and change header to Seen?

Browse Source
This commit is contained in:
Francisco Pessano
2025-07-13 21:08:03 -03:00
committed by GitHub
parent cd79e9c202
commit 4a342cfccd
1 changed files with 9 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
astro-app/src/components/ProjectsTable.tsx
View File

@@ -70,17 +70,7 @@ export function ProjectsTable({ projects, title, showUrlColumn = true, onSeenSta
const columns = useMemo(() => [ const columns = useMemo(() => [
columnHelper.display({ columnHelper.display({
id: 'seen', id: 'seen',
header: ({ table }) => ( header: "Seen?",
<div className="flex justify-center">
<input
type="checkbox"
className="w-4 h-4 rounded border-border bg-background"
checked={table.getIsAllRowsSelected()}
indeterminate={table.getIsSomeRowsSelected()}
onChange={table.getToggleAllRowsSelectedHandler()}
/>
</div>
),
cell: ({ row }) => { cell: ({ row }) => {
const projectId = row.original.id; const projectId = row.original.id;
const isSeen = seenProjects.has(projectId); const isSeen = seenProjects.has(projectId);
@@ -96,7 +86,7 @@ export function ProjectsTable({ projects, title, showUrlColumn = true, onSeenSta
</div> </div>
); );
}, },
size: 60, size: 50,
}), }),
columnHelper.accessor('author_name', { columnHelper.accessor('author_name', {
header: ({ column }) => ( header: ({ column }) => (
@@ -126,7 +116,7 @@ export function ProjectsTable({ projects, title, showUrlColumn = true, onSeenSta
</div> </div>
</div> </div>
), ),
size: 200, size: 160,
}), }),
columnHelper.accessor('project_description', { columnHelper.accessor('project_description', {
header: ({ column }) => ( header: ({ column }) => (
@@ -150,7 +140,7 @@ export function ProjectsTable({ projects, title, showUrlColumn = true, onSeenSta
<p className="text-sm leading-relaxed line-clamp-3 pr-2">{row.original.project_description}</p> <p className="text-sm leading-relaxed line-clamp-3 pr-2">{row.original.project_description}</p>
</div> </div>
), ),
size: 350, size: 280,
}), }),
...(showUrlColumn ? [ ...(showUrlColumn ? [
columnHelper.accessor('project_url', { columnHelper.accessor('project_url', {
@@ -264,7 +254,7 @@ export function ProjectsTable({ projects, title, showUrlColumn = true, onSeenSta
{row.original.favorite_count.toLocaleString()} {row.original.favorite_count.toLocaleString()}
</div> </div>
), ),
size: 100, size: 80,
}), }),
columnHelper.accessor('category', { columnHelper.accessor('category', {
header: ({ column }) => ( header: ({ column }) => (
@@ -290,7 +280,7 @@ export function ProjectsTable({ projects, title, showUrlColumn = true, onSeenSta
</span> </span>
</div> </div>
), ),
size: 140, size: 100,
}), }),
], [showUrlColumn, seenProjects]); ], [showUrlColumn, seenProjects]);
@@ -325,7 +315,7 @@ export function ProjectsTable({ projects, title, showUrlColumn = true, onSeenSta
}, [projects]); }, [projects]);
// Calculate total width // Calculate total width
const totalWidth = table.getHeaderGroups()[0]?.headers.reduce((acc, header) => acc + header.getSize(), 0) || 800; const totalWidth = table.getHeaderGroups()[0]?.headers.reduce((acc, header) => acc + header.getSize(), 0) || 700;
return ( return (
<div className="space-y-4"> <div className="space-y-4">
@@ -365,9 +355,8 @@ export function ProjectsTable({ projects, title, showUrlColumn = true, onSeenSta
</div> </div>
{/* Table Container */} {/* Table Container */}
<div className="border rounded-lg bg-card"> <div className="border rounded-lg bg-card overflow-hidden">
<div className="overflow-x-auto"> <div className="w-full">
<div className="w-full" style={{ minWidth: `${totalWidth}px` }}>
{/* Fixed Header */} {/* Fixed Header */}
<div className="sticky top-0 z-10 bg-muted/50 border-b"> <div className="sticky top-0 z-10 bg-muted/50 border-b">
{table.getHeaderGroups().map((headerGroup) => ( {table.getHeaderGroups().map((headerGroup) => (
@@ -417,8 +406,6 @@ export function ProjectsTable({ projects, title, showUrlColumn = true, onSeenSta
})} })}
</div> </div>
</div> </div>
</div>
</div>
</div> </div>
</div> </div>
); );