rocksky.app
A decentralized music tracking and discovery platform built on AT Protocol 馃幍
rocksky.app
spotify
atproto
lastfm
musicbrainz
scrobbling
listenbrainz
tsiry-sandratraina.com
1import styled from "@emotion/styled";
2import {
3 AccessorKeyColumnDefBase,
4 flexRender,
5 getCoreRowModel,
6 IdIdentifier,
7 useReactTable,
8} from "@tanstack/react-table";
9import { FC, useEffect, useState } from "react";
10import { File } from "../../types/file";
11
12const TableRow = styled.tr`
13 height: 48px;
14 color: var(--color-text) !important;
15 &:hover {
16 background-color: var(--color-menu-hover);
17 }
18`;
19
20export type TableProps = {
21 columns: (AccessorKeyColumnDefBase<File, string | undefined> &
22 Partial<IdIdentifier<File, string | undefined>>)[];
23 files: File[];
24};
25
26const Table: FC<TableProps> = ({ columns, files }) => {
27 const [data, setData] = useState<File[]>(() => [...files]);
28
29 useEffect(() => {
30 setData([...files]);
31 }, [files]);
32
33 const table = useReactTable({
34 data,
35 columns,
36 getCoreRowModel: getCoreRowModel(),
37 });
38
39 return (
40 <table className="mt-[0px] w-[770px]">
41 <thead>
42 {table.getHeaderGroups().map((headerGroup) => (
43 <tr
44 key={headerGroup.id}
45 className="h-[36px] text-[var(--color-text)]"
46 >
47 {headerGroup.headers.map((header) => (
48 <th key={header.id} className="text-left">
49 {header.isPlaceholder
50 ? null
51 : flexRender(
52 header.column.columnDef.header,
53 header.getContext(),
54 )}
55 </th>
56 ))}
57 </tr>
58 ))}
59 </thead>
60 <tbody>
61 {table.getRowModel().rows.map((row) => (
62 <TableRow key={row.id}>
63 {row.getVisibleCells().map((cell) => (
64 <td
65 key={cell.id}
66 className="overflow-hidden !text-[var(--color-text)]"
67 >
68 {flexRender(cell.column.columnDef.cell, cell.getContext())}
69 </td>
70 ))}
71 </TableRow>
72 ))}
73 </tbody>
74 </table>
75 );
76};
77
78export default Table;