playbook_ui 13.19.0.pre.alpha.PBNTR211tablekitsubcomponentsreact2318 → 13.19.0.pre.alpha.play1141iconkitusinglibrary2264

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "13.19.0"
-  VERSION = "13.19.0.pre.alpha.PBNTR211tablekitsubcomponentsreact2318"
+  VERSION = "13.19.0.pre.alpha.play1141iconkitusinglibrary2264"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 13.19.0.pre.alpha.PBNTR211tablekitsubcomponentsreact2318
+  version: 13.19.0.pre.alpha.play1141iconkitusinglibrary2264
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-03-07 00:00:00.000000000 Z
+date: 2024-03-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -2220,14 +2220,9 @@ files:
 - app/pb_kits/playbook/pb_stat_value/stat_value.html.erb
 - app/pb_kits/playbook/pb_stat_value/stat_value.rb
 - app/pb_kits/playbook/pb_stat_value/stat_value.test.js
-- app/pb_kits/playbook/pb_table/SubKits/_table_body.tsx
-- app/pb_kits/playbook/pb_table/SubKits/_table_cell.tsx
-- app/pb_kits/playbook/pb_table/SubKits/_table_head.tsx
-- app/pb_kits/playbook/pb_table/SubKits/_table_header.tsx
-- app/pb_kits/playbook/pb_table/SubKits/_table_row.tsx
-- app/pb_kits/playbook/pb_table/SubKits/index.tsx
 - app/pb_kits/playbook/pb_table/_table.scss
 - app/pb_kits/playbook/pb_table/_table.tsx
+- app/pb_kits/playbook/pb_table/_table_row.tsx
 - app/pb_kits/playbook/pb_table/docs/_description.md
 - app/pb_kits/playbook/pb_table/docs/_table_action_middle.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_action_middle.jsx
@@ -2250,8 +2245,6 @@ files:
 - app/pb_kits/playbook/pb_table/docs/_table_data_table.md
 - app/pb_kits/playbook/pb_table/docs/_table_disable_hover.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_disable_hover.jsx
-- app/pb_kits/playbook/pb_table/docs/_table_div.html.erb
-- app/pb_kits/playbook/pb_table/docs/_table_div.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_header.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_header.md
 - app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.html.erb
@@ -2294,10 +2287,6 @@ files:
 - app/pb_kits/playbook/pb_table/docs/_table_vertical_border.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.jsx
-- app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.html.erb
-- app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.jsx
-- app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.html.erb
-- app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.jsx
 - app/pb_kits/playbook/pb_table/docs/example.yml
 - app/pb_kits/playbook/pb_table/docs/index.js
 - app/pb_kits/playbook/pb_table/index.ts
@@ -2324,12 +2313,6 @@ files:
 - app/pb_kits/playbook/pb_table/table.html.erb
 - app/pb_kits/playbook/pb_table/table.rb
 - app/pb_kits/playbook/pb_table/table.test.js
-- app/pb_kits/playbook/pb_table/table_body.html.erb
-- app/pb_kits/playbook/pb_table/table_body.rb
-- app/pb_kits/playbook/pb_table/table_cell.html.erb
-- app/pb_kits/playbook/pb_table/table_cell.rb
-- app/pb_kits/playbook/pb_table/table_head.html.erb
-- app/pb_kits/playbook/pb_table/table_head.rb
 - app/pb_kits/playbook/pb_table/table_header.html.erb
 - app/pb_kits/playbook/pb_table/table_header.rb
 - app/pb_kits/playbook/pb_table/table_row.html.erb

data/app/pb_kits/playbook/pb_table/SubKits/_table_body.tsx

@@ -1,64 +0,0 @@
-import React from "react";
-import classnames from "classnames";
-import {
-  buildAriaProps,
-  buildDataProps,
-  buildHtmlProps,
-} from "../../utilities/props";
-import { globalProps } from "../../utilities/globalProps";
-
-type TableBodyPropTypes = {
-  aria?: { [key: string]: string };
-  children: React.ReactNode[] | React.ReactNode;
-  className: string;
-  data?: { [key: string]: string };
-  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
-  id?: string;
-  tag?: "table" | "div";
-};
-
-const TableBody = (props: TableBodyPropTypes) => {
-  const {
-    aria = {},
-    children,
-    className,
-    data = {},
-    htmlOptions = {},
-    id,
-    tag = "table",
-  } = props;
-
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
-  const htmlProps = buildHtmlProps(htmlOptions);
-  const classes = classnames("pb_table_tbody", globalProps(props), className);
-  const isTableTag = tag === "table";
-
-  return (
-    <>
-      {isTableTag ? (
-        <tbody
-            {...ariaProps}
-            {...dataProps}
-            {...htmlProps}
-            className={classes}
-            id={id}
-        >
-          {children}
-        </tbody>
-      ) : (
-        <div
-            {...ariaProps}
-            {...dataProps}
-            {...htmlProps}
-            className={classes}
-            id={id}
-        >
-          {children}
-        </div>
-      )}
-    </>
-  );
-};
-
-export default TableBody;

