playbook_ui 14.11.1.pre.alpha.PBNTR719listdraggablesimple5432 → 14.11.1.pre.alpha.PBNTR768stickyrightcolumn5431

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6bdbe23bc1013fd760db56be2ff1622463f9cdf389fe8ee7d7f1d0a19dfe1fe8
-  data.tar.gz: 1f2fb3ef95862f6e946d28feca66bdf7be085ec9bf1bbeb6344ca431df182894
+  metadata.gz: 4a05fe2789773e3d82f2ff7b8db22a31c699e6cc1c306daf4d2478a38d949f5b
+  data.tar.gz: c008e59419462f277e0faf29b8592cf61c786a16b84e55795925f2efedf8c82e
 SHA512:
-  metadata.gz: 69c0bb6ee0d73e5c5c4995aebf4b08ef10b8264b3c4ed10ffd3b254233697aae3b78969b876269bfe0ca66c5ba8a0a6e9eae5457ce4bc4bffdebc43df7e906c2
-  data.tar.gz: 6940efc8f7d699dad70c07fe3ff382bc3704efc23fe0f37b325a01cf4ad907b8fff3aa91932d63831ae54a86ed36b235b8a7f7e450faf225c14996b76a6e0001
+  metadata.gz: 3b3268e3ba86c6f6f292aade7f2401f9e187995ac3ec5854ac81307bb24745ed1721aa6447d9f755c6f724519ac30de7c203762ee92b17aeebfe0440aea5d83c
+  data.tar.gz: 850c027e756601d977e7b919a2d19b5705a433878b7c2248a3b5fae924cf24311f1781e3d3ae41ef158f0fce893d751040ef292d21e9d8a5f74284961357ef3c

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.html.erb

@@ -6,8 +6,14 @@
 
 ] %>
 
-<%= pb_rails("list", props: { enable_drag: true, items: initial_items }) do %>
-  <% initial_items.each do |item| %>
-    <%= pb_rails("list/item", props:{drag_id: item[:id]}) do %><%= item[:name] %><% end %>
+<%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
+  <%= pb_rails("draggable/draggable_container") do %>
+    <%= pb_rails("list", props: {ordered: false}) do %>
+        <% initial_items.each do |item| %>
+            <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
+                <%= pb_rails("list/item") do %><%= item[:name] %><% end %>
+            <% end %>
+        <% end %>
+    <% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_list/item.html.erb

@@ -1,32 +1,10 @@
-<% if object.draggable? %>
-  <%= pb_rails("draggable/draggable_item", props:{drag_id: object.drag_id}) do %>
-    <%= content_tag(:li,
-                    aria: object.aria,
-                    class: object.classname,
-                    data: object.data,
-                    id: object.id,
-                    tabindex: object.tabindex,
-                    **combined_html_options
-      ) do %>
-      <% if object.drag_handle %>
-        <span style="vertical-align: middle;">
-          <%= pb_rails("body") do %>
-            <svg width="auto" height="auto" viewBox="0 0 31 25" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="pb_custom_icon svg-inline--fa vertical_align_middle  svg_fw"><path d="M12.904 6.355a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm0 7.5a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm1.5 6c0 .844-.703 1.5-1.5 1.5a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5zm4.5-13.5a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm1.5 6c0 .844-.703 1.5-1.5 1.5a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5zm-1.5 9a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5z" fill="#242B42"></path></svg>
-          <% end %>
-        </span>
-      <% end %>
-      <%= content.presence %>
-    <% end %>
-  <% end %>
-<% else %>
-  <%= content_tag(:li,
-                  aria: object.aria,
-                  class: object.classname,
-                  data: object.data,
-                  id: object.id,
-                  tabindex: object.tabindex,
-                  **combined_html_options
-    ) do %>
+<%= content_tag(:li,
+                aria: object.aria,
+                class: object.classname,
+                data: object.data,
+                id: object.id,
+                tabindex: object.tabindex,
+                **combined_html_options
+  ) do %>
     <%= content.presence %>
-  <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_list/item.rb

@@ -3,18 +3,11 @@
 module Playbook
   module PbList
     class Item < Playbook::KitBase
-      prop :drag_handle, type: Playbook::Props::Boolean,
-                         default: true
-      prop :drag_id, type: Playbook::Props::String
       prop :tabindex
 
       def classname
         generate_classname("pb_item_kit")
       end
