[DOCS] JsonTable-Sphinx Directivs (openvinotoolkit#28080)

### Details:
 - *item1*
 - *...*

### Tickets:
 - *ticket-id*

docs/articles_en/about-openvino/performance-benchmarks/generative-ai-performance.rst

@@ -8,7 +8,6 @@ The current data is as of OpenVINO 2024.4, 20 Nov. 2024.
 The tables below list the key performance indicators for inference on built-in GPUs.
 
 
-
 .. raw:: html
 
    <label><link rel="stylesheet" type="text/css" href="../../_static/css/openVinoDataTables.css"></label>
@@ -20,23 +19,23 @@ The tables below list the key performance indicators for inference on built-in G
 
       .. csv-table::
          :class: modeldata stripe
-         :name: supportedModelsTableOv
+         :name: supportedModelsTable_V1
          :header-rows: 1
          :file:  ../../_static/benchmarks_files/llm_models_9-288V.csv
 
    .. tab-item:: 7-268V
 
       .. csv-table::
          :class: modeldata stripe
-         :name: supportedModelsTableOv
+         :name: supportedModelsTable_V2
          :header-rows: 1
          :file:  ../../_static/benchmarks_files/llm_models_7-258V.csv
 
    .. tab-item:: 7-155H
 
       .. csv-table::
          :class: modeldata stripe
-         :name: supportedModelsTableOv
+         :name: supportedModelsTable_V3
          :header-rows: 1
          :file:  ../../_static/benchmarks_files/llm_models_7-155H.csv
 

docs/openvino_sphinx_theme/openvino_sphinx_theme/__init__.py

@@ -7,7 +7,7 @@
 from docutils.parsers import rst
 from pathlib import Path
 from sphinx.util import logging
-from .directives.code import DoxygenSnippet, Scrollbox, Nodescrollbox, visit_scrollbox, depart_scrollbox
+from .directives.code import DoxygenSnippet, Scrollbox, Nodescrollbox, visit_scrollbox, depart_scrollbox, DataTable
 
 SPHINX_LOGGER = logging.getLogger(__name__)
 
@@ -99,6 +99,7 @@ def setup(app):
     app.add_html_theme('openvino_sphinx_theme', theme_path)
     rst.directives.register_directive('doxygensnippet', DoxygenSnippet)
     rst.directives.register_directive('scrollbox', Scrollbox)
+    rst.directives.register_directive('data-table', DataTable)
     app.add_node(
         Nodescrollbox,
         html=(visit_scrollbox, depart_scrollbox),

docs/openvino_sphinx_theme/openvino_sphinx_theme/directives/code.py

@@ -12,6 +12,8 @@
 import re
 import json
 
+import csv
+
 logger = logging.getLogger(__name__)
 
 
@@ -136,3 +138,51 @@ def run(self):
         if self.content:
             self.state.nested_parse(self.content, self.content_offset, node)
         return [node]
+
+
+class DataTable(Directive):
+    required_arguments = 0
+    has_content = False
+    option_spec = {'header-rows': directives.nonnegative_int,
+                   'file': directives.path,
+                   'class': directives.unchanged,
+                   'name': directives.unchanged,
+                   'hidden': directives.unchanged
+                   }
+
+    def run(self) -> List[Node]:
+        current_directory = os.path.dirname(os.path.abspath(self.state.document.current_source))
+        csv_file = os.path.normpath(os.path.join(current_directory, self.options['file']))
+        if os.path.isfile(csv_file) is False:
+            self.warning("Cannot find the specified CSV file. "
+                         "Please provide a correct path.")
+        csv_node = []
+        with open(csv_file, 'r') as j:
+            csv_data = list(csv.reader(j))
+            class_table_tag = ' class="' + "".join(c for c in str(self.options['class']) + '"') if 'class' in self.options is not None else ""
+            id_table_tag = ' id="' + "".join(c for c in str(self.options['name']) + '"') if 'name' in self.options is not None else ""
+            hidden_table_tag = ' data-columns-hidden="' + "".join(c for c in str(self.options['hidden']) + '"') if 'hidden' in self.options is not None else ""
+            csv_table_html = '<table' + class_table_tag + id_table_tag + hidden_table_tag + '>'
+            head_rows = 0
+            head_rows += self.options.get('header-rows', 0)
+            row_count = 0
+            for row in csv_data[:head_rows]:
+                row_count += 1
+                parity = "row-even" if row_count % 2 == 0 else "row-odd"
+                csv_table_html += '<thead><tr class="' + parity + '">'
+                for value in row:
+                    csv_table_html += '<th class="head"><p>%s</p></th>' % value
+                csv_table_html += '</tr></thead>\n'
+            csv_table_html += '<tbody>'
+            for row in csv_data[head_rows:]:
+                row_count += 1
+                parity = "row-even" if row_count % 2 == 0 else "row-odd"
+                csv_table_html += '<tr class="' + parity + '">'
+                for value in row:
+                    csv_table_html += '<td><p>%s</p></td>' % value
+            csv_table_html += '</tr>\n</tbody>'
+            csv_table_html += "</tr>"
+            csv_table_html += '</tbody></table>'
+        csv_node.append(nodes.raw(csv_table_html, csv_table_html, format="html"))
+
+        return csv_node

docs/sphinx_setup/_static/js/openVinoDataTables.js

@@ -1,48 +1,41 @@
 $(document).ready(function () {
-  var pageTitle = document.title;
-  var columnDefs;
-  if(pageTitle.includes('Most Efficient Large Language Models for AI PC'))
-  {
-    columnDefs=  [
-      { "visible": false, "targets": [3,4,6] }
-    ]
-  }
-  else
-  {
-    columnDefs=[]
-  }
+  var columnDefs = [];
 
-  var table = $('table.modeldata').DataTable({
-    responsive: true,
-    "autoWidth": false,
-    stateSave: true,
-    language: {
-      buttons: {
-        colvisRestore: "Show all columns"
-      }
-    },
-    lengthMenu: [
-      [10, 25, 50, -1],
-      ['10 rows', '25 rows', '50 rows', 'Show all rows']
-    ],
-    "columnDefs": columnDefs,
-    layout: {
-      topStart: {
-        buttons: [
-          'pageLength',
-          {
-            extend: 'colvis',
-            postfixButtons: ['colvisRestore'],
-          },
-          {
-            extend: 'print',
-            text: 'Print pdf',
-            exportOptions: {
-              columns: ':visible'
+  var tables = $('table.modeldata');
+  for (let table of tables) {
+    var hidden = table.getAttribute('data-columns-hidden');
+    columnDefs = [{ "visible": false, "targets": JSON.parse(hidden) }]
+    $(table).DataTable({
+      responsive: true,
+      "autoWidth": false,
+      language: {
+        buttons: {
+          colvisRestore: "Restore default"
+        }
+      },
+      lengthMenu: [
+        [10, 25, 50, -1],
+        ['10 rows', '25 rows', '50 rows', 'Show all records']
+      ],
+      "columnDefs": columnDefs,
+      layout: {
+        topStart: {
+          buttons: [
+            'pageLength',
+            {
+              extend: 'colvis',
+              postfixButtons: ['colvisRestore'],
+            },
+            {
+              extend: 'print',
+              text: 'Print pdf',
+              exportOptions: {
+                columns: ':visible'
+              }
             }
-          }
-        ]
+          ]
+        }
       }
-    }
-  });
+    });
+  }
 });