data/app/pb_kits/playbook/pb_table/SubKits/_table_cell.tsx

@@ -1,66 +0,0 @@
-import React from "react";
-import classnames from "classnames";
-import {
-  buildAriaProps,
-  buildDataProps,
-  buildHtmlProps,
-} from "../../utilities/props";
-import { globalProps } from "../../utilities/globalProps";
-
-type TableCellPropTypes = {
-  aria?: { [key: string]: string };
-  children: React.ReactNode[] | React.ReactNode;
-  className: string;
-  data?: { [key: string]: string };
-  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
-  id?: string;
-  tag?: "table" | "div";
-  text?: string
-};
-
-const TableCell = (props: TableCellPropTypes) => {
-  const {
-    aria = {},
-    children,
-    className,
-    data = {},
-    htmlOptions = {},
-    id,
-    tag = "table",
-    text,
-  } = props;
-
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
-  const htmlProps = buildHtmlProps(htmlOptions);
-  const classes = classnames("pb_table_td", globalProps(props), className);
-  const isTableTag = tag === "table";
-
-  return (
-    <>
-      {isTableTag ? (
-        <td
-            {...ariaProps}
-            {...dataProps}
-            {...htmlProps}
-            className={classes}
-            id={id}
-        >
-          {text || children}
-        </td>
-      ) : (
-        <div
-            {...ariaProps}
-            {...dataProps}
-            {...htmlProps}
-            className={classes}
-            id={id}
-        >
-          {text || children}
-        </div>
-      )}
-    </>
-  );
-};
-
-export default TableCell;

data/app/pb_kits/playbook/pb_table/SubKits/_table_head.tsx

@@ -1,64 +0,0 @@
-import React from "react";
-import classnames from "classnames";
-import {
-  buildAriaProps,
-  buildDataProps,
-  buildHtmlProps,
-} from "../../utilities/props";
-import { globalProps } from "../../utilities/globalProps";
-
-type TableHeadPropTypes = {
-  aria?: { [key: string]: string };
-  children: React.ReactNode[] | React.ReactNode;
-  className: string;
-  data?: { [key: string]: string };
-  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
-  id?: string;
-  tag?: "table" | "div";
-};
-
-const TableHead = (props: TableHeadPropTypes) => {
-  const {
-    aria = {},
-    children,
-    className,
-    data = {},
-    htmlOptions = {},
-    id,
-    tag = "table",
-  } = props;
-
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
-  const htmlProps = buildHtmlProps(htmlOptions);
-  const classes = classnames("pb_table_thead", globalProps(props), className);
-  const isTableTag = tag === "table";
-
-  return (
-    <>
-      {isTableTag ? (
-        <thead
-            {...ariaProps}
-            {...dataProps}
-            {...htmlProps}
-            className={classes}
-            id={id}
-        >
-          {children}
-        </thead>
-      ) : (
-        <div
-            {...ariaProps}
-            {...dataProps}
-            {...htmlProps}
-            className={classes}
-            id={id}
-        >
-          {children}
-        </div>
-      )}
-    </>
-  );
-};
-
-export default TableHead;

data/app/pb_kits/playbook/pb_table/SubKits/_table_header.tsx

@@ -1,66 +0,0 @@
-import React from "react";
-import classnames from "classnames";
-import {
-  buildAriaProps,
-  buildDataProps,
-  buildHtmlProps,
-} from "../../utilities/props";
-import { globalProps } from "../../utilities/globalProps";
-
-type TableHeaderPropTypes = {
-  aria?: { [key: string]: string };
-  children: React.ReactNode[] | React.ReactNode;
-  className: string;
-  data?: { [key: string]: string };
-  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
-  id?: string;
-  tag?: "table" | "div";
-  text?: string;
-};
-
-const TableHeader = (props: TableHeaderPropTypes) => {
-  const {
-    aria = {},
-    children,
-    className,
-    data = {},
-    htmlOptions = {},
-    id,
-    tag = "table",
-    text
-  } = props;
-
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
-  const htmlProps = buildHtmlProps(htmlOptions);
-  const classes = classnames("pb_table_th", globalProps(props), className);
-  const isTableTag = tag === "table";
-
-  return (
-    <>
-      {isTableTag ? (
-        <th
-            {...ariaProps}
-            {...dataProps}
-            {...htmlProps}
-            className={classes}
-            id={id}
-        >
-          {text || children}
-        </th>
-      ) : (
-        <div
-            {...ariaProps}
-            {...dataProps}
-            {...htmlProps}
-            className={classes}
-            id={id}
-        >
-          {text || children}
-        </div>
-      )}
-    </>
-  );
-};
-
-export default TableHeader;

