mirror of https://github.com/usememos/memos
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
import { Node, TableNode_Row } from "@/types/proto/api/v1/markdown_service";
|
|
import Renderer from "./Renderer";
|
|
|
|
interface Props {
|
|
index: string;
|
|
header: Node[];
|
|
rows: TableNode_Row[];
|
|
}
|
|
|
|
const Table = ({ header, rows }: Props) => {
|
|
return (
|
|
<table className="w-auto max-w-full border border-zinc-200 dark:border-zinc-600 divide-y divide-zinc-200 dark:divide-zinc-600">
|
|
<thead className="text-sm font-medium leading-5 text-left text-gray-900 dark:text-gray-400">
|
|
<tr className="divide-x divide-zinc-200 dark:divide-zinc-600">
|
|
{header.map((h, i) => (
|
|
<th key={i} className="py-1 px-2">
|
|
<Renderer key={`${h.type}-${i}`} index={String(i)} node={h} />
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-zinc-200 dark:divide-zinc-600 text-sm leading-5 text-left text-gray-900 dark:text-gray-400">
|
|
{rows.map((row, i) => (
|
|
<tr key={i} className="divide-x divide-zinc-200 dark:divide-zinc-600">
|
|
{row.cells.map((r, j) => (
|
|
<td key={j} className="py-1 px-2">
|
|
<Renderer key={`${r.type}-${i}-${j}`} index={String(j)} node={r} />
|
|
</td>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
);
|
|
};
|
|
|
|
export default Table;
|