-
-      def draggable?
-        drag_id.present?
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_list/list.html.erb

@@ -1,33 +1,13 @@
-<% if object.enable_drag %>
-  <%= pb_rails("draggable", props: {initial_items: object.items}) do %>
-    <%= pb_rails("draggable/draggable_container") do %>
-      <%= content_tag(:div, class: object.list_classname) do %>
-        <%= content_tag(:"#{object.ordered_class}",
-                        aria: object.aria,
-                        class: object.classname,
-                        data: object.data,
-                        id: object.id,
-                        role: object.role,
-                        tabindex: object.tabindex,
-                        **combined_html_options
-          ) do %>
-            <%= content.presence %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
-<% else %>
-  <%= content_tag(:div, class: object.list_classname) do %>
-    <%= content_tag(:"#{object.ordered_class}",
-                    aria: object.aria,
-                    class: object.classname,
-                    data: object.data,
-                    id: object.id,
-                    role: object.role,
-                    tabindex: object.tabindex,
-                    **combined_html_options
-      ) do %>
-        <%= content.presence %>
-    <% end %>
+<%= content_tag(:div, class: object.list_classname) do %>
+  <%= content_tag(:"#{object.ordered_class}",
+                  aria: object.aria,
+                  class: object.classname,
+                  data: object.data,
+                  id: object.id,
+                  role: object.role,
+                  tabindex: object.tabindex,
+                  **combined_html_options
+    ) do %>
+      <%= content.presence %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_list/list.rb

@@ -7,10 +7,6 @@ module Playbook
                         default: false
       prop :dark, type: Playbook::Props::Boolean,
                   default: false
-      prop :enable_drag, type: Playbook::Props::Boolean,
-                         default: false
-      prop :items, type: Playbook::Props::Array,
-                   default: []
       prop :layout, type: Playbook::Props::Enum,
                     values: ["left", "right", ""],
                     default: ""

data/app/pb_kits/playbook/pb_table/_table.tsx