data/app/pb_kits/playbook/pb_table/SubKits/_table_row.tsx

@@ -1,74 +0,0 @@
-import React from "react";
-import classnames from "classnames";
-import {
-  buildAriaProps,
-  buildCss,
-  buildDataProps,
-  buildHtmlProps,
-} from "../../utilities/props";
-import { globalProps } from "../../utilities/globalProps";
-
-type TableRowPropTypes = {
-  aria?: { [key: string]: string };
-  children: React.ReactNode[] | React.ReactNode;
-  className: string;
-  data?: { [key: string]: string };
-  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
-  id?: string;
-  sideHighlightColor: string;
-  tag?: "table" | "div";
-};
-
-const TableRow = (props: TableRowPropTypes) => {
-  const {
-    aria = {},
-    children,
-    className,
-    data = {},
-    htmlOptions = {},
-    id,
-    sideHighlightColor = "none",
-    tag = "table",
-  } = props;
-
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
-  const htmlProps = buildHtmlProps(htmlOptions);
-  const sideHighlightClass =
-    sideHighlightColor != "" ? `side_highlight_${sideHighlightColor}` : null;
-  const classes = classnames(
-    buildCss("pb_table_row_kit", sideHighlightClass),
-    "pb_table_tr",
-    globalProps(props),
-    className
-  );
-  const isTableTag = tag === "table";
-
-  return (
-    <>
-      {isTableTag ? (
-        <tr
-            {...ariaProps}
-            {...dataProps}
-            {...htmlProps}
-            className={classes}
-            id={id}
-        >
-          {children}
-        </tr>
-      ) : (
-        <div
-            {...ariaProps}
-            {...dataProps}
-            {...htmlProps}
-            className={classes}
-            id={id}
-        >
-          {children}
-        </div>
-      )}
-    </>
-  );
-};
-
-export default TableRow;

data/app/pb_kits/playbook/pb_table/SubKits/index.tsx

@@ -1,5 +0,0 @@
-export { default as TableHead } from './_table_head';
-export { default as TableHeader } from './_table_header';
-export { default as TableBody } from './_table_body';
-export { default as TableRow } from './_table_row';
-export { default as TableCell } from './_table_cell';

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

@@ -1,34 +0,0 @@
-<%= pb_rails("table", props: { size: "sm", tag: "div" }) do %>
-  <div class="pb_table_thead">
-    <div class="pb_table_tr">
-      <div class="pb_table_th">Column 1</div>
-      <div class="pb_table_th">Column 2</div>
-      <div class="pb_table_th">Column 3</div>
-      <div class="pb_table_th">Column 4</div>
-      <div class="pb_table_th">Column 5</div>
-    </div>
-  </div>
-  <div class="pb_table_tbody">
-    <div class="pb_table_tr">
-      <div class="pb_table_td">Value 1</div>
-      <div class="pb_table_td">Value 2</div>
-      <div class="pb_table_td">Value 3</div>
-      <div class="pb_table_td">Value 4</div>
-      <div class="pb_table_td">Value 5</div>
-    </div>
-    <div class="pb_table_tr">
-      <div class="pb_table_td">Value 1</div>
-      <div class="pb_table_td">Value 2</div>
-      <div class="pb_table_td">Value 3</div>
-      <div class="pb_table_td">Value 4</div>
-      <div class="pb_table_td">Value 5</div>
-    </div>
-    <div class="pb_table_tr">
-      <div class="pb_table_td">Value 1</div>
-      <div class="pb_table_td">Value 2</div>
-      <div class="pb_table_td">Value 3</div>
-      <div class="pb_table_td">Value 4</div>
-      <div class="pb_table_td">Value 5</div>
-    </div>
-  </div>
-<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_div.jsx

