API tools faq
paste
Advertisement
KoctrX

Untitled

KoctrX
Jun 14th, 2023
735
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 45.87 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  10.  
  11. <body>
  12.     <table border="1" class="tt">
  13.         <tr>
  14.             <td>TEST</td>
  15.             <td>TEST</td>
  16.             <td colspan="2" rowspan="2">TEST</td>
  17.         </tr>
  18.  
  19.         <tr>
  20.             <td>TEST</td>
  21.             <td>TEST</td>
  22.         </tr>
  23.         <tr>
  24.             <td>TEST</td>
  25.             <td>TEST</td>
  26.             <td>TEST</td>
  27.             <td>TEST</td>
  28.         </tr>
  29.     </table>
  30.  
  31.     <div id="rt" class="render_table"></div>
  32.     <div id="rt2" class="render_table"></div>
  33.     <div id="rt3" class="render_table"></div>
  34.     <div id="rt4" class="render_table"></div>
  35.  
  36.     <style>
  37.         table {
  38.             max-width: 300px;
  39.             border-collapse: collapse;
  40.         }
  41.  
  42.         .render_table {
  43.             margin-top: 20px;
  44.         }
  45.  
  46.         .render_table table {
  47.             max-width: 1000px;
  48.         }
  49.  
  50.         .render_table td div {
  51.             border: none;
  52.             padding: 0;
  53.             width: 100%;
  54.             margin: 0;
  55.             min-height: 100%;
  56.             outline: none;
  57.             text-align: center;
  58.         }
  59.  
  60.         .render_table td {
  61.             padding: 5px;
  62.         }
  63.  
  64.         td>div {
  65.             width: 100%;
  66.             height: 100%;
  67.         }
  68.     </style>
  69. </body>
  70.  
  71. </html>
  72.  
  73. <script>
  74.     const b = [[{ "colspan": false, "rowspan": false, "value": "Row 1 1", "id": "564c89ee-c3ee-473b-bfd2-f6857a4448e4", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 1 2", "id": "eacfed34-8516-415c-98cb-cb8a44ee2c12", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 1 3", "id": "9dd8d22a-c56d-4924-8791-f5e472d0be01", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 1 4", "id": "99748fb6-0733-4c5d-9cf6-3d7a007fe463", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 1 5", "id": "fd0f6c4c-0c32-438f-bbde-36132999ed01", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 1 6", "id": "41f4954d-b9cd-43cc-9956-110a1870e4d8", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 1 7", "id": "d46c0980-7e1b-4088-bf1c-01c70b4192ca", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 1 8", "id": "e655579d-0db5-4394-8692-5d7811bb22e8", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 1 9", "id": "0111e7c7-6fea-4b47-8a2f-56b0cdc7dcbd", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 1 10", "id": "12fb50cc-98e9-4103-9513-e73af49923d7", "styles": {}, "attributes": {} }], [{ "colspan": false, "rowspan": false, "value": "Row 2 1", "id": "cc2cde27-5278-43c7-a009-a67c858e4a33", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 2 2", "id": "4e088a94-9a20-4c62-b01c-a994dcb90094", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 2 3", "id": "244dcfa3-8ab4-4b1d-88f1-9fce8fd7d2ec", "styles": {}, "attributes": {} }, { "colspan": 4, "rowspan": false, "value": "Row 2 4", "id": "01476269-a06f-4bc8-8971-1c5bdd071813", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 2 8", "id": "516cb5dd-1c2e-402a-8ade-44a2bf367d38", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 2 9", "id": "d1f77561-ea1f-4a90-abf7-f6d960623b2f", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 2 10", "id": "e1ea51ca-2c4b-48aa-90b6-6eac6da3a470", "styles": {}, "attributes": {} }], [{ "colspan": false, "rowspan": false, "value": "Row 3 1", "id": "d68da4c3-67aa-4ac3-aacd-7fef9dd018ea", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 3 2", "id": "45b7e755-f43b-4ac4-a8ff-3a2a08a9c7d4", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 3 3", "id": "c156a96f-e640-4abe-b436-62ab9d6c0a3f", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 3 4", "id": "d366a9ee-4458-4ba4-bc5b-a0aca3b58958", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 3 5", "id": "e291f908-36fb-4f2d-8369-073f656fd554", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 3 6", "id": "747a6791-d583-4df7-8b87-71fb5ff1ab40", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 3 7", "id": "87751af3-77fb-4889-ae34-b8939b07c1e3", "styles": {}, "attributes": {} }, { "colspan": 2, "rowspan": false, "value": "Row 3 8", "id": "1112534f-d7f1-420e-9c27-0911dc9fd918", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 3 10", "id": "67c0e9aa-7453-4732-a6eb-22e2408d0830", "styles": {}, "attributes": {} }], [{ "colspan": false, "rowspan": false, "value": "Row 4 1", "id": "98a71ce5-c0cc-4538-8d33-1b4e52d76fff", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 4 2", "id": "a71a17b3-08b6-450b-871a-b43d8732b5bf", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 4 3", "id": "f32f7cd7-3e64-4b22-9693-dab09e59e62e", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 4 4", "id": "5d874eff-1197-4c77-8d9b-10e0ac7bd0d3", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 4 5", "id": "0ec4df8e-36d1-4efc-a1dd-1c5bb6034cba", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 4 6", "id": "91c63856-0a06-49ef-a045-b7f452633e22", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 4 7", "id": "c1ca0b12-f221-41e0-b1cf-8f4c9b957dc9", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 4 8", "id": "057f7962-69ad-4f61-9b57-faf063069c87", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 4 9", "id": "e25c0d37-5590-4c87-b2b7-1672430d14d2", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 4 10", "id": "fabde90e-2a08-42cf-bc9f-86de050a35ad", "styles": {}, "attributes": {} }], [{ "colspan": false, "rowspan": false, "value": "Row 5 1", "id": "c0e05571-d667-464c-9cec-0dd1a7749e7f", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 2", "id": "97ebf5c4-8a3a-41ca-8044-4c4d80ef7eeb", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 3", "id": "c43f2861-83c3-4079-9005-8cb40fc024f5", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 4", "id": "3d81498a-e10f-441b-b3ca-d6faf3caff92", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 5", "id": "1bbbef7c-4235-4878-ae16-c0f2d6b5d1a5", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 6", "id": "f3095ad0-d272-4cce-834a-247de92c1c95", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 7", "id": "dce2ee88-3bcf-4f72-b251-e323a6bd8736", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 8", "id": "7794d5fb-c2dc-4681-8f0f-2c222c6f8d8e", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 9", "id": "a4eec9be-1231-4c48-9195-1e872d978184", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 10", "id": "4b0cf671-411a-47dc-931c-66b4e228dc13", "styles": {}, "attributes": {} }]];
  75.     const c = [[{ "colspan": false, "rowspan": false, "value": "Row 1 1", "id": "564c89ee-c3ee-473b-bfd2-f6857a4448e4", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 1 2", "id": "eacfed34-8516-415c-98cb-cb8a44ee2c12", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 1 3", "id": "9dd8d22a-c56d-4924-8791-f5e472d0be01", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 1 4", "id": "99748fb6-0733-4c5d-9cf6-3d7a007fe463", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 1 5", "id": "fd0f6c4c-0c32-438f-bbde-36132999ed01", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 1 6", "id": "41f4954d-b9cd-43cc-9956-110a1870e4d8", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 1 7", "id": "d46c0980-7e1b-4088-bf1c-01c70b4192ca", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 1 8", "id": "e655579d-0db5-4394-8692-5d7811bb22e8", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 1 9", "id": "0111e7c7-6fea-4b47-8a2f-56b0cdc7dcbd", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 1 10", "id": "12fb50cc-98e9-4103-9513-e73af49923d7", "styles": {}, "attributes": {} }], [{ "colspan": false, "rowspan": false, "value": "Row 2 1", "id": "cc2cde27-5278-43c7-a009-a67c858e4a33", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 2 2", "id": "4e088a94-9a20-4c62-b01c-a994dcb90094", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 2 3", "id": "244dcfa3-8ab4-4b1d-88f1-9fce8fd7d2ec", "styles": {}, "attributes": {} }, { "colspan": 5, "rowspan": false, "value": "Row 2 4", "id": "01476269-a06f-4bc8-8971-1c5bdd071813", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 2 9", "id": "d1f77561-ea1f-4a90-abf7-f6d960623b2f", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 2 10", "id": "e1ea51ca-2c4b-48aa-90b6-6eac6da3a470", "styles": {}, "attributes": {} }], [{ "colspan": false, "rowspan": false, "value": "Row 3 1", "id": "d68da4c3-67aa-4ac3-aacd-7fef9dd018ea", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 3 2", "id": "45b7e755-f43b-4ac4-a8ff-3a2a08a9c7d4", "styles": {}, "attributes": {} }, { "colspan": 2, "rowspan": false, "value": "Row 3 3", "id": "c156a96f-e640-4abe-b436-62ab9d6c0a3f", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 3 5", "id": "e291f908-36fb-4f2d-8369-073f656fd554", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 3 6", "id": "747a6791-d583-4df7-8b87-71fb5ff1ab40", "styles": {}, "attributes": {} }, { "colspan": 3, "rowspan": false, "value": "Row 3 7", "id": "87751af3-77fb-4889-ae34-b8939b07c1e3", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 3 10", "id": "67c0e9aa-7453-4732-a6eb-22e2408d0830", "styles": {}, "attributes": {} }], [{ "colspan": false, "rowspan": false, "value": "Row 4 1", "id": "98a71ce5-c0cc-4538-8d33-1b4e52d76fff", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 4 2", "id": "a71a17b3-08b6-450b-871a-b43d8732b5bf", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 4 3", "id": "f32f7cd7-3e64-4b22-9693-dab09e59e62e", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 4 4", "id": "5d874eff-1197-4c77-8d9b-10e0ac7bd0d3", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 4 5", "id": "0ec4df8e-36d1-4efc-a1dd-1c5bb6034cba", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 4 6", "id": "91c63856-0a06-49ef-a045-b7f452633e22", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 4 7", "id": "c1ca0b12-f221-41e0-b1cf-8f4c9b957dc9", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 4 8", "id": "057f7962-69ad-4f61-9b57-faf063069c87", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 4 9", "id": "e25c0d37-5590-4c87-b2b7-1672430d14d2", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 4 10", "id": "fabde90e-2a08-42cf-bc9f-86de050a35ad", "styles": {}, "attributes": {} }], [{ "colspan": false, "rowspan": false, "value": "Row 5 1", "id": "c0e05571-d667-464c-9cec-0dd1a7749e7f", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 2", "id": "97ebf5c4-8a3a-41ca-8044-4c4d80ef7eeb", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 3", "id": "c43f2861-83c3-4079-9005-8cb40fc024f5", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 4", "id": "3d81498a-e10f-441b-b3ca-d6faf3caff92", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 5", "id": "1bbbef7c-4235-4878-ae16-c0f2d6b5d1a5", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 6", "id": "f3095ad0-d272-4cce-834a-247de92c1c95", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 7", "id": "dce2ee88-3bcf-4f72-b251-e323a6bd8736", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 8", "id": "7794d5fb-c2dc-4681-8f0f-2c222c6f8d8e", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 9", "id": "a4eec9be-1231-4c48-9195-1e872d978184", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 10", "id": "4b0cf671-411a-47dc-931c-66b4e228dc13", "styles": {}, "attributes": {} }]];
  76.     const d = [[{ "colspan": false, "rowspan": false, "value": "Row 1 1", "id": "564c89ee-c3ee-473b-bfd2-f6857a4448e4", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 1 2", "id": "eacfed34-8516-415c-98cb-cb8a44ee2c12", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 1 3", "id": "9dd8d22a-c56d-4924-8791-f5e472d0be01", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 1 4", "id": "99748fb6-0733-4c5d-9cf6-3d7a007fe463", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 1 5", "id": "fd0f6c4c-0c32-438f-bbde-36132999ed01", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 1 6", "id": "41f4954d-b9cd-43cc-9956-110a1870e4d8", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 1 7", "id": "d46c0980-7e1b-4088-bf1c-01c70b4192ca", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 1 8", "id": "e655579d-0db5-4394-8692-5d7811bb22e8", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 1 9", "id": "0111e7c7-6fea-4b47-8a2f-56b0cdc7dcbd", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 1 10", "id": "12fb50cc-98e9-4103-9513-e73af49923d7", "styles": {}, "attributes": {} }], [{ "colspan": false, "rowspan": false, "value": "Row 2 1", "id": "cc2cde27-5278-43c7-a009-a67c858e4a33", "styles": {}, "attributes": {} }, { "colspan": 2, "rowspan": false, "value": "Row 2 2", "id": "4e088a94-9a20-4c62-b01c-a994dcb90094", "styles": {}, "attributes": {} }/* , { "colspan": false, "rowspan": false, "value": "Row 2 3", "id": "244dcfa3-8ab4-4b1d-88f1-9fce8fd7d2ec", "styles": {}, "attributes": {} } */, { "colspan": 5, "rowspan": false, "value": "Row 2 4", "id": "01476269-a06f-4bc8-8971-1c5bdd071813", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 2 9", "id": "d1f77561-ea1f-4a90-abf7-f6d960623b2f", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 2 10", "id": "e1ea51ca-2c4b-48aa-90b6-6eac6da3a470", "styles": {}, "attributes": {} }], [{ "colspan": false, "rowspan": false, "value": "Row 3 1", "id": "d68da4c3-67aa-4ac3-aacd-7fef9dd018ea", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 3 2", "id": "45b7e755-f43b-4ac4-a8ff-3a2a08a9c7d4", "styles": {}, "attributes": {} }, { "colspan": 2, "rowspan": false, "value": "Row 3 3", "id": "c156a96f-e640-4abe-b436-62ab9d6c0a3f", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 3 5", "id": "e291f908-36fb-4f2d-8369-073f656fd554", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 3 6", "id": "747a6791-d583-4df7-8b87-71fb5ff1ab40", "styles": {}, "attributes": {} }, { "colspan": 3, "rowspan": 2, "value": "Row 3 7", "id": "87751af3-77fb-4889-ae34-b8939b07c1e3", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 3 10", "id": "67c0e9aa-7453-4732-a6eb-22e2408d0830", "styles": {}, "attributes": {} }], [{ "colspan": false, "rowspan": false, "value": "Row 4 1", "id": "98a71ce5-c0cc-4538-8d33-1b4e52d76fff", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 4 2", "id": "a71a17b3-08b6-450b-871a-b43d8732b5bf", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 4 3", "id": "f32f7cd7-3e64-4b22-9693-dab09e59e62e", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 4 4", "id": "5d874eff-1197-4c77-8d9b-10e0ac7bd0d3", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 4 5", "id": "0ec4df8e-36d1-4efc-a1dd-1c5bb6034cba", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 4 9", "id": "e25c0d37-5590-4c87-b2b7-1672430d14d2", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 4 10", "id": "fabde90e-2a08-42cf-bc9f-86de050a35ad", "styles": {}, "attributes": {} }], [{ "colspan": false, "rowspan": false, "value": "Row 5 1", "id": "c0e05571-d667-464c-9cec-0dd1a7749e7f", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 2", "id": "97ebf5c4-8a3a-41ca-8044-4c4d80ef7eeb", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 3", "id": "c43f2861-83c3-4079-9005-8cb40fc024f5", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 4", "id": "3d81498a-e10f-441b-b3ca-d6faf3caff92", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 5", "id": "1bbbef7c-4235-4878-ae16-c0f2d6b5d1a5", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 6", "id": "f3095ad0-d272-4cce-834a-247de92c1c95", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 7", "id": "dce2ee88-3bcf-4f72-b251-e323a6bd8736", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 8", "id": "7794d5fb-c2dc-4681-8f0f-2c222c6f8d8e", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 9", "id": "a4eec9be-1231-4c48-9195-1e872d978184", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 10", "id": "4b0cf671-411a-47dc-931c-66b4e228dc13", "styles": {}, "attributes": {} }]];
  77.     const d1 = [[{ "colspan": false, "rowspan": false, "value": "Row 1 1", "id": "564c89ee-c3ee-473b-bfd2-f6857a4448e4", "styles": {}, "attributes": {} }, { "colspan": 2, "rowspan": 2, "value": "Row 1 2", "id": "eacfed34-8516-415c-98cb-cb8a44ee2c12", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 1 4", "id": "99748fb6-0733-4c5d-9cf6-3d7a007fe463", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 1 5", "id": "fd0f6c4c-0c32-438f-bbde-36132999ed01", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 1 6", "id": "41f4954d-b9cd-43cc-9956-110a1870e4d8", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 1 7", "id": "d46c0980-7e1b-4088-bf1c-01c70b4192ca", "styles": {}, "attributes": {} }, { "colspan": 2, "rowspan": false, "value": "Row 1 8", "id": "e655579d-0db5-4394-8692-5d7811bb22e8", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 1 10", "id": "12fb50cc-98e9-4103-9513-e73af49923d7", "styles": {}, "attributes": {} }], [{ "colspan": false, "rowspan": false, "value": "Row 2 1", "id": "cc2cde27-5278-43c7-a009-a67c858e4a33", "styles": {}, "attributes": {} }, { "colspan": 5, "rowspan": false, "value": "Row 2 4", "id": "01476269-a06f-4bc8-8971-1c5bdd071813", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 2 9", "id": "d1f77561-ea1f-4a90-abf7-f6d960623b2f", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 2 10", "id": "e1ea51ca-2c4b-48aa-90b6-6eac6da3a470", "styles": {}, "attributes": {} }], [{ "colspan": false, "rowspan": false, "value": "Row 3 1", "id": "d68da4c3-67aa-4ac3-aacd-7fef9dd018ea", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 3 2", "id": "45b7e755-f43b-4ac4-a8ff-3a2a08a9c7d4", "styles": {}, "attributes": {} }, { "colspan": 2, "rowspan": false, "value": "Row 3 3", "id": "c156a96f-e640-4abe-b436-62ab9d6c0a3f", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 3 5", "id": "e291f908-36fb-4f2d-8369-073f656fd554", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 3 6", "id": "747a6791-d583-4df7-8b87-71fb5ff1ab40", "styles": {}, "attributes": {} }, { "colspan": 3, "rowspan": 2, "value": "Row 3 7", "id": "87751af3-77fb-4889-ae34-b8939b07c1e3", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 3 10", "id": "67c0e9aa-7453-4732-a6eb-22e2408d0830", "styles": {}, "attributes": {} }], [{ "colspan": false, "rowspan": false, "value": "Row 4 1", "id": "98a71ce5-c0cc-4538-8d33-1b4e52d76fff", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 4 2", "id": "a71a17b3-08b6-450b-871a-b43d8732b5bf", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 4 3", "id": "f32f7cd7-3e64-4b22-9693-dab09e59e62e", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 4 4", "id": "5d874eff-1197-4c77-8d9b-10e0ac7bd0d3", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 4 5", "id": "0ec4df8e-36d1-4efc-a1dd-1c5bb6034cba", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 4 9", "id": "e25c0d37-5590-4c87-b2b7-1672430d14d2", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 4 10", "id": "fabde90e-2a08-42cf-bc9f-86de050a35ad", "styles": {}, "attributes": {} }], [{ "colspan": false, "rowspan": false, "value": "Row 5 1", "id": "c0e05571-d667-464c-9cec-0dd1a7749e7f", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 2", "id": "97ebf5c4-8a3a-41ca-8044-4c4d80ef7eeb", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 3", "id": "c43f2861-83c3-4079-9005-8cb40fc024f5", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 4", "id": "3d81498a-e10f-441b-b3ca-d6faf3caff92", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 5", "id": "1bbbef7c-4235-4878-ae16-c0f2d6b5d1a5", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 6", "id": "f3095ad0-d272-4cce-834a-247de92c1c95", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 7", "id": "dce2ee88-3bcf-4f72-b251-e323a6bd8736", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 8", "id": "7794d5fb-c2dc-4681-8f0f-2c222c6f8d8e", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 9", "id": "a4eec9be-1231-4c48-9195-1e872d978184", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 10", "id": "4b0cf671-411a-47dc-931c-66b4e228dc13", "styles": {}, "attributes": {} }]];
  78.     const d2 = [[{ "colspan": false, "rowspan": false, "value": "Row 1 1", "id": "564c89ee-c3ee-473b-bfd2-f6857a4448e4", "styles": {}, "attributes": {} }, { "colspan": 8, "rowspan": 2, "value": "Row 1 2", "id": "eacfed34-8516-415c-98cb-cb8a44ee2c12", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 1 10", "id": "12fb50cc-98e9-4103-9513-e73af49923d7", "styles": {}, "attributes": {} }], [{ "colspan": false, "rowspan": false, "value": "Row 2 1", "id": "cc2cde27-5278-43c7-a009-a67c858e4a33", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 2 10", "id": "e1ea51ca-2c4b-48aa-90b6-6eac6da3a470", "styles": {}, "attributes": {} }], [{ "colspan": false, "rowspan": false, "value": "Row 3 1", "id": "d68da4c3-67aa-4ac3-aacd-7fef9dd018ea", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 3 2", "id": "45b7e755-f43b-4ac4-a8ff-3a2a08a9c7d4", "styles": {}, "attributes": {} }, { "colspan": 2, "rowspan": false, "value": "Row 3 3", "id": "c156a96f-e640-4abe-b436-62ab9d6c0a3f", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 3 5", "id": "e291f908-36fb-4f2d-8369-073f656fd554", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 3 6", "id": "747a6791-d583-4df7-8b87-71fb5ff1ab40", "styles": {}, "attributes": {} }, { "colspan": 3, "rowspan": 2, "value": "Row 3 7", "id": "87751af3-77fb-4889-ae34-b8939b07c1e3", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 3 10", "id": "67c0e9aa-7453-4732-a6eb-22e2408d0830", "styles": {}, "attributes": {} }], [{ "colspan": false, "rowspan": false, "value": "Row 4 1", "id": "98a71ce5-c0cc-4538-8d33-1b4e52d76fff", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 4 2", "id": "a71a17b3-08b6-450b-871a-b43d8732b5bf", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 4 3", "id": "f32f7cd7-3e64-4b22-9693-dab09e59e62e", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 4 4", "id": "5d874eff-1197-4c77-8d9b-10e0ac7bd0d3", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 4 5", "id": "0ec4df8e-36d1-4efc-a1dd-1c5bb6034cba", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 4 9", "id": "e25c0d37-5590-4c87-b2b7-1672430d14d2", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 4 10", "id": "fabde90e-2a08-42cf-bc9f-86de050a35ad", "styles": {}, "attributes": {} }], [{ "colspan": false, "rowspan": false, "value": "Row 5 1", "id": "c0e05571-d667-464c-9cec-0dd1a7749e7f", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 2", "id": "97ebf5c4-8a3a-41ca-8044-4c4d80ef7eeb", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 3", "id": "c43f2861-83c3-4079-9005-8cb40fc024f5", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 4", "id": "3d81498a-e10f-441b-b3ca-d6faf3caff92", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 5", "id": "1bbbef7c-4235-4878-ae16-c0f2d6b5d1a5", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 6", "id": "f3095ad0-d272-4cce-834a-247de92c1c95", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 7", "id": "dce2ee88-3bcf-4f72-b251-e323a6bd8736", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 8", "id": "7794d5fb-c2dc-4681-8f0f-2c222c6f8d8e", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 9", "id": "a4eec9be-1231-4c48-9195-1e872d978184", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 10", "id": "4b0cf671-411a-47dc-931c-66b4e228dc13", "styles": {}, "attributes": {} }]];
  79.     const d3 = [[{ "colspan": 9, "rowspan": 2, "value": "Row 1 1", "id": "564c89ee-c3ee-473b-bfd2-f6857a4448e4", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 1 10", "id": "12fb50cc-98e9-4103-9513-e73af49923d7", "styles": {}, "attributes": {} }], [{ "colspan": false, "rowspan": false, "value": "Row 2 10", "id": "e1ea51ca-2c4b-48aa-90b6-6eac6da3a470", "styles": {}, "attributes": {} }], [{ "colspan": false, "rowspan": false, "value": "Row 3 1", "id": "d68da4c3-67aa-4ac3-aacd-7fef9dd018ea", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 3 2", "id": "45b7e755-f43b-4ac4-a8ff-3a2a08a9c7d4", "styles": {}, "attributes": {} }, { "colspan": 2, "rowspan": false, "value": "Row 3 3", "id": "c156a96f-e640-4abe-b436-62ab9d6c0a3f", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 3 5", "id": "e291f908-36fb-4f2d-8369-073f656fd554", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 3 6", "id": "747a6791-d583-4df7-8b87-71fb5ff1ab40", "styles": {}, "attributes": {} }, { "colspan": 3, "rowspan": 2, "value": "Row 3 7", "id": "87751af3-77fb-4889-ae34-b8939b07c1e3", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 3 10", "id": "67c0e9aa-7453-4732-a6eb-22e2408d0830", "styles": {}, "attributes": {} }], [{ "colspan": false, "rowspan": false, "value": "Row 4 1", "id": "98a71ce5-c0cc-4538-8d33-1b4e52d76fff", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 4 2", "id": "a71a17b3-08b6-450b-871a-b43d8732b5bf", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 4 3", "id": "f32f7cd7-3e64-4b22-9693-dab09e59e62e", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 4 4", "id": "5d874eff-1197-4c77-8d9b-10e0ac7bd0d3", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 4 5", "id": "0ec4df8e-36d1-4efc-a1dd-1c5bb6034cba", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 4 9", "id": "e25c0d37-5590-4c87-b2b7-1672430d14d2", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 4 10", "id": "fabde90e-2a08-42cf-bc9f-86de050a35ad", "styles": {}, "attributes": {} }], [{ "colspan": false, "rowspan": false, "value": "Row 5 1", "id": "c0e05571-d667-464c-9cec-0dd1a7749e7f", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 2", "id": "97ebf5c4-8a3a-41ca-8044-4c4d80ef7eeb", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 3", "id": "c43f2861-83c3-4079-9005-8cb40fc024f5", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 4", "id": "3d81498a-e10f-441b-b3ca-d6faf3caff92", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 5", "id": "1bbbef7c-4235-4878-ae16-c0f2d6b5d1a5", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 6", "id": "f3095ad0-d272-4cce-834a-247de92c1c95", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 7", "id": "dce2ee88-3bcf-4f72-b251-e323a6bd8736", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 8", "id": "7794d5fb-c2dc-4681-8f0f-2c222c6f8d8e", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 9", "id": "a4eec9be-1231-4c48-9195-1e872d978184", "styles": {}, "attributes": {} }, { "colspan": false, "rowspan": false, "value": "Row 5 10", "id": "4b0cf671-411a-47dc-931c-66b4e228dc13", "styles": {}, "attributes": {} }]];
  80.  
  81.     const tb = new class {
  82.         constructor() {
  83.             this.config = { cols: 10, rows: 5 };
  84.             this.table = new Array(this.config.rows).fill(false).map((t, i) => new Array(this.config.cols)
  85.                 .fill(false).map((r, j) => this.createEmpty({ value: `Row ${i + 1} ${j + 1}` })));
  86.  
  87.             this.table = b;
  88.             this.table = c;
  89.             this.table = d;
  90.             this.table = d1;
  91.             this.table = d2;
  92.             this.table = d3;
  93.         }
  94.  
  95.         uuidv4() {
  96.             return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
  97.                 (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
  98.             );
  99.         }
  100.  
  101.         findCeilCoordsById(data = [], ceilId = false) {
  102.             return data.reduce((result, items, i) => {
  103.                 items.forEach((item, j) => {
  104.                     if (item.id == ceilId) result.push({ i, j });
  105.                 });
  106.  
  107.                 return result;
  108.             }, []);
  109.         }
  110.  
  111.         getCeilById(ceildId) {
  112.             return this.table.reduce((result, items) => {
  113.                 const item = items.find(it => it.id == ceildId);
  114.                 if (item) return item;
  115.  
  116.                 return result;
  117.             }, false);
  118.         }
  119.  
  120.         addRow(cellId = 'e291f908-36fb-4f2d-8369-073f656fd554', to = 'after') { // row 3 5
  121.             let data = this.reparse();
  122.             let rowIndex = data.findIndex(items => items.find(q => q.id == cellId));
  123.             let append = false;
  124.             if (rowIndex == -1) {
  125.                 rowIndex = to == 'after' ? data.length - 1 : 0;
  126.                 append = true;
  127.             }
  128.  
  129.             const maxCols = Math.max(...data.map(items => items.reduce((r, item) => r + (item.colspan || 1), 0)));
  130.             const indexRows = to == 'after' ? rowIndex : rowIndex - 1;
  131.  
  132.             const arr = new Array(maxCols).fill(false)
  133.                 .map(q => tb.createEmpty())
  134.                 .map((item, index) => {
  135.                     if (data[indexRows] && !append) {
  136.                         const item = data[indexRows][index];
  137.                         const { positions } = this.calculatePositions(item.id, data);
  138.                         const firstItem = data[positions.y][positions.x];
  139.  
  140.                         console.log('positions', positions);
  141.                         if (positions.x == index) {
  142.                             if (firstItem && firstItem.cache && firstItem.cache.rowspan > 1) {
  143.                                 data[positions.y][positions.x].cache.rowspan += 1;
  144.                             }
  145.                         } else {
  146.                             if (firstItem && firstItem.cache && firstItem.cache.rowspan > 1) return false;
  147.                         }
  148.                     }
  149.                    
  150.                 }).filter(q => q);
  151.                
  152.             data.splice(rowIndex + 1, 0, arr);
  153.             data = data.reduce((result, items) => {
  154.                 result.push(items.reduce((r2, item) => {
  155.                     if(!result.find(r => r.find(q => q.id == item.id))) {
  156.                         console.log('WTF: ', item.value);
  157.                         item.rowspan = item.cache ? item.cache.rowspan : 1;
  158.                         item.colspan = item.cache ? item.cache.colspan : 1;
  159.                         delete item.cache;
  160.  
  161.                         r2.push(item);
  162.                     }
  163.  
  164.                     return r2;
  165.                 }, []));
  166.  
  167.                 return result;
  168.             }, []);
  169.  
  170.             tb.insertTable(document.getElementById('rt3'), data);
  171.         }
  172.  
  173.         addCol(ceilId, to = 'after') {
  174.             const { positions: coords } = this.calculatePositions(ceilId, this.table, false, []);
  175.             const ceil = this.getCeilById(ceilId);
  176.  
  177.             // this.table.forEach((items, i) => {
  178.             //     this.table[]
  179.             // });
  180.         }
  181.  
  182.         clone(data = {}) {
  183.             return JSON.parse(JSON.stringify(data));
  184.         }
  185.  
  186.         calculateShiftBlock(data = [], ceilId = false, direction = 'left') {
  187.             const haveInArray = data.find(items => items.find(item => item.id == ceilId));
  188.             if (!haveInArray) return false;
  189.  
  190.             const { positions } = this.calculatePositions(ceilId, data);
  191.             let result = false;
  192.  
  193.             if (['bottom', 'top'].includes(direction)) {
  194.                 const line = direction == 'bottom' ? positions.bottom : positions.y;
  195.                 const incr = direction == 'bottom' ? 1 : -1;
  196.                 if (data[line + incr]) {
  197.                     const ceils = data[line + incr].filter((ceil, i) => i >= positions.x && i <= positions.right);
  198.  
  199.                     result = ceils.reduce((result, ceil) => {
  200.                         return this.calculatePositions(ceil.id, data, result.positions, result.skip);
  201.                     }, { skip: [ceilId], positions });
  202.                 }
  203.             } else if (['left', 'right'].includes(direction)) {
  204.                 const line = direction == 'right' ? positions.right : positions.x;
  205.                 const incr = direction == 'right' ? 1 : -1;
  206.                 if (data[positions.y] && data[positions.y][line + incr]) {
  207.                     const ceils = new Array((positions.bottom - positions.y) + 1).fill(false).map((q, i) => {
  208.                         return data[positions.y + i][line + incr];
  209.                     });
  210.  
  211.                     result = ceils.reduce((result, ceil) => {
  212.                         return this.calculatePositions(ceil.id, data, result.positions, result.skip);
  213.                     }, { skip: [ceilId], positions });
  214.                 }
  215.             }
  216.  
  217.             if (!result) return false;
  218.             const itemUpdate = data[result.positions.y][result.positions.x];
  219.             const toRemoveItems = data.reduce((r, items) => {
  220.                 items.forEach(item => {
  221.                     if (result.skip.find(s => s == item.id) && itemUpdate.id !== item.id && !r.find(q => q == item.id))
  222.                         r.push(item.id);
  223.                 });
  224.  
  225.                 return r;
  226.             }, []);
  227.  
  228.             let colspan = (result.positions.right - result.positions.x) + 1;
  229.             let rowspan = (result.positions.bottom - result.positions.y) + 1;
  230.  
  231.             const maxCols = Math.max(...data.map(items => items.reduce((result, item) => result + (item.colspan || 1), 0)));
  232.             if (maxCols >= colspan && rowspan > 1) rowspan = 1;
  233.  
  234.             return { itemUpdate: { ...itemUpdate, colspan, rowspan }, toRemoveItems };
  235.         }
  236.  
  237.         findCeilsByPositions(data, positions = {}, skip = []) {
  238.             return data.reduce((result, items, y) => {
  239.                 items.forEach((item, x) => {
  240.                     if (x >= positions.x && y >= positions.y && positions.bottom >= y && positions.right >= x) {
  241.                         if (!skip.find(s => s == item.id)) result.push(item.id);
  242.                     }
  243.                 });
  244.  
  245.                 return result;
  246.             }, []);
  247.         }
  248.  
  249.         calculatePositions(ceilId, data, lastPositions = false, skip = []) {
  250.             const positions = this.findCeilCoordsById(data, ceilId);
  251.  
  252.             let x = Math.min(...positions.map(q => q.j));
  253.             let y = Math.min(...positions.map(q => q.i));
  254.             let bottom = Math.max(...positions.map(q => q.i));
  255.             let right = Math.max(...positions.map(q => q.j));
  256.  
  257.             if (!lastPositions) return { positions: { x, y, bottom, right }, skip };
  258.             if (x < lastPositions.x) lastPositions.x = x;
  259.             if (y < lastPositions.y) lastPositions.y = y;
  260.             if (right > lastPositions.right) lastPositions.right = right;
  261.             if (bottom > lastPositions.bottom) lastPositions.bottom = bottom;
  262.  
  263.             skip.push(ceilId);
  264.             const ceils = this.findCeilsByPositions(data, lastPositions, skip);
  265.             for (const c of ceils) {
  266.                 const res = this.calculatePositions(c, data, lastPositions, skip);
  267.                 skip = res.skip;
  268.                 lastPositions = res.positions;
  269.             }
  270.  
  271.             return { skip, positions: lastPositions };
  272.         }
  273.  
  274.         reparse(dataTable = false) {
  275.             const data = this.clone(dataTable || this.table);
  276.             const styles = { background: '#00968855', color: '#000000' };
  277.             const parseItem = (item, styles = {}) => {
  278.                 return this.clone({ ...item, cache: { rowspan: item.rowspan, colspan: item.colspan }, rowspan: 1, colspan: 1, styles });
  279.             };
  280.  
  281.             const modify = [];
  282.             this.clone(data).reduce((r, items, i) => {
  283.                 items.reduce((r2, item, j) => {
  284.                     const rows = item ? (item.rowspan || 1) : 1;
  285.                     const cols = item ? (item.colspan || 1) : 1;
  286.  
  287.                     if (item) {
  288.                         if (rows > 1) {
  289.                             new Array(rows).fill(false).forEach((q, io) => {
  290.                                 if (io > 0 && data[r + io]) {
  291.                                     const arr = new Array(cols).fill(false).map(q => parseItem({
  292.                                         ...item, value: 'update row', isClone: true
  293.                                     }, styles));
  294.  
  295.  
  296.                                     data[r + io].splice(r2, 0, ...arr);
  297.                                     modify.push(item.id);
  298.                                 }
  299.                             });
  300.                         }
  301.  
  302.                         if (cols > 1) {
  303.                             if (data[r + 1]) {
  304.                                 const arr = new Array(cols - 1).fill(false)
  305.                                     .map(q => parseItem({ ...item, value: 'update col', isClone: true }, styles));
  306.  
  307.                                 data[r].splice(r2 + 1, 0, ...arr);
  308.                                 modify.push(item.id);
  309.                             }
  310.                         }
  311.                     }
  312.  
  313.                     return r2 + cols;
  314.                 }, 0);
  315.  
  316.                 const minRow = Math.min(...[...items.map(q => (q.rowspan || 1)), 1]);
  317.                 return r + minRow;
  318.             }, 0);
  319.  
  320.             return data.reduce((result, items) => {
  321.                 result.push(items.reduce((r, item) => {
  322.                     r.push(parseItem(item, modify.find(m => m == item.id) ? styles : {}));
  323.  
  324.                     return r;
  325.                 }, []));
  326.  
  327.                 return result;
  328.             }, []);
  329.         }
  330.  
  331.         createEmpty(options = {}) {
  332.             return {
  333.                 colspan: false, rowspan: false, value: ``, id: this.uuidv4(),
  334.                 styles: {}, attributes: {}, ...options
  335.             }
  336.         }
  337.  
  338.         renderTable(data = false) {
  339.             let html = '<table border="1">';
  340.             for (const col of data || this.table) {
  341.                 let tr = '<tr>';
  342.  
  343.                 for (const row of col) {
  344.                     const stylesString = Object.entries((row.styles || {}))
  345.                         .reduce((res, [key, val]) => res += `${key}:${val};`, '');
  346.  
  347.                     const colspan = row.colspan ? ` colspan="${row.colspan}"` : '';
  348.                     const rowspan = row.rowspan ? ` rowspan="${row.rowspan}"` : '';
  349.                     let q = '';
  350.  
  351.                     if (row.isClone) { q = 'background: #96300055;'; }
  352.                     tr += `<td${colspan}${rowspan} data-id="${row.id}" style="${stylesString}${q}">
  353.                         <div contentEditable>${row.value}</div>
  354.                     </td>`;
  355.                 }
  356.  
  357.                 html += `${tr}</tr>`;
  358.             }
  359.  
  360.             return `${html}</table>`;
  361.         }
  362.  
  363.         findPositionsCeilById(id) {
  364.             return this.table.reduce((result, data, i) => {
  365.                 data.reduce((r, item, j) => {
  366.                     if (item.id == id) result = { i, j: r };
  367.                 }, 0);
  368.  
  369.                 return result;
  370.             }, { i: 0, j: 0 });
  371.         }
  372.  
  373.         margeCells(cellId, to = 'left') {
  374.             const result = this.calculateShiftBlock(this.reparse(this.table), cellId, to);
  375.             if (!result) return false;
  376.  
  377.             this.table = this.table.reduce((r, items) => {
  378.                 items = items.map(item => {
  379.                     if (item.id == result.itemUpdate.id) return {
  380.                         ...item, rowspan: result.itemUpdate.rowspan,
  381.                         colspan: result.itemUpdate.colspan,
  382.                     };
  383.  
  384.                     if (result.toRemoveItems.find(rd => rd == item.id)) return false;
  385.  
  386.                     return item;
  387.                 }).filter(q => q);
  388.  
  389.                 if (items.length) r.push(items);
  390.                 return r;
  391.             }, []);
  392.  
  393.             this.insertTable();
  394.         }
  395.  
  396.         updateTableByRules(rules = []) {
  397.             this.table = this.table.reduce((result, data) => {
  398.                 const updatedRules = data.reduce((r, item) => {
  399.                     const rulesFilter = rules.filter(r => r.id == item.id);
  400.                     if (rulesFilter && rulesFilter.length) {
  401.                         for (let i = 0; i < rulesFilter.length; i++) {
  402.                             const rule = rulesFilter[i];
  403.  
  404.                             if (rule) {
  405.                                 if (rule.type == 'append') {
  406.                                     r.push(item, this.createEmpty(rule.opts));
  407.                                 } else {
  408.                                     item = { ...item, ...rule.opts };
  409.                                     if (r.find(d => d.id == item.id)) {
  410.                                         r = r.map(a => a.id == item.id ? ({ ...a, ...item }) : a)
  411.                                     } else {
  412.                                         r.push(item);
  413.                                     }
  414.                                 }
  415.                             } else if (i == 0) { r.push(item); }
  416.                         }
  417.                     } else {
  418.                         r.push(item);
  419.                     }
  420.  
  421.                     return r;
  422.                 }, []);
  423.  
  424.                 result.push(updatedRules);
  425.                 return result;
  426.             }, []);
  427.         }
  428.  
  429.         insertTable(element = document.getElementById('rt'), data = false) {
  430.             element.innerHTML = this.renderTable(data);
  431.         }
  432.     }
  433.  
  434.     tb.insertTable();
  435.     tb.insertTable(document.getElementById('rt2'), tb.reparse());
  436.  
  437.     Array.from(document.querySelector('.tt').querySelectorAll('td')).forEach(td => td.innerHTML = 'Lorem ipsum dolor sit amet consectetur');
  438. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!