import ExcelJS from 'exceljs';
import { saveAs } from 'file-saver';

function TableComponent() {
  const downloadExcel = async () => {
    const table = document.getElementById("my-table");
    const workbook = new ExcelJS.Workbook();
    const worksheet = workbook.addWorksheet("My Sheet");

    const rows = Array.from(table.rows);
    const columnHeaders = rows.shift().cells; // Предполагаем, что первая строка содержит заголовки

    // Установка заголовков столбцов
    worksheet.columns = Array.from(columnHeaders).map((header, index) => ({
      header: header.innerText,
      key: `col${index}`,
      width: 15,
    }));

    // Добавление данных в лист
    rows.forEach((tr) => {
      const data = Array.from(tr.cells).map((td) => td.innerText);
      worksheet.addRow(data);
    });

    // Скачивание файла
    const buffer = await workbook.xlsx.writeBuffer();
    const blob = new Blob([buffer], {
      type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
    });
    saveAs(blob, "tableData.xlsx");
  };

  return (
    <div>
      <table id="my-table">
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Price</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Item 1</td>
            <td>100</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Item 2</td>
            <td>200</td>
          </tr>
          {/* Другие строки */}
        </tbody>
      </table>
      <button onClick={downloadExcel}>Download as XLSX</button>
    </div>
  );
}