@@ -1,47 +0,0 @@
-import React from 'react'
-import Table from '../_table'
-
-const TableDiv = (props) => {
-  return (
-    <Table
-        size="sm"
-        tag="div"
-        {...props}
-    >
-      <div className="pb_table_thead">
-        <div className="pb_table_tr">
-          <div className="pb_table_th">{'Column 1'}</div>
-          <div className="pb_table_th">{'Column 2'}</div>
-          <div className="pb_table_th">{'Column 3'}</div>
-          <div className="pb_table_th">{'Column 4'}</div>
-          <div className="pb_table_th">{'Column 5'}</div>
-        </div>
-      </div>
-      <div className="pb_table_tbody">
-        <div className="pb_table_tr">
-          <div className="pb_table_td">{'Value 1'}</div>
-          <div className="pb_table_td">{'Value 2'}</div>
-          <div className="pb_table_td">{'Value 3'}</div>
-          <div className="pb_table_td">{'Value 4'}</div>
-          <div className="pb_table_td">{'Value 5'}</div>
-        </div>
-        <div className="pb_table_tr">
-          <div className="pb_table_td">{'Value 1'}</div>
-          <div className="pb_table_td">{'Value 2'}</div>
-          <div className="pb_table_td">{'Value 3'}</div>
-          <div className="pb_table_td">{'Value 4'}</div>
-          <div className="pb_table_td">{'Value 5'}</div>
-        </div>
-        <div className="pb_table_tr">
-          <div className="pb_table_td">{'Value 1'}</div>
-          <div className="pb_table_td">{'Value 2'}</div>
-          <div className="pb_table_td">{'Value 3'}</div>
-          <div className="pb_table_td">{'Value 4'}</div>
-          <div className="pb_table_td">{'Value 5'}</div>
-        </div>
-      </div>
-    </Table>
-  )
-}
-
-export default TableDiv

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

@@ -1,34 +0,0 @@
-<%= pb_rails("table", props: { size: "sm" }) do %>
-    <%= pb_rails("table/table_head") do %>
-        <%= pb_rails("table/table_row") do %>
-            <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
-            <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
-            <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
-            <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
-            <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>       
-         <% end %>
-    <% end %>
-    <%= pb_rails("table/table_body") do %>
-        <%= pb_rails("table/table_row") do %>
-            <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
-            <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
-            <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
-            <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
-            <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
-        <% end %>
-        <%= pb_rails("table/table_row") do %>
-            <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
-            <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
-            <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
-            <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
-            <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
-        <% end %>
-        <%= pb_rails("table/table_row") do %>
-            <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
-            <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
-            <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
-            <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
-            <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
-        <% end %>
-    <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.jsx

@@ -1,47 +0,0 @@
-import React from 'react'
-
-import Table from '../_table'
-
-const TableWithSubcomponents = (props) => {
-  return (
-    <Table
-        size="sm"
-        {...props}
-    >
-      <Table.Head>
-        <Table.Row>
-          <Table.Header>{'Column 1'}</Table.Header>
-          <Table.Header>{'Column 2'}</Table.Header>
-          <Table.Header>{'Column 3'}</Table.Header>
-          <Table.Header>{'Column 4'}</Table.Header>
-          <Table.Header>{'Column 5'}</Table.Header>
-        </Table.Row>
-      </Table.Head>
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell>{'Value 1'}</Table.Cell>
-          <Table.Cell>{'Value 2'}</Table.Cell>
-          <Table.Cell>{'Value 3'}</Table.Cell>
-          <Table.Cell>{'Value 4'}</Table.Cell>
-          <Table.Cell>{'Value 5'}</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>{'Value 1'}</Table.Cell>
-          <Table.Cell>{'Value 2'}</Table.Cell>
-          <Table.Cell>{'Value 3'}</Table.Cell>
-          <Table.Cell>{'Value 4'}</Table.Cell>
-          <Table.Cell>{'Value 5'}</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>{'Value 1'}</Table.Cell>
-          <Table.Cell>{'Value 2'}</Table.Cell>
-          <Table.Cell>{'Value 3'}</Table.Cell>
-          <Table.Cell>{'Value 4'}</Table.Cell>
-          <Table.Cell>{'Value 5'}</Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  )
-}
-
-export default TableWithSubcomponents

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

