react-window markdown

App.tsx

"use client";
import Box from "@mui/joy/Box";
import Sheet from "@mui/joy/Sheet";
import Table from "@mui/joy/Table";
import { FixedSizeList as List } from "react-window";

const generateMarkdownTable = (numRows: number) => {
  const header = `
| date | key | new_confirmed|new_deceased|new_recovered|new_tested|cumulative_confirmed|cumulative_decreased|cumulative_recovered|cumulative_tested|
|--:|:--|:--|--:|--:|--:|--:|--:|--:|--:|--:|`;

  const rows = [];
  for (let i = 0; i < numRows; i++) {
    rows.push(
      `| ${i} | Row${i} | Row${i} | Row${i} | Row${i} | Row${i} | Row${i} | Row${i} | Row${i} | Row${i} | Row${i} |`
    );
  }

  return `${header}${rows.join("\n")}`;
};

const markdownTableString = generateMarkdownTable(5000);

const parseMarkdownTable = (markdown: string) => {
  const lines = markdown.trim().split("\n");
  const header = lines[0]
    .split("|")
    .map((cell) => cell.trim())
    .slice(0, -1);
  const rows = lines
    .slice(2)
    .map((line) => line.split("|").map((cell) => cell.trim()))
    .map((row) => row.filter((cell) => cell !== ""));

  return { header, rows };
};

const { header, rows } = parseMarkdownTable(markdownTableString);

const Demo = () => {
  // 计算表头和行的单元格宽度
  const cellWidth = 60;

  return (
    <Box
      sx={{
        position: "relative",
        maxHeight: "400px",
        maxWidth: "1000px",
        overflow: "auto",
      }}
    >
      <Sheet
        variant="soft"
        color="neutral"
        sx={{
          // paddingX: 2.7,
          // paddingY: 2.7,
          borderRadius: 8,
        }}
      >
        <Table
          color="neutral"
          size="sm"
          stickyHeader={false}
          stickyFooter={false}
          stripe="odd"
          variant="outlined"
          borderAxis="both"
          hoverRow={true}
          sx={{
            "--Table-headerUnderlineThickness": "3px",
          }}
        >
          <thead>
            <tr>
              {header.map((cell, index) => (
                <th key={index} style={{ width: cellWidth }}>
                  {cell}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            <List
              height={400}
              itemCount={rows.length}
              itemSize={40}
              width={1000}
            >
              {({ index, style }) => {
                const row = rows[index];
                return (
                  <div key={index} style={{ ...style, height: 35 }}>
                    <table style={{ width: "100%" }}>
                      <tbody>
                        <tr>
                          {row.map((cell, cellIndex) => (
                            <td key={cellIndex} style={{ width: cellWidth }}>
                              {cell}
                            </td>
                          ))}
                        </tr>
                      </tbody>
                    </table>
                  </div>
                );
              }}
            </List>
          </tbody>
        </Table>
      </Sheet>
    </Box>
  );
};

const Page = () => {
  return (
    <>
      <Demo />
    </>
  );
};

export default Page;