@@ -2,7 +2,6 @@ import React, { useEffect } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps, GlobalProps, globalInlineProps } from '../utilities/globalProps'
-import PbTable from '.'
 import {
     TableHead,
     TableHeader,
@@ -10,6 +9,7 @@ import {
     TableRow,
     TableCell,
 } from "./subcomponents";
+import { addDataTitle } from './utilities/addDataTitle'
 
 type TableProps = {
     aria?: { [key: string]: string },
@@ -196,8 +196,7 @@ const Table = (props: TableProps): React.ReactElement => {
     }, [stickyRightColumn]);
 
     useEffect(() => {
-        const instance = new PbTable()
-        instance.connect()
+        addDataTitle()
     }, [])
 
     return (

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.html.erb

@@ -0,0 +1,74 @@
+<%= pb_rails("table", props: { size: "md", responsive: "scroll", sticky_left_column: ["a"], sticky_right_column: ["b"] }) do %>
+  <thead>
+    <tr>
+      <th id="a">Column 1</th>
+      <th>Column 2</th>
+      <th>Column 3</th>
+      <th>Column 4</th>
+      <th>Column 5</th>
+      <th>Column 6</th>
+      <th>Column 7</th>
+      <th>Column 8</th>
+      <th>Column 9</th>
+      <th>Column 10</th>
+      <th>Column 11</th>
+      <th>Column 12</th>
+      <th>Column 13</th>
+      <th>Column 14</th>
+      <th id="b">Column 15</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td id="a">Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+      <td>Value 6</td>
+      <td>Value 7</td>
+      <td>Value 8</td>
+      <td>Value 9</td>
+      <td>Value 10</td>
+      <td>Value 11</td>
+      <td>Value 12</td>
+      <td>Value 13</td>
+      <td>Value 14</td>
+      <td id="b">Value 15</td>
+    </tr>
+    <tr>
+      <td id="a">Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+      <td>Value 6</td>
+      <td>Value 7</td>
+      <td>Value 8</td>
+      <td>Value 9</td>
+      <td>Value 10</td>
+      <td>Value 11</td>
+      <td>Value 12</td>
+      <td>Value 13</td>
+      <td>Value 14</td>
+      <td id="b">Value 15</td>
+    </tr>
+    <tr>
+      <td id="a">Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+      <td>Value 6</td>
+      <td>Value 7</td>
+      <td>Value 8</td>
+      <td>Value 9</td>
+      <td>Value 10</td>
+      <td>Value 11</td>
+      <td>Value 12</td>
+      <td>Value 13</td>
+      <td>Value 14</td>
+      <td id="b">Value 15</td>
+    </tr>
+  </tbody>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_rails.md

@@ -0,0 +1,3 @@
+The `sticky_left_column` and `sticky_right_column` props can be used together on the same table as needed.
+
+Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using props.

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md

@@ -1,3 +1,3 @@
-The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
+The `sticky_left_column` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
 
-Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `stickyLeftColumn`.
+Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `sticky_left_column`.

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.html.erb

@@ -0,0 +1,74 @@
+<%= pb_rails("table", props: { size: "md", responsive: "scroll", sticky_right_column: ["13", "14", "15"] }) do %>
+  <thead>
+    <tr>
+      <th>Column 1</th>
+      <th>Column 2</th>
+      <th>Column 3</th>
+      <th>Column 4</th>
+      <th>Column 5</th>
+      <th>Column 6</th>
+      <th>Column 7</th>
+      <th>Column 8</th>
+      <th>Column 9</th>
+      <th>Column 10</th>
+      <th>Column 11</th>
+      <th>Column 12</th>
+      <th id="13">Column 13</th>
+      <th id="14">Column 14</th>
+      <th id="15">Column 15</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+      <td>Value 6</td>
+      <td>Value 7</td>
+      <td>Value 8</td>
+      <td>Value 9</td>
+      <td>Value 10</td>
+      <td>Value 11</td>
+      <td>Value 12</td>
+      <td id="13">Value 13</td>
+      <td id="14">Value 14</td>
+      <td id="15">Value 15</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+      <td>Value 6</td>
+      <td>Value 7</td>
+      <td>Value 8</td>
+      <td>Value 9</td>
+      <td>Value 10</td>
+      <td>Value 11</td>
+      <td>Value 12</td>
+      <td id="13">Value 13</td>
+      <td id="14">Value 14</td>
+      <td id="15">Value 15</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+      <td>Value 6</td>
+      <td>Value 7</td>
+      <td>Value 8</td>
+      <td>Value 9</td>
+      <td>Value 10</td>
+      <td>Value 11</td>
+      <td>Value 12</td>
+      <td id="13">Value 13</td>
+      <td id="14">Value 14</td>
+      <td id="15">Value 15</td>
+    </tr>
+  </tbody>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_rails.md

@@ -0,0 +1,3 @@
+The `sticky_right_column` prop works in the same way as the above `sticky_left_column` prop. It expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
+
+Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `sticky_right_column` prop.

data/app/pb_kits/playbook/pb_table/docs/example.yml

@@ -5,6 +5,8 @@ examples:
     - table_lg: Large
     - table_sticky: Sticky Header
     - table_sticky_left_columns: Sticky Left Column
+    - table_sticky_right_columns: Sticky Right Column
+    - table_sticky_columns: Sticky Left and Right Columns
     - table_header: Table Header
     - table_alignment_row_rails: Row Alignment
     - table_alignment_column_rails: Cell Alignment

data/app/pb_kits/playbook/pb_table/index.ts

@@ -1,73 +1,67 @@
 import PbEnhancedElement from '../pb_enhanced_element'
 
+const TABLE_WRAPPER_SELECTOR = "[data-pb-table-wrapper]";
+
 export default class PbTable extends PbEnhancedElement {
-    private stickyLeftColumns: string[] = [];
-    private handleStickyLeftColumnsRef: () => void;
+    stickyLeftColumns: string[] = [];
+    stickyRightColumns: string[] = [];
+    stickyRightColumnsReversed: string[] = [];
 
     static get selector(): string {
-      return '.table-responsive-collapse'
+      return TABLE_WRAPPER_SELECTOR;
     }
 
-    connect(): void {
-      const tables = document.querySelectorAll('.table-responsive-collapse');
-      // Each Table
-      [].forEach.call(tables, (table: HTMLTableElement) => {
-        // Header Titles
+    connect() {
+      if (this.element.classList.contains('table-responsive-collapse')) {
         const headers: string[] = [];
-        [].forEach.call(table.querySelectorAll('th'), (header: HTMLTableCellElement) => {
+
+        [].forEach.call(this.element.querySelectorAll('th'), (header: HTMLTableCellElement) => {
             const colSpan = header.colSpan
             for (let i = 0; i < colSpan; i++) {
               headers.push(header.textContent.replace(/\r?\n|\r/, ''));
             }
         });
-        // for each row in tbody
-        [].forEach.call(table.querySelectorAll('tbody tr'), (row: HTMLTableRowElement) => {
-          // for each cell
+  
+        [].forEach.call(this.element.querySelectorAll('tbody tr'), (row: HTMLTableRowElement) => {
           [].forEach.call(row.cells, (cell: HTMLTableCellElement, headerIndex: number) => {
-            // apply the attribute
             cell.setAttribute('data-title', headers[headerIndex])
           })
         })
-      });
+      }
 
-      // New sticky columns logic
       this.initStickyLeftColumns();
+      this.initStickyRightColumns();
     }
 
-    private initStickyLeftColumns(): void {
-      // Find tables with sticky-left-column class
-      const tables = document.querySelectorAll('.sticky-left-column');
+    initStickyLeftColumns() {
+      const table = this.element.querySelector('.sticky-left-column');
 
-      tables.forEach((table) => {
-        // Extract sticky left column IDs by looking at the component's class
+      if (table) {
         const classList = Array.from(table.classList);
+        const stickyColumnClass = classList.find(cls => cls.startsWith('sticky-left-columns-ids-'));
 
-        // Look for classes in the format sticky-left-column-{ids}
-        const stickyColumnClass = classList.find(cls => cls.startsWith('sticky-columns-'));
         if (stickyColumnClass) {
-          // Extract the IDs from the class name
           this.stickyLeftColumns = stickyColumnClass
-              .replace('sticky-columns-', '')
-              .split('-');
+            .replace('sticky-left-columns-ids-', '')
+            .split('-');
 
           if (this.stickyLeftColumns.length > 0) {
             setTimeout(() => {
-              this.handleStickyLeftColumnsRef = this.handleStickyLeftColumns.bind(this);
               this.handleStickyLeftColumns();
-              window.addEventListener('resize', this.handleStickyLeftColumnsRef);
+              window.addEventListener('resize', () => this.handleStickyLeftColumns());
             }, 10);
           }
         }
-      });
+      }
     }
 
-    private handleStickyLeftColumns(): void {
+    handleStickyLeftColumns() {
       let accumulatedWidth = 0;
 
       this.stickyLeftColumns.forEach((colId, index) => {
         const isLastColumn = index === this.stickyLeftColumns.length - 1;
-        const header = document.querySelector(`th[id="${colId}"]`);
-        const cells = document.querySelectorAll(`td[id="${colId}"]`);
+        const header = this.element.querySelector(`th[id="${colId}"]`);
+        const cells = this.element.querySelectorAll(`td[id="${colId}"]`);
 
         if (header) {
           header.classList.add('sticky');
@@ -99,10 +93,75 @@ export default class PbTable extends PbEnhancedElement {
       });
     }
 
+    initStickyRightColumns() {
+      const table = this.element.querySelector('.sticky-right-column');
+
+      if (table) {
+        const classList = Array.from(table.classList);
+        const stickyColumnClass = classList.find(cls => cls.startsWith('sticky-right-columns-ids-'));
+
+        if (stickyColumnClass) {
+          this.stickyRightColumns = stickyColumnClass
+            .replace('sticky-right-columns-ids-', '')
+            .split('-');
+          this.stickyRightColumnsReversed = this.stickyRightColumns.reverse();
+
+          if (this.stickyRightColumns.length > 0) {
+            setTimeout(() => {
+              this.handleStickyRightColumns();
+              window.addEventListener('resize', () => this.handleStickyRightColumns());
+            }, 10);
+          }
+        }
+      }
+    }
+
+    handleStickyRightColumns() {
+      let accumulatedWidth = 0;
+
+      this.stickyRightColumnsReversed.forEach((colId, index) => {
+        const isLastColumn = index === this.stickyRightColumns.length - 1;
+        const header = this.element.querySelector(`th[id="${colId}"]`);
+        const cells = this.element.querySelectorAll(`td[id="${colId}"]`);
+
+        if (header) {
+          header.classList.add('sticky');
+          (header as HTMLElement).style.right = `${accumulatedWidth}px`;
+
+          if (!isLastColumn) {
+            header.classList.add('with-border-left');
+            header.classList.remove('sticky-right-shadow');
+          } else {
+            header.classList.remove('with-border-right');
+            header.classList.add('sticky-right-shadow');
+          }
+
+          accumulatedWidth += (header as HTMLElement).offsetWidth;
+        }
+
+        cells.forEach((cell) => {
+          cell.classList.add('sticky');
+          (cell as HTMLElement).style.right = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
+
+          if (!isLastColumn) {
+            cell.classList.add('with-border-left');
+            cell.classList.remove('sticky-right-shadow');
+          } else {
+            cell.classList.remove('with-border-left');
+            cell.classList.add('sticky-right-shadow');
+          }
+        });
+      });
+    }
+
     // Cleanup method to remove event listener
-    disconnect(): void {
-      if (this.handleStickyLeftColumnsRef) {
-        window.removeEventListener('resize', this.handleStickyLeftColumnsRef);
+    disconnect() {
+      if (this.stickyLeftColumns.length > 0) {
+        window.removeEventListener('resize', () => this.handleStickyLeftColumns());
+      }
+
+      if (this.stickyRightColumns.length > 0) {
+        window.removeEventListener('resize', () => this.handleStickyRightColumns());
       }
     }
 }

data/app/pb_kits/playbook/pb_table/table.html.erb

@@ -4,7 +4,7 @@
   <% responsive_class = nil %>
 <% end %>
 
-<%= content_tag(:div, class: responsive_class) do %>
+<%= content_tag(:div, class: responsive_class, 'data-pb-table-wrapper' => true) do %>
   <% if object.tag == "table" %>
     <%= content_tag(:table,
       aria: object.aria,

data/app/pb_kits/playbook/pb_table/table.rb

@@ -25,6 +25,8 @@ module Playbook
                     default: false
       prop :sticky_left_column, type: Playbook::Props::Array,
                                 default: []
+      prop :sticky_right_column, type: Playbook::Props::Array,
+                                 default: []
       prop :vertical_border, type: Playbook::Props::Boolean,
                              default: false
       prop :striped, type: Playbook::Props::Boolean,
@@ -40,7 +42,7 @@ module Playbook
         generate_classname(
           "pb_table", "table-#{size}", single_line_class, dark_class,
           disable_hover_class, container_class, data_table_class, sticky_class, sticky_left_column_class,
-          collapse_class, vertical_border_class, striped_class, outer_padding_class,
+          sticky_right_column_class, collapse_class, vertical_border_class, striped_class, outer_padding_class,
           "table-responsive-#{responsive}", separator: " "
         )
       end
@@ -83,7 +85,7 @@ module Playbook
         if sticky_left_column.empty?
           nil
         else
-          sticky_col_classname = "sticky-left-column sticky-columns"
+          sticky_col_classname = "sticky-left-column sticky-left-columns-ids"
           sticky_left_column.each do |id|
             sticky_col_classname += "-#{id}"
           end
@@ -92,6 +94,19 @@ module Playbook
         end
       end
 
+      def sticky_right_column_class
+        if sticky_right_column.empty?
+          nil
+        else
+          sticky_col_classname = "sticky-right-column sticky-right-columns-ids"
+          sticky_right_column.each do |id|
+            sticky_col_classname += "-#{id}"
+          end
+
+          sticky_col_classname
+        end
+      end
+
       def striped_class
         striped ? "striped" : nil
       end

data/app/pb_kits/playbook/pb_table/utilities/addDataTitle.ts

@@ -0,0 +1,22 @@
+export const addDataTitle = () => {
+    const tables = document.querySelectorAll('.table-responsive-collapse');
+    // Each Table
+    [].forEach.call(tables, (table: HTMLTableElement) => {
+        // Header Titles
+        const headers: string[] = [];
+        [].forEach.call(table.querySelectorAll('th'), (header: HTMLTableCellElement) => {
+            const colSpan = header.colSpan
+            for (let i = 0; i < colSpan; i++) {
+                headers.push(header.textContent.replace(/\r?\n|\r/, ''));
+            }
+        });
+        // for each row in tbody
+        [].forEach.call(table.querySelectorAll('tbody tr'), (row: HTMLTableRowElement) => {
+            // for each cell
+            [].forEach.call(row.cells, (cell: HTMLTableCellElement, headerIndex: number) => {
+                // apply the attribute
+                cell.setAttribute('data-title', headers[headerIndex])
+            })
+        })
+    });
+}

data/dist/chunks/{_typeahead-BNULwihE.js → _typeahead-DCD3NrAk.js}

@@ -1,4 +1,4 @@
-import{jsx as jsx$1,Fragment,jsxs}from"react/jsx-runtime";import*as React from"react";import React__default,{createContext,useReducer,useEffect,useMemo,useContext,useRef,createElement,useState,forwardRef,useLayoutEffect,useCallback,useImperativeHandle,Component,Fragment as Fragment$1}from"react";import{r as getDefaultExportFromCjs,x as filter,y as omit,u as useCollapsible,j as getAllIcons,z as get,q as commonjsGlobal,w as colors$1,t as highchartsTheme,A as merge,s as highchartsDarkTheme,B as getAugmentedNamespace,C as createPopper,E as uniqueId,F as typography,G as cloneDeep,H as isString}from"./lib-B7sgJtGS.js";import*as ReactDOM from"react-dom";import ReactDOM__default,{createPortal}from"react-dom";import{TrixEditor}from"react-trix";import Trix from"trix";import require$$0 from"react-is";const initialState={items:[],dragData:{id:"",initialGroup:""},isDragging:"",activeContainer:""};const reducer=(state,action)=>{switch(action.type){case"SET_ITEMS":return Object.assign(Object.assign({},state),{items:action.payload});case"SET_DRAG_DATA":return Object.assign(Object.assign({},state),{dragData:action.payload});case"SET_IS_DRAGGING":return Object.assign(Object.assign({},state),{isDragging:action.payload});case"SET_ACTIVE_CONTAINER":return Object.assign(Object.assign({},state),{activeContainer:action.payload});case"CHANGE_CATEGORY":return Object.assign(Object.assign({},state),{items:state.items.map((item=>item.id===action.payload.itemId?Object.assign(Object.assign({},item),{container:action.payload.container}):item))});case"REORDER_ITEMS":{const{dragId:dragId,targetId:targetId}=action.payload;const newItems=[...state.items];const draggedItem=newItems.find((item=>item.id===dragId));const draggedIndex=newItems.indexOf(draggedItem);const targetIndex=newItems.findIndex((item=>item.id===targetId));newItems.splice(draggedIndex,1);newItems.splice(targetIndex,0,draggedItem);return Object.assign(Object.assign({},state),{items:newItems})}default:return state}};const DragContext=createContext({});const DraggableContext=()=>useContext(DragContext);const DraggableProvider=({children:children,initialItems:initialItems,onReorder:onReorder,onDragStart:onDragStart,onDragEnter:onDragEnter,onDragEnd:onDragEnd,onDrop:onDrop,onDragOver:onDragOver})=>{const[state,dispatch]=useReducer(reducer,initialState);useEffect((()=>{dispatch({type:"SET_ITEMS",payload:initialItems})}),[initialItems]);useEffect((()=>{onReorder(state.items)}),[state.items]);const handleDragStart=(id,container)=>{dispatch({type:"SET_DRAG_DATA",payload:{id:id,initialGroup:container}});dispatch({type:"SET_IS_DRAGGING",payload:id});if(onDragStart)onDragStart(id,container)};const handleDragEnter=(id,container)=>{if(state.dragData.id!==id){dispatch({type:"REORDER_ITEMS",payload:{dragId:state.dragData.id,targetId:id}});dispatch({type:"SET_DRAG_DATA",payload:{id:state.dragData.id,initialGroup:container}})}if(onDragEnter)onDragEnter(id,container)};const handleDragEnd=()=>{dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});if(onDragEnd)onDragEnd()};const changeCategory=(itemId,container)=>{dispatch({type:"CHANGE_CATEGORY",payload:{itemId:itemId,container:container}})};const handleDrop=container=>{dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});changeCategory(state.dragData.id,container);if(onDrop)onDrop(container)};const handleDragOver=(e,container)=>{e.preventDefault();dispatch({type:"SET_ACTIVE_CONTAINER",payload:container});if(onDragOver)onDragOver(e,container)};const contextValue=useMemo((()=>({items:state.items,dragData:state.dragData,isDragging:state.isDragging,activeContainer:state.activeContainer,handleDragStart:handleDragStart,handleDragEnter:handleDragEnter,handleDragEnd:handleDragEnd,handleDrop:handleDrop,handleDragOver:handleDragOver})),[state]);return jsx$1(DragContext.Provider,Object.assign({value:contextValue},{children:children}),void 0)};var classnames$1={exports:{}};
+import{jsx as jsx$1,Fragment,jsxs}from"react/jsx-runtime";import*as React from"react";import React__default,{createContext,useReducer,useEffect,useMemo,useContext,useRef,createElement,useState,forwardRef,useLayoutEffect,useCallback,useImperativeHandle,Component,Fragment as Fragment$1}from"react";import{r as getDefaultExportFromCjs,x as filter,y as omit,u as useCollapsible,j as getAllIcons,z as get,q as commonjsGlobal,w as colors$1,t as highchartsTheme,A as merge,s as highchartsDarkTheme,B as getAugmentedNamespace,C as createPopper,E as uniqueId,F as typography,G as cloneDeep,H as isString}from"./lib-OFT985dg.js";import*as ReactDOM from"react-dom";import ReactDOM__default,{createPortal}from"react-dom";import{TrixEditor}from"react-trix";import Trix from"trix";import require$$0 from"react-is";const initialState={items:[],dragData:{id:"",initialGroup:""},isDragging:"",activeContainer:""};const reducer=(state,action)=>{switch(action.type){case"SET_ITEMS":return Object.assign(Object.assign({},state),{items:action.payload});case"SET_DRAG_DATA":return Object.assign(Object.assign({},state),{dragData:action.payload});case"SET_IS_DRAGGING":return Object.assign(Object.assign({},state),{isDragging:action.payload});case"SET_ACTIVE_CONTAINER":return Object.assign(Object.assign({},state),{activeContainer:action.payload});case"CHANGE_CATEGORY":return Object.assign(Object.assign({},state),{items:state.items.map((item=>item.id===action.payload.itemId?Object.assign(Object.assign({},item),{container:action.payload.container}):item))});case"REORDER_ITEMS":{const{dragId:dragId,targetId:targetId}=action.payload;const newItems=[...state.items];const draggedItem=newItems.find((item=>item.id===dragId));const draggedIndex=newItems.indexOf(draggedItem);const targetIndex=newItems.findIndex((item=>item.id===targetId));newItems.splice(draggedIndex,1);newItems.splice(targetIndex,0,draggedItem);return Object.assign(Object.assign({},state),{items:newItems})}default:return state}};const DragContext=createContext({});const DraggableContext=()=>useContext(DragContext);const DraggableProvider=({children:children,initialItems:initialItems,onReorder:onReorder,onDragStart:onDragStart,onDragEnter:onDragEnter,onDragEnd:onDragEnd,onDrop:onDrop,onDragOver:onDragOver})=>{const[state,dispatch]=useReducer(reducer,initialState);useEffect((()=>{dispatch({type:"SET_ITEMS",payload:initialItems})}),[initialItems]);useEffect((()=>{onReorder(state.items)}),[state.items]);const handleDragStart=(id,container)=>{dispatch({type:"SET_DRAG_DATA",payload:{id:id,initialGroup:container}});dispatch({type:"SET_IS_DRAGGING",payload:id});if(onDragStart)onDragStart(id,container)};const handleDragEnter=(id,container)=>{if(state.dragData.id!==id){dispatch({type:"REORDER_ITEMS",payload:{dragId:state.dragData.id,targetId:id}});dispatch({type:"SET_DRAG_DATA",payload:{id:state.dragData.id,initialGroup:container}})}if(onDragEnter)onDragEnter(id,container)};const handleDragEnd=()=>{dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});if(onDragEnd)onDragEnd()};const changeCategory=(itemId,container)=>{dispatch({type:"CHANGE_CATEGORY",payload:{itemId:itemId,container:container}})};const handleDrop=container=>{dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});changeCategory(state.dragData.id,container);if(onDrop)onDrop(container)};const handleDragOver=(e,container)=>{e.preventDefault();dispatch({type:"SET_ACTIVE_CONTAINER",payload:container});if(onDragOver)onDragOver(e,container)};const contextValue=useMemo((()=>({items:state.items,dragData:state.dragData,isDragging:state.isDragging,activeContainer:state.activeContainer,handleDragStart:handleDragStart,handleDragEnter:handleDragEnter,handleDragEnd:handleDragEnd,handleDrop:handleDrop,handleDragOver:handleDragOver})),[state]);return jsx$1(DragContext.Provider,Object.assign({value:contextValue},{children:children}),void 0)};var classnames$1={exports:{}};
 /*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see