@@ -1,34 +0,0 @@
-<%= pb_rails("table", props: { size: "sm", tag:"div" }) do %>
-    <%= pb_rails("table/table_head", props: {tag:"div"}) do %>
-        <%= pb_rails("table/table_row", props: {tag:"div"}) do %>
-            <%= pb_rails("table/table_header", props: { text: "Column 1", tag:"div"}) %>
-            <%= pb_rails("table/table_header", props: { text: "Column 2", tag:"div"}) %>
-            <%= pb_rails("table/table_header", props: { text: "Column 3", tag:"div"}) %>
-            <%= pb_rails("table/table_header", props: { text: "Column 4", tag:"div"}) %>
-            <%= pb_rails("table/table_header", props: { text: "Column 5", tag:"div"}) %>       
-         <% end %>
-    <% end %>
-    <%= pb_rails("table/table_body", props: {tag:"div"}) do %>
-        <%= pb_rails("table/table_row", props: {tag:"div"}) do %>
-            <%= pb_rails("table/table_cell", props: { text: "Value 1", tag:"div"}) %>
-            <%= pb_rails("table/table_cell", props: { text: "Value 2", tag:"div"}) %>
-            <%= pb_rails("table/table_cell", props: { text: "Value 3", tag:"div"}) %>
-            <%= pb_rails("table/table_cell", props: { text: "Value 4", tag:"div"}) %>
-            <%= pb_rails("table/table_cell", props: { text: "Value 5", tag:"div"}) %>
-        <% end %>
-        <%= pb_rails("table/table_row", props: {tag:"div"}) do %>
-            <%= pb_rails("table/table_cell", props: { text: "Value 1", tag:"div"}) %>
-            <%= pb_rails("table/table_cell", props: { text: "Value 2", tag:"div"}) %>
-            <%= pb_rails("table/table_cell", props: { text: "Value 3", tag:"div"}) %>
-            <%= pb_rails("table/table_cell", props: { text: "Value 4", tag:"div"}) %>
-            <%= pb_rails("table/table_cell", props: { text: "Value 5", tag:"div"}) %>
-        <% end %>
-        <%= pb_rails("table/table_row", props: {tag:"div"}) do %>
-            <%= pb_rails("table/table_cell", props: { text: "Value 1", tag:"div"}) %>
-            <%= pb_rails("table/table_cell", props: { text: "Value 2", tag:"div"}) %>
-            <%= pb_rails("table/table_cell", props: { text: "Value 3", tag:"div"}) %>
-            <%= pb_rails("table/table_cell", props: { text: "Value 4", tag:"div"}) %>
-            <%= pb_rails("table/table_cell", props: { text: "Value 5", tag:"div"}) %>
-        <% end %>
-    <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.jsx

@@ -1,48 +0,0 @@
-import React from 'react'
-
-import Table from '../_table'
-
-const TableWithSubcomponentsAsDivs = (props) => {
-  return (
-    <Table
-        size="sm"
-        tag="div"
-        {...props}
-    >
-      <Table.Head tag="div">
-        <Table.Row tag="div">
-          <Table.Header tag="div">{'Column 1'}</Table.Header>
-          <Table.Header tag="div">{'Column 2'}</Table.Header>
-          <Table.Header tag="div">{'Column 3'}</Table.Header>
-          <Table.Header tag="div">{'Column 4'}</Table.Header>
-          <Table.Header tag="div">{'Column 5'}</Table.Header>
-        </Table.Row>
-      </Table.Head>
-      <Table.Body tag="div">
-        <Table.Row tag="div">
-          <Table.Cell tag="div">{'Value 1'}</Table.Cell>
-          <Table.Cell tag="div">{'Value 2'}</Table.Cell>
-          <Table.Cell tag="div">{'Value 3'}</Table.Cell>
-          <Table.Cell tag="div">{'Value 4'}</Table.Cell>
-          <Table.Cell tag="div">{'Value 5'}</Table.Cell>
-        </Table.Row>
-        <Table.Row tag="div">
-          <Table.Cell tag="div">{'Value 1'}</Table.Cell>
-          <Table.Cell tag="div">{'Value 2'}</Table.Cell>
-          <Table.Cell tag="div">{'Value 3'}</Table.Cell>
-          <Table.Cell tag="div">{'Value 4'}</Table.Cell>
-          <Table.Cell tag="div">{'Value 5'}</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell tag="div">{'Value 1'}</Table.Cell>
-          <Table.Cell tag="div">{'Value 2'}</Table.Cell>
-          <Table.Cell tag="div">{'Value 3'}</Table.Cell>
-          <Table.Cell tag="div">{'Value 4'}</Table.Cell>
-          <Table.Cell tag="div">{'Value 5'}</Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  )
-}
-
-export default TableWithSubcomponentsAsDivs