{"id":82964,"date":"2024-11-08T05:27:46","date_gmt":"2024-11-08T01:57:46","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/i-created-a-plugin-for-adding-sort-search-and-pagination-functions-to-markdown-tables-in-growi-52h2\/"},"modified":"2024-11-08T05:27:46","modified_gmt":"2024-11-08T01:57:46","slug":"i-created-a-plugin-for-adding-sort-search-and-pagination-functions-to-markdown-tables-in-growi-52h2","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/i-created-a-plugin-for-adding-sort-search-and-pagination-functions-to-markdown-tables-in-growi-52h2\/","title":{"rendered":"\u0645\u0646 \u06cc\u06a9 \u0627\u0641\u0632\u0648\u0646\u0647 \u0628\u0631\u0627\u06cc \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u062a\u0648\u0627\u0628\u0639 \u0645\u0631\u062a\u0628 \u0633\u0627\u0632\u06cc\u060c \u062c\u0633\u062a\u062c\u0648 \u0648 \u0635\u0641\u062d\u0647 \u0628\u0646\u062f\u06cc \u0628\u0647 \u062c\u062f\u0627\u0648\u0644 Markdown \u062f\u0631 GROWI \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0645."},"content":{"rendered":"<p>Summarize this content to 400 words in Persian Lang<br \/>\n            GROWI \u06cc\u06a9 \u067e\u0644\u062a\u0641\u0631\u0645 \u0648\u06cc\u06a9\u06cc \u0645\u0646\u0628\u0639 \u0628\u0627\u0632 \u0627\u0633\u062a \u06a9\u0647 \u06cc\u06a9 \u0633\u06cc\u0633\u062a\u0645 \u067e\u0644\u0627\u06af\u06cc\u0646 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f \u0648 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0637\u0648\u0631 \u0645\u0648\u062b\u0631 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0648 \u0633\u0641\u0627\u0631\u0634\u06cc \u06a9\u0646\u0646\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0627\u0641\u0632\u0648\u0646\u0647 Table Grid \u06a9\u0647 \u0628\u0631\u0627\u06cc GROWI \u062a\u0648\u0633\u0639\u0647 \u06cc\u0627\u0641\u062a\u0647 \u0631\u0627 \u0645\u0639\u0631\u0641\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u0645. \u0627\u06cc\u0646 \u0627\u0641\u0632\u0648\u0646\u0647 Grid.js \u0631\u0627 \u0628\u0631\u0627\u06cc \u062c\u062f\u0627\u0648\u0644 \u0646\u0648\u0634\u062a\u0647 \u0634\u062f\u0647 \u062f\u0631 Markdown \u0627\u0639\u0645\u0627\u0644 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0642\u0627\u0628\u0644\u06cc\u062a \u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f \u0645\u0631\u062a\u0628 \u0633\u0627\u0632\u06cc\u060c \u062c\u0633\u062a\u062c\u0648 \u0648 \u0635\u0641\u062d\u0647 \u0628\u0646\u062f\u06cc \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>  \u0627\u0641\u0632\u0648\u062f\u0646 \u067e\u0644\u0627\u06af\u06cc\u0646<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0627\u0641\u0632\u0648\u0646\u0647 \u0628\u0647 \u0622\u062f\u0631\u0633 \u0632\u06cc\u0631 \u0628\u0631\u0648\u06cc\u062f Plugins \u0628\u062e\u0634 \u062f\u0631 \u067e\u0646\u0644 \u0645\u062f\u06cc\u0631\u06cc\u062a GROWI \u0648 URL \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f: https:\/\/github.com\/goofmint\/growi-plugin-table-grid.<\/p>\n<p>  \u0627\u0633\u062a\u0641\u0627\u062f\u0647<\/p>\n<p>\u062f\u0631 \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631\u060c \u06cc\u06a9 \u062c\u062f\u0648\u0644 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0646\u062d\u0648 \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f Markdown \u0628\u0646\u0648\u06cc\u0633\u06cc\u062f:<\/p>\n<p>| Header1 | Header2 | Header3 |<br \/>\n| &#8212;&#8212;- | &#8212;&#8212;- | &#8212;&#8212;- |<br \/>\n| 1       | 2       | 3       |<br \/>\n| 4       | 5       | 6       |<br \/>\n| 7       | 8       | 9       |<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u067e\u0633 \u0627\u0632 \u067e\u06cc\u0634 \u0646\u0645\u0627\u06cc\u0634\u060c \u062c\u062f\u0648\u0644 \u0628\u0627 Grid.js \u0628\u0647\u0628\u0648\u062f \u0645\u06cc \u06cc\u0627\u0628\u062f \u0648 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u0627\u06cc \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<p>  \u0646\u06a9\u0627\u062a \u0645\u0647\u0645<\/p>\n<p>\u0631\u062f\u06cc\u0641 \u0647\u0627\u06cc \u062e\u0627\u0644\u06cc: \u062f\u0631 \u0635\u0648\u0631\u062a \u0648\u062c\u0648\u062f \u0633\u0637\u0631\u0647\u0627\u06cc \u062e\u0627\u0644\u06cc\u060c \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0627\u0641\u0632\u0648\u0646\u0647 \u062c\u062f\u0627\u0648\u0644 \u0631\u0627 \u0628\u0647 \u062f\u0631\u0633\u062a\u06cc \u0627\u0631\u0627\u0626\u0647 \u0646\u06a9\u0646\u062f.<\/p>\n<p>\u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc: \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u062f\u0627\u062f\u0647 \u0647\u0627 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0641\u0648\u0631\u0627\u064b \u0645\u0646\u0639\u06a9\u0633 \u0646\u0634\u0648\u062f. \u0628\u0631\u0627\u06cc \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc\u060c \u06cc\u06a9 \u062e\u0637 \u062e\u0627\u0644\u06cc (\u06a9\u0647 \u0628\u0627\u0639\u062b \u062e\u0637\u0627 \u0645\u06cc \u0634\u0648\u062f) \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f \u0648 \u0633\u067e\u0633 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0635\u062d\u06cc\u062d \u0631\u0627 \u062f\u0648\u0628\u0627\u0631\u0647 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n<p>  \u062f\u0631\u0628\u0627\u0631\u0647 \u06a9\u062f<\/p>\n<p>\u0627\u06cc\u0646 \u0627\u0641\u0632\u0648\u0646\u0647 \u0628\u0627 table \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0633\u06cc\u0633\u062a\u0645 \u067e\u0644\u0627\u06af\u06cc\u0646 GROWI \u062a\u06af \u06a9\u0646\u06cc\u062f \u0648 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u067e\u0644\u0627\u06af\u06cc\u0646 Rehype \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<p>const activate = (): void =&gt; {<br \/>\n  if (growiFacade == null || growiFacade.markdownRenderer == null) {<br \/>\n    return;<br \/>\n  }<\/p>\n<p>  const { optionsGenerators } = growiFacade.markdownRenderer;<\/p>\n<p>  \/\/ For page view<br \/>\n  optionsGenerators.customGenerateViewOptions = (&#8230;args) =&gt; {<br \/>\n    const options = optionsGenerators.generateViewOptions(&#8230;args);<br \/>\n    options.rehypePlugins.push(plugin as any); \/\/ Add plugin<br \/>\n    return options;<br \/>\n  };<\/p>\n<p>  \/\/ For preview<br \/>\n  optionsGenerators.customGeneratePreviewOptions = (&#8230;args) =&gt; {<br \/>\n    const preview = optionsGenerators.generatePreviewOptions(&#8230;args);<br \/>\n    preview.rehypePlugins.push(plugin as any); \/\/ Add plugin<br \/>\n    return preview;<br \/>\n  };<br \/>\n};<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u067e\u0644\u0627\u06af\u06cc\u0646 \u0631\u0627 \u067e\u0631\u062f\u0627\u0632\u0634 \u0645\u06cc \u06a9\u0646\u062f table \u0628\u0631\u0686\u0633\u0628\u060c \u0627\u0633\u062a\u062e\u0631\u0627\u062c thead \u0648 tbody \u0628\u0631\u0627\u06cc \u062a\u0628\u062f\u06cc\u0644 \u0622\u0646\u0647\u0627 \u0628\u0647 \u0642\u0627\u0644\u0628\u06cc \u0633\u0627\u0632\u06af\u0627\u0631 \u0628\u0627 Grid.js.<\/p>\n<p>export const plugin: Plugin = function() {<br \/>\n  return (tree) =&gt; {<br \/>\n    visit(tree, (node) =&gt; {<br \/>\n      const n = node as unknown as GrowiNode;<br \/>\n      try {<br \/>\n        \/\/ Ignore non-table tags<br \/>\n        if (n.type !== &#8216;element&#8217; || n.tagName !== &#8216;table&#8217;) {<br \/>\n          return;<br \/>\n        }<br \/>\n        \/\/ Implementation here<br \/>\n      }<br \/>\n      catch (e) {<br \/>\n        n.type = &#8216;html&#8217;;<br \/>\n        n.value = `Error: ${(e as Error).message}`;<br \/>\n      }<br \/>\n    });<br \/>\n  };<br \/>\n};<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u0627\u06cc\u0646 \u062a\u0628\u062f\u06cc\u0644 \u0634\u0627\u0645\u0644 \u0646\u06af\u0627\u0634\u062a \u0633\u0631\u0635\u0641\u062d\u0647 \u0647\u0627 \u0648 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u062c\u062f\u0648\u0644 \u0628\u0647 \u0633\u0627\u062e\u062a\u0627\u0631 Grid.js \u0627\u0633\u062a:<\/p>\n<p>const [thead, tbody] = n.children;<br \/>\nconst columns = thead.children[0].children.map(c =&gt; c.children[0].value);<br \/>\n\/\/ Results in [&#8220;Header1&#8221;, &#8220;Header2&#8221;, &#8220;Header3&#8221;]\nconst data = tbody.children.map(row =&gt; row.children<br \/>\n  .map(cell =&gt; cell.children[0].value));<br \/>\n\/\/ Results in [[&#8220;1&#8221;, &#8220;2&#8221;, &#8220;3&#8221;], [&#8220;4&#8221;, &#8220;5&#8221;, &#8220;6&#8221;], [&#8220;7&#8221;, &#8220;8&#8221;, &#8220;9&#8221;]]\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u0633\u067e\u0633 \u0627\u06cc\u0646\u0647\u0627 \u0628\u0627 \u06af\u0632\u06cc\u0646\u0647\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0631\u0648\u06cc Grid.js \u0627\u0639\u0645\u0627\u0644 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f \u06a9\u0647 \u0628\u0627 \u062a\u0645 GROWI \u0645\u0637\u0627\u0628\u0642\u062a \u062f\u0627\u0631\u0646\u062f:<\/p>\n<p>const grid = new Grid({<br \/>\n  columns,            \/\/ Headers<br \/>\n  data,               \/\/ Data<br \/>\n  pagination: true,   \/\/ Pagination<br \/>\n  search: true,       \/\/ Search<br \/>\n  sort: true,         \/\/ Sorting<br \/>\n  resizable: true,    \/\/ Column resizing<br \/>\n  \/\/ Styling<br \/>\n  style: {<br \/>\n    table: {<br \/>\n      border: &#8216;2px solid var(&#8211;bs-secondary-bg)&#8217;,<br \/>\n    },<br \/>\n    th: {<br \/>\n      color: &#8216;var(&#8211;bs-body-color)&#8217;,<br \/>\n      backgroundColor: &#8216;var(&#8211;bs-body-bg)&#8217;,<br \/>\n    },<br \/>\n    td: {<br \/>\n      color: &#8216;var(&#8211;bs-body-color)&#8217;,<br \/>\n      backgroundColor: &#8216;var(&#8211;bs-body-bg)&#8217;,<br \/>\n    },<br \/>\n    footer: {<br \/>\n      backgroundColor: &#8216;var(&#8211;bs-secondary-bg)&#8217;,<br \/>\n    },<br \/>\n  },<br \/>\n});<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 DOM \u0641\u0648\u0631\u0627\u064b \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0646\u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u0627\u0641\u0632\u0648\u0646\u0647 \u0642\u0628\u0644 \u0627\u0632 \u0631\u0646\u062f\u0631 \u06a9\u0631\u062f\u0646 \u0628\u0627 Grid.js \u0645\u0646\u062a\u0638\u0631 \u0645\u06cc\u200c\u0645\u0627\u0646\u062f \u062a\u0627 DOM \u0622\u0645\u0627\u062f\u0647 \u0634\u0648\u062f:<\/p>\n<p>\/\/ Unique class for identification<br \/>\nconst className = `table-grid-${Math.random().toString(36).slice(2)}`;<br \/>\nn.properties.className = `${n.properties.className} ${className}`;<br \/>\n\/\/ Wait for DOM to be ready<br \/>\nconst id = setInterval(() =&gt; {<br \/>\n  const el = document.querySelector(`.${className}`);<br \/>\n  if (el) {<br \/>\n    clearInterval(id);<br \/>\n    el.innerHTML = &#8221;; \/\/ Clear existing HTML<br \/>\n    grid.render(el);   \/\/ Render with Grid.js<br \/>\n  }<br \/>\n}, 1000);<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>  \u0645\u0644\u0627\u062d\u0638\u0627\u062a \u0627\u0633\u062a\u0627\u06cc\u0644<\/p>\n<p>GROWI \u0627\u0632 \u0686\u0646\u062f\u06cc\u0646 \u062a\u0645\u060c \u0627\u0632 \u062c\u0645\u0644\u0647 \u062d\u0627\u0644\u062a \u0647\u0627\u06cc \u062a\u0627\u0631\u06cc\u06a9 \u0648 \u0631\u0648\u0634\u0646 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u062f. \u0628\u0631\u0627\u06cc \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0627\u0632 \u0633\u0627\u0632\u06af\u0627\u0631\u06cc\u060c \u0627\u0641\u0632\u0648\u0646\u0647 \u0627\u0632 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc CSS \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f. \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644\u060c \u0646\u0645\u0627\u062f\u0647\u0627\u06cc \u0645\u0631\u062a\u0628 \u0633\u0627\u0632\u06cc \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0628\u0627 \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u062f\u0631 \u062d\u0627\u0644\u062a \u062a\u0627\u0631\u06cc\u06a9 \u062a\u0631\u06a9\u06cc\u0628 \u0634\u0648\u0646\u062f. \u0627\u0639\u0645\u0627\u0644 \u06cc\u06a9 \u0641\u06cc\u0644\u062a\u0631 CSS \u0631\u0646\u06af \u0622\u0646\u0647\u0627 \u0631\u0627 \u0645\u0639\u06a9\u0648\u0633 \u0645\u06cc \u06a9\u0646\u062f:<\/p>\n<p>@media (prefers-color-scheme: dark) {<br \/>\n  .gridjs-sort {<br \/>\n    filter: invert(100%);<br \/>\n  }<br \/>\n}<\/p>\n<p>.gridjs-input {<br \/>\n  color: var(&#8211;bs-body-color) !important;<br \/>\n  background-color: var(&#8211;bs-body-bg) !important;<br \/>\n}<\/p>\n<p>.gridjs-pages button {<br \/>\n  color: var(&#8211;bs-body-color) !important;<br \/>\n  background-color: var(&#8211;bs-body-bg) !important;<br \/>\n}<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>  \u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc<\/p>\n<p>\u0633\u06cc\u0633\u062a\u0645 \u067e\u0644\u0627\u06af\u06cc\u0646 GROWI \u0627\u0645\u06a9\u0627\u0646 \u0633\u0641\u0627\u0631\u0634\u06cc \u0633\u0627\u0632\u06cc \u06af\u0633\u062a\u0631\u062f\u0647 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0622\u0646 \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f. \u0627\u06af\u0631 \u0645\u062a\u0648\u062c\u0647 \u0634\u062f\u06cc\u062f \u06a9\u0647 \u0647\u06cc\u0686 \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc \u06a9\u0645 \u0627\u0633\u062a\u060c \u062a\u0648\u0633\u0639\u0647 \u0648 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u0646\u0638\u0631 \u0628\u06af\u06cc\u0631\u06cc\u062f <\/p>\n<div data-article-id=\"2085310\" id=\"article-body\">\n<p>GROWI \u06cc\u06a9 \u067e\u0644\u062a\u0641\u0631\u0645 \u0648\u06cc\u06a9\u06cc \u0645\u0646\u0628\u0639 \u0628\u0627\u0632 \u0627\u0633\u062a \u06a9\u0647 \u06cc\u06a9 \u0633\u06cc\u0633\u062a\u0645 \u067e\u0644\u0627\u06af\u06cc\u0646 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f \u0648 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0637\u0648\u0631 \u0645\u0648\u062b\u0631 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0648 \u0633\u0641\u0627\u0631\u0634\u06cc \u06a9\u0646\u0646\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0627\u0641\u0632\u0648\u0646\u0647 Table Grid \u06a9\u0647 \u0628\u0631\u0627\u06cc GROWI \u062a\u0648\u0633\u0639\u0647 \u06cc\u0627\u0641\u062a\u0647 \u0631\u0627 \u0645\u0639\u0631\u0641\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u0645. \u0627\u06cc\u0646 \u0627\u0641\u0632\u0648\u0646\u0647 Grid.js \u0631\u0627 \u0628\u0631\u0627\u06cc \u062c\u062f\u0627\u0648\u0644 \u0646\u0648\u0634\u062a\u0647 \u0634\u062f\u0647 \u062f\u0631 Markdown \u0627\u0639\u0645\u0627\u0644 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0642\u0627\u0628\u0644\u06cc\u062a \u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f \u0645\u0631\u062a\u0628 \u0633\u0627\u0632\u06cc\u060c \u062c\u0633\u062a\u062c\u0648 \u0648 \u0635\u0641\u062d\u0647 \u0628\u0646\u062f\u06cc \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p><\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"\u062a\u063a\u06cc\u06cc\u0631 \u0648\u0636\u0639\u06cc\u062a \u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/i-created-a-plugin-for-adding-sort-search-and-pagination-functions-to-markdown-tables-in-growi-52h2\/#%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_%D9%BE%D9%84%D8%A7%DA%AF%DB%8C%D9%86\" >\u0627\u0641\u0632\u0648\u062f\u0646 \u067e\u0644\u0627\u06af\u06cc\u0646<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/i-created-a-plugin-for-adding-sort-search-and-pagination-functions-to-markdown-tables-in-growi-52h2\/#%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87\" >\u0627\u0633\u062a\u0641\u0627\u062f\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/i-created-a-plugin-for-adding-sort-search-and-pagination-functions-to-markdown-tables-in-growi-52h2\/#%D9%86%DA%A9%D8%A7%D8%AA_%D9%85%D9%87%D9%85\" >\u0646\u06a9\u0627\u062a \u0645\u0647\u0645<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/i-created-a-plugin-for-adding-sort-search-and-pagination-functions-to-markdown-tables-in-growi-52h2\/#%D8%AF%D8%B1%D8%A8%D8%A7%D8%B1%D9%87_%DA%A9%D8%AF\" >\u062f\u0631\u0628\u0627\u0631\u0647 \u06a9\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/i-created-a-plugin-for-adding-sort-search-and-pagination-functions-to-markdown-tables-in-growi-52h2\/#%D9%85%D9%84%D8%A7%D8%AD%D8%B8%D8%A7%D8%AA_%D8%A7%D8%B3%D8%AA%D8%A7%DB%8C%D9%84\" >\u0645\u0644\u0627\u062d\u0638\u0627\u062a \u0627\u0633\u062a\u0627\u06cc\u0644<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/i-created-a-plugin-for-adding-sort-search-and-pagination-functions-to-markdown-tables-in-growi-52h2\/#%D9%86%D8%AA%DB%8C%D8%AC%D9%87_%DA%AF%DB%8C%D8%B1%DB%8C\" >\u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_%D9%BE%D9%84%D8%A7%DA%AF%DB%8C%D9%86\"><\/span>\n<p>  \u0627\u0641\u0632\u0648\u062f\u0646 \u067e\u0644\u0627\u06af\u06cc\u0646<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0627\u0641\u0632\u0648\u0646\u0647 \u0628\u0647 \u0622\u062f\u0631\u0633 \u0632\u06cc\u0631 \u0628\u0631\u0648\u06cc\u062f <code>Plugins<\/code> \u0628\u062e\u0634 \u062f\u0631 \u067e\u0646\u0644 \u0645\u062f\u06cc\u0631\u06cc\u062a GROWI \u0648 URL \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f: <code>https:\/\/github.com\/goofmint\/growi-plugin-table-grid<\/code>.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdtojwhiw2sq18nzdnjs5.jpeg\" alt=\"\u067e\u0646\u0644 \u0645\u062f\u06cc\u0631\u06cc\u062a\" loading=\"lazy\" width=\"800\" height=\"417\" title=\"\"><\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87\"><\/span>\n<p>  \u0627\u0633\u062a\u0641\u0627\u062f\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631\u060c \u06cc\u06a9 \u062c\u062f\u0648\u0644 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0646\u062d\u0648 \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f Markdown \u0628\u0646\u0648\u06cc\u0633\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight markdown\"><code>| Header1 | Header2 | Header3 |\n| ------- | ------- | ------- |\n| 1       | 2       | 3       |\n| 4       | 5       | 6       |\n| 7       | 8       | 9       |\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u067e\u0633 \u0627\u0632 \u067e\u06cc\u0634 \u0646\u0645\u0627\u06cc\u0634\u060c \u062c\u062f\u0648\u0644 \u0628\u0627 Grid.js \u0628\u0647\u0628\u0648\u062f \u0645\u06cc \u06cc\u0627\u0628\u062f \u0648 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u0627\u06cc \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fenjp4u46yawc4junu36o.jpeg\" alt=\"\u067e\u06cc\u0634 \u0646\u0645\u0627\u06cc\u0634 \u062c\u062f\u0648\u0644 \u067e\u06cc\u0634\u0631\u0641\u062a\u0647\" loading=\"lazy\" width=\"800\" height=\"434\" title=\"\"><\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%86%DA%A9%D8%A7%D8%AA_%D9%85%D9%87%D9%85\"><\/span>\n<p>  \u0646\u06a9\u0627\u062a \u0645\u0647\u0645<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li>\n<strong>\u0631\u062f\u06cc\u0641 \u0647\u0627\u06cc \u062e\u0627\u0644\u06cc<\/strong>: \u062f\u0631 \u0635\u0648\u0631\u062a \u0648\u062c\u0648\u062f \u0633\u0637\u0631\u0647\u0627\u06cc \u062e\u0627\u0644\u06cc\u060c \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0627\u0641\u0632\u0648\u0646\u0647 \u062c\u062f\u0627\u0648\u0644 \u0631\u0627 \u0628\u0647 \u062f\u0631\u0633\u062a\u06cc \u0627\u0631\u0627\u0626\u0647 \u0646\u06a9\u0646\u062f.<\/li>\n<li>\n<strong>\u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc<\/strong>: \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u062f\u0627\u062f\u0647 \u0647\u0627 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0641\u0648\u0631\u0627\u064b \u0645\u0646\u0639\u06a9\u0633 \u0646\u0634\u0648\u062f. \u0628\u0631\u0627\u06cc \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc\u060c \u06cc\u06a9 \u062e\u0637 \u062e\u0627\u0644\u06cc (\u06a9\u0647 \u0628\u0627\u0639\u062b \u062e\u0637\u0627 \u0645\u06cc \u0634\u0648\u062f) \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f \u0648 \u0633\u067e\u0633 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0635\u062d\u06cc\u062d \u0631\u0627 \u062f\u0648\u0628\u0627\u0631\u0647 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"%D8%AF%D8%B1%D8%A8%D8%A7%D8%B1%D9%87_%DA%A9%D8%AF\"><\/span>\n<p>  \u062f\u0631\u0628\u0627\u0631\u0647 \u06a9\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06cc\u0646 \u0627\u0641\u0632\u0648\u0646\u0647 \u0628\u0627 <code>table<\/code> \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0633\u06cc\u0633\u062a\u0645 \u067e\u0644\u0627\u06af\u06cc\u0646 GROWI \u062a\u06af \u06a9\u0646\u06cc\u062f \u0648 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u067e\u0644\u0627\u06af\u06cc\u0646 Rehype \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">activate<\/span> <span class=\"o\">=<\/span> <span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">growiFacade<\/span> <span class=\"o\">==<\/span> <span class=\"kc\">null<\/span> <span class=\"o\">||<\/span> <span class=\"nx\">growiFacade<\/span><span class=\"p\">.<\/span><span class=\"nx\">markdownRenderer<\/span> <span class=\"o\">==<\/span> <span class=\"kc\">null<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">optionsGenerators<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">growiFacade<\/span><span class=\"p\">.<\/span><span class=\"nx\">markdownRenderer<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"c1\">\/\/ For page view<\/span>\n  <span class=\"nx\">optionsGenerators<\/span><span class=\"p\">.<\/span><span class=\"nx\">customGenerateViewOptions<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(...<\/span><span class=\"nx\">args<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">options<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">optionsGenerators<\/span><span class=\"p\">.<\/span><span class=\"nf\">generateViewOptions<\/span><span class=\"p\">(...<\/span><span class=\"nx\">args<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">options<\/span><span class=\"p\">.<\/span><span class=\"nx\">rehypePlugins<\/span><span class=\"p\">.<\/span><span class=\"nf\">push<\/span><span class=\"p\">(<\/span><span class=\"nx\">plugin<\/span> <span class=\"k\">as<\/span> <span class=\"kr\">any<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/ Add plugin<\/span>\n    <span class=\"k\">return<\/span> <span class=\"nx\">options<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">};<\/span>\n\n  <span class=\"c1\">\/\/ For preview<\/span>\n  <span class=\"nx\">optionsGenerators<\/span><span class=\"p\">.<\/span><span class=\"nx\">customGeneratePreviewOptions<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(...<\/span><span class=\"nx\">args<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">preview<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">optionsGenerators<\/span><span class=\"p\">.<\/span><span class=\"nf\">generatePreviewOptions<\/span><span class=\"p\">(...<\/span><span class=\"nx\">args<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">preview<\/span><span class=\"p\">.<\/span><span class=\"nx\">rehypePlugins<\/span><span class=\"p\">.<\/span><span class=\"nf\">push<\/span><span class=\"p\">(<\/span><span class=\"nx\">plugin<\/span> <span class=\"k\">as<\/span> <span class=\"kr\">any<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/ Add plugin<\/span>\n    <span class=\"k\">return<\/span> <span class=\"nx\">preview<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">};<\/span>\n<span class=\"p\">};<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u067e\u0644\u0627\u06af\u06cc\u0646 \u0631\u0627 \u067e\u0631\u062f\u0627\u0632\u0634 \u0645\u06cc \u06a9\u0646\u062f <code>table<\/code> \u0628\u0631\u0686\u0633\u0628\u060c \u0627\u0633\u062a\u062e\u0631\u0627\u062c <code>thead<\/code> \u0648 <code>tbody<\/code> \u0628\u0631\u0627\u06cc \u062a\u0628\u062f\u06cc\u0644 \u0622\u0646\u0647\u0627 \u0628\u0647 \u0642\u0627\u0644\u0628\u06cc \u0633\u0627\u0632\u06af\u0627\u0631 \u0628\u0627 Grid.js.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">plugin<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Plugin<\/span> <span class=\"o\">=<\/span> <span class=\"kd\">function<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span><span class=\"nx\">tree<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nf\">visit<\/span><span class=\"p\">(<\/span><span class=\"nx\">tree<\/span><span class=\"p\">,<\/span> <span class=\"p\">(<\/span><span class=\"nx\">node<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">n<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">node<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">unknown<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">GrowiNode<\/span><span class=\"p\">;<\/span>\n      <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n        <span class=\"c1\">\/\/ Ignore non-table tags<\/span>\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">n<\/span><span class=\"p\">.<\/span><span class=\"kd\">type<\/span> <span class=\"o\">!==<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">element<\/span><span class=\"dl\">'<\/span> <span class=\"o\">||<\/span> <span class=\"nx\">n<\/span><span class=\"p\">.<\/span><span class=\"nx\">tagName<\/span> <span class=\"o\">!==<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">table<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n          <span class=\"k\">return<\/span><span class=\"p\">;<\/span>\n        <span class=\"p\">}<\/span>\n        <span class=\"c1\">\/\/ Implementation here<\/span>\n      <span class=\"p\">}<\/span>\n      <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">n<\/span><span class=\"p\">.<\/span><span class=\"kd\">type<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">html<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n        <span class=\"nx\">n<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">`<p>Error: <span class=\"p\">${(<\/span><span class=\"nx\">e<\/span> <span class=\"k\">as<\/span> <span class=\"nb\">Error<\/span><span class=\"p\">).<\/span><span class=\"nx\">message<\/span><span class=\"p\">}<\/span><span class=\"s2\"\/><\/p>`<\/span><span class=\"p\">;<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"p\">});<\/span>\n  <span class=\"p\">};<\/span>\n<span class=\"p\">};<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 \u062a\u0628\u062f\u06cc\u0644 \u0634\u0627\u0645\u0644 \u0646\u06af\u0627\u0634\u062a \u0633\u0631\u0635\u0641\u062d\u0647 \u0647\u0627 \u0648 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u062c\u062f\u0648\u0644 \u0628\u0647 \u0633\u0627\u062e\u062a\u0627\u0631 Grid.js \u0627\u0633\u062a:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">thead<\/span><span class=\"p\">,<\/span> <span class=\"nx\">tbody<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">n<\/span><span class=\"p\">.<\/span><span class=\"nx\">children<\/span><span class=\"p\">;<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">columns<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">thead<\/span><span class=\"p\">.<\/span><span class=\"nx\">children<\/span><span class=\"p\">[<\/span><span class=\"mi\">0<\/span><span class=\"p\">].<\/span><span class=\"nx\">children<\/span><span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">(<\/span><span class=\"nx\">c<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">c<\/span><span class=\"p\">.<\/span><span class=\"nx\">children<\/span><span class=\"p\">[<\/span><span class=\"mi\">0<\/span><span class=\"p\">].<\/span><span class=\"nx\">value<\/span><span class=\"p\">);<\/span>\n<span class=\"c1\">\/\/ Results in [\"Header1\", \"Header2\", \"Header3\"]<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">data<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">tbody<\/span><span class=\"p\">.<\/span><span class=\"nx\">children<\/span><span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">(<\/span><span class=\"nx\">row<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">row<\/span><span class=\"p\">.<\/span><span class=\"nx\">children<\/span>\n  <span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">(<\/span><span class=\"nx\">cell<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">cell<\/span><span class=\"p\">.<\/span><span class=\"nx\">children<\/span><span class=\"p\">[<\/span><span class=\"mi\">0<\/span><span class=\"p\">].<\/span><span class=\"nx\">value<\/span><span class=\"p\">));<\/span>\n<span class=\"c1\">\/\/ Results in [[\"1\", \"2\", \"3\"], [\"4\", \"5\", \"6\"], [\"7\", \"8\", \"9\"]]<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0633\u067e\u0633 \u0627\u06cc\u0646\u0647\u0627 \u0628\u0627 \u06af\u0632\u06cc\u0646\u0647\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0631\u0648\u06cc Grid.js \u0627\u0639\u0645\u0627\u0644 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f \u06a9\u0647 \u0628\u0627 \u062a\u0645 GROWI \u0645\u0637\u0627\u0628\u0642\u062a \u062f\u0627\u0631\u0646\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">grid<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Grid<\/span><span class=\"p\">({<\/span>\n  <span class=\"nx\">columns<\/span><span class=\"p\">,<\/span>            <span class=\"c1\">\/\/ Headers<\/span>\n  <span class=\"nx\">data<\/span><span class=\"p\">,<\/span>               <span class=\"c1\">\/\/ Data<\/span>\n  <span class=\"na\">pagination<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span>   <span class=\"c1\">\/\/ Pagination<\/span>\n  <span class=\"na\">search<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span>       <span class=\"c1\">\/\/ Search<\/span>\n  <span class=\"na\">sort<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span>         <span class=\"c1\">\/\/ Sorting<\/span>\n  <span class=\"na\">resizable<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span>    <span class=\"c1\">\/\/ Column resizing<\/span>\n  <span class=\"c1\">\/\/ Styling<\/span>\n  <span class=\"na\">style<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">table<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">border<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">2px solid var(--bs-secondary-bg)<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">},<\/span>\n    <span class=\"na\">th<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">color<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">var(--bs-body-color)<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">backgroundColor<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">var(--bs-body-bg)<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">},<\/span>\n    <span class=\"na\">td<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">color<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">var(--bs-body-color)<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">backgroundColor<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">var(--bs-body-bg)<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">},<\/span>\n    <span class=\"na\">footer<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">backgroundColor<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">var(--bs-secondary-bg)<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">},<\/span>\n  <span class=\"p\">},<\/span>\n<span class=\"p\">});<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 DOM \u0641\u0648\u0631\u0627\u064b \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0646\u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u0627\u0641\u0632\u0648\u0646\u0647 \u0642\u0628\u0644 \u0627\u0632 \u0631\u0646\u062f\u0631 \u06a9\u0631\u062f\u0646 \u0628\u0627 Grid.js \u0645\u0646\u062a\u0638\u0631 \u0645\u06cc\u200c\u0645\u0627\u0646\u062f \u062a\u0627 DOM \u0622\u0645\u0627\u062f\u0647 \u0634\u0648\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"c1\">\/\/ Unique class for identification<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">className<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">`table-grid-<\/span><span class=\"p\">${<\/span><span class=\"nb\">Math<\/span><span class=\"p\">.<\/span><span class=\"nf\">random<\/span><span class=\"p\">().<\/span><span class=\"nf\">toString<\/span><span class=\"p\">(<\/span><span class=\"mi\">36<\/span><span class=\"p\">).<\/span><span class=\"nf\">slice<\/span><span class=\"p\">(<\/span><span class=\"mi\">2<\/span><span class=\"p\">)}<\/span><span class=\"s2\">`<\/span><span class=\"p\">;<\/span>\n<span class=\"nx\">n<\/span><span class=\"p\">.<\/span><span class=\"nx\">properties<\/span><span class=\"p\">.<\/span><span class=\"nx\">className<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">`<\/span><span class=\"p\">${<\/span><span class=\"nx\">n<\/span><span class=\"p\">.<\/span><span class=\"nx\">properties<\/span><span class=\"p\">.<\/span><span class=\"nx\">className<\/span><span class=\"p\">}<\/span><span class=\"s2\"> <\/span><span class=\"p\">${<\/span><span class=\"nx\">className<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">;<\/span>\n<span class=\"c1\">\/\/ Wait for DOM to be ready<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">id<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">setInterval<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">el<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">querySelector<\/span><span class=\"p\">(<\/span><span class=\"s2\">`.<\/span><span class=\"p\">${<\/span><span class=\"nx\">className<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">);<\/span>\n  <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">el<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nf\">clearInterval<\/span><span class=\"p\">(<\/span><span class=\"nx\">id<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">el<\/span><span class=\"p\">.<\/span><span class=\"nx\">innerHTML<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">''<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ Clear existing HTML<\/span>\n    <span class=\"nx\">grid<\/span><span class=\"p\">.<\/span><span class=\"nf\">render<\/span><span class=\"p\">(<\/span><span class=\"nx\">el<\/span><span class=\"p\">);<\/span>   <span class=\"c1\">\/\/ Render with Grid.js<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">},<\/span> <span class=\"mi\">1000<\/span><span class=\"p\">);<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D9%84%D8%A7%D8%AD%D8%B8%D8%A7%D8%AA_%D8%A7%D8%B3%D8%AA%D8%A7%DB%8C%D9%84\"><\/span>\n<p>  \u0645\u0644\u0627\u062d\u0638\u0627\u062a \u0627\u0633\u062a\u0627\u06cc\u0644<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>GROWI \u0627\u0632 \u0686\u0646\u062f\u06cc\u0646 \u062a\u0645\u060c \u0627\u0632 \u062c\u0645\u0644\u0647 \u062d\u0627\u0644\u062a \u0647\u0627\u06cc \u062a\u0627\u0631\u06cc\u06a9 \u0648 \u0631\u0648\u0634\u0646 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u062f. \u0628\u0631\u0627\u06cc \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0627\u0632 \u0633\u0627\u0632\u06af\u0627\u0631\u06cc\u060c \u0627\u0641\u0632\u0648\u0646\u0647 \u0627\u0632 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc CSS \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f. \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644\u060c \u0646\u0645\u0627\u062f\u0647\u0627\u06cc \u0645\u0631\u062a\u0628 \u0633\u0627\u0632\u06cc \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0628\u0627 \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u062f\u0631 \u062d\u0627\u0644\u062a \u062a\u0627\u0631\u06cc\u06a9 \u062a\u0631\u06a9\u06cc\u0628 \u0634\u0648\u0646\u062f. \u0627\u0639\u0645\u0627\u0644 \u06cc\u06a9 \u0641\u06cc\u0644\u062a\u0631 CSS \u0631\u0646\u06af \u0622\u0646\u0647\u0627 \u0631\u0627 \u0645\u0639\u06a9\u0648\u0633 \u0645\u06cc \u06a9\u0646\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"k\">@media<\/span> <span class=\"p\">(<\/span><span class=\"n\">prefers-color-scheme<\/span><span class=\"p\">:<\/span> <span class=\"n\">dark<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nc\">.gridjs-sort<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">filter<\/span><span class=\"p\">:<\/span> <span class=\"nb\">invert<\/span><span class=\"p\">(<\/span><span class=\"m\">100%<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.gridjs-input<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--bs-body-color<\/span><span class=\"p\">)<\/span> <span class=\"cp\">!important<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">background-color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--bs-body-bg<\/span><span class=\"p\">)<\/span> <span class=\"cp\">!important<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.gridjs-pages<\/span> <span class=\"nt\">button<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--bs-body-color<\/span><span class=\"p\">)<\/span> <span class=\"cp\">!important<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">background-color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--bs-body-bg<\/span><span class=\"p\">)<\/span> <span class=\"cp\">!important<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D9%86%D8%AA%DB%8C%D8%AC%D9%87_%DA%AF%DB%8C%D8%B1%DB%8C\"><\/span>\n<p>  \u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0633\u06cc\u0633\u062a\u0645 \u067e\u0644\u0627\u06af\u06cc\u0646 GROWI \u0627\u0645\u06a9\u0627\u0646 \u0633\u0641\u0627\u0631\u0634\u06cc \u0633\u0627\u0632\u06cc \u06af\u0633\u062a\u0631\u062f\u0647 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0622\u0646 \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f. \u0627\u06af\u0631 \u0645\u062a\u0648\u062c\u0647 \u0634\u062f\u06cc\u062f \u06a9\u0647 \u0647\u06cc\u0686 \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc \u06a9\u0645 \u0627\u0633\u062a\u060c \u062a\u0648\u0633\u0639\u0647 \u0648 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u0646\u0638\u0631 \u0628\u06af\u06cc\u0631\u06cc\u062f <\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Summarize this content to 400 words in Persian Lang GROWI \u06cc\u06a9 \u067e\u0644\u062a\u0641\u0631\u0645 \u0648\u06cc\u06a9\u06cc \u0645\u0646\u0628\u0639 \u0628\u0627\u0632 \u0627\u0633\u062a \u06a9\u0647 \u06cc\u06a9 \u0633\u06cc\u0633\u062a\u0645 \u067e\u0644\u0627\u06af\u06cc\u0646 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f \u0648 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0637\u0648\u0631 \u0645\u0648\u062b\u0631 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0648 \u0633\u0641\u0627\u0631\u0634\u06cc \u06a9\u0646\u0646\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0627\u0641\u0632\u0648\u0646\u0647 Table Grid \u06a9\u0647 \u0628\u0631\u0627\u06cc GROWI \u062a\u0648\u0633\u0639\u0647 \u06cc\u0627\u0641\u062a\u0647 \u0631\u0627 \u0645\u0639\u0631\u0641\u06cc &hellip;<\/p>\n","protected":false},"author":2,"featured_media":82965,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-82964","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/82964","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=82964"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/82964\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/82965"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=82964"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=82964"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=82964"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}