playbook_ui 13.19.0 → 13.20.0.pre.alpha.PLAY12572402

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

@@ -3,69 +3,69 @@ import classnames from 'classnames'
 import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 import PbTable from '.'
+import {
+  TableHead,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableCell,
+} from "./subcomponents";
 
 type TableProps = {
-  aria?: { [key: string]: string },
-  children: React.ReactNode[] | React.ReactNode,
-  className: string,
-  collapse?: "sm" | "md" | "lg",
-  container?: boolean,
-  dark?: boolean,
-  data?: { [key: string]: string },
-  dataTable: boolean,
-  disableHover?: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
-  id?: string,
-  responsive?: "collapse" | "scroll" | "none",
-  singleLine?: boolean,
-  size?: "sm" | "md" | "lg",
-  sticky?: boolean,
-  striped?: boolean,
-  verticalBorder?: boolean,
+    aria?: { [key: string]: string },
+    children: React.ReactNode[] | React.ReactNode,
+    className: string,
+    collapse?: "sm" | "md" | "lg",
+    container?: boolean,
+    dark?: boolean,
+    data?: { [key: string]: string },
+    dataTable: boolean,
+    disableHover?: boolean,
+    htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
+    id?: string,
+    responsive?: "collapse" | "scroll" | "none",
+    singleLine?: boolean,
+    size?: "sm" | "md" | "lg",
+    sticky?: boolean,
+    striped?: boolean,
+    tag?: "table" | "div",
+    verticalBorder?: boolean,
 } & GlobalProps
 
 const Table = (props: TableProps) => {
-  const {
-    aria = {},
-    children,
-    className,
-    collapse = 'sm',
-    container = true,
-    dark,
-    data = {},
-    dataTable = false,
-    disableHover = false,
-    htmlOptions = {},
-    id,
-    responsive = 'collapse',
-    singleLine = false,
-    size = 'sm',
-    sticky = false,
-    striped = false,
-    verticalBorder = false,
-  } = props
+    const {
+        aria = {},
+        children,
+        className,
+        collapse = 'sm',
+        container = true,
+        dark,
+        data = {},
+        dataTable = false,
+        disableHover = false,
+        htmlOptions = {},
+        id,
+        responsive = 'collapse',
+        singleLine = false,
+        size = 'sm',
+        sticky = false,
+        striped = false,
+        tag = 'table',
+        verticalBorder = false,
+    } = props
 
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
-  const tableCollapseCss = responsive !== 'none' ? `table-collapse-${collapse}` : ''
-  const verticalBorderCss = verticalBorder ? 'vertical-border' : ''
+    const ariaProps = buildAriaProps(aria)
+    const dataProps = buildDataProps(data)
+    const htmlProps = buildHtmlProps(htmlOptions)
+    const tableCollapseCss = responsive !== 'none' ? `table-collapse-${collapse}` : ''
+    const verticalBorderCss = verticalBorder ? 'vertical-border' : ''
+    const isTableTag = tag === 'table'
 
-  useEffect(() => {
-    const instance = new PbTable()
-    instance.connect()
-  }, [])
-
-  return (
-    <table
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        className={classnames(
-          'pb_table',
-          `table-${size}`,
-          `table-responsive-${responsive}`,
-          {
+    const classNames = classnames(
+        'pb_table',
+        `table-${size}`,
+        `table-responsive-${responsive}`,
+        {
             'table-card': container,
             'table-dark': dark,
             'data_table': dataTable,
@@ -73,17 +73,49 @@ const Table = (props: TableProps) => {
             'no-hover': disableHover,
             'sticky-header': sticky,
             'striped': striped,
-          },
-          globalProps(props),
-          tableCollapseCss,
-          verticalBorderCss,
-          className
-        )}
-        id={id}
-    >
-        {children}
-    </table>
-  )
+        },
+        globalProps(props),
+        tableCollapseCss,
+        verticalBorderCss,
+        className
+    )
+
+    useEffect(() => {
+        const instance = new PbTable()
+        instance.connect()
+    }, [])
+
+    return (
+        <>
+            {isTableTag ? (
+                <table
+                    {...ariaProps}
+                    {...dataProps}
+                    {...htmlProps}
+                    className={classNames}
+                    id={id}
+                >
+                    {children}
+                </table>
+            ) : (
+                <div
+                    {...ariaProps}
+                    {...dataProps}
+                    {...htmlProps}
+                    className={classNames}
+                    id={id}
+                >
+                    {children}
+                </div>
+            )}
+        </>
+    )
 }
 
+Table.Head = TableHead
+Table.Header = TableHeader
+Table.Body = TableBody
+Table.Row = TableRow
+Table.Cell = TableCell
+
 export default Table

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

@@ -0,0 +1,34 @@
+<%= 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

@@ -0,0 +1,47 @@
+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_side_highlight.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 
 import Table from '../_table'
-import TableRow from '../_table_row'
 
 const TableSideHighlight = (props) => {
   return (
@@ -20,7 +19,7 @@ const TableSideHighlight = (props) => {
           </tr>
         </thead>
         <tbody>
-          <TableRow
+          <Table.Row
               sideHighlightColor="product_1_highlight"
               {...props}
           >
@@ -29,8 +28,8 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
-          <TableRow
+          </Table.Row>
+          <Table.Row
               sideHighlightColor="product_2_highlight"
               {...props}
           >
@@ -39,8 +38,8 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
-          <TableRow
+          </Table.Row>
+          <Table.Row
               sideHighlightColor="product_3_highlight"
               {...props}
           >
@@ -49,8 +48,8 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
-          <TableRow
+          </Table.Row>
+          <Table.Row
               sideHighlightColor="none"
               {...props}
           >
@@ -59,7 +58,7 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
+          </Table.Row>
         </tbody>
       </Table>
 
@@ -79,7 +78,7 @@ const TableSideHighlight = (props) => {
           </tr>
         </thead>
         <tbody>
-          <TableRow
+          <Table.Row
               sideHighlightColor="success"
               {...props}
           >
@@ -88,8 +87,8 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
-          <TableRow
+          </Table.Row>
+          <Table.Row
               sideHighlightColor="warning"
               {...props}
           >
@@ -98,8 +97,8 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
-          <TableRow
+          </Table.Row>
+          <Table.Row
               sideHighlightColor="error"
               {...props}
           >
@@ -108,8 +107,8 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
-          <TableRow
+          </Table.Row>
+          <Table.Row
               sideHighlightColor="none"
               {...props}
           >
@@ -118,7 +117,7 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
+          </Table.Row>
         </tbody>
       </Table>
 
@@ -138,7 +137,7 @@ const TableSideHighlight = (props) => {
           </tr>
         </thead>
         <tbody>
-          <TableRow
+          <Table.Row
               sideHighlightColor="category_1"
               {...props}
           >
@@ -147,8 +146,8 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
-          <TableRow
+          </Table.Row>
+          <Table.Row
               sideHighlightColor="category_2"
               {...props}
           >
@@ -157,8 +156,8 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
-          <TableRow
+          </Table.Row>
+          <Table.Row
               sideHighlightColor="category_3"
               {...props}
           >
@@ -167,8 +166,8 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
-          <TableRow
+          </Table.Row>
+          <Table.Row
               sideHighlightColor="none"
               {...props}
           >
@@ -177,7 +176,7 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
+          </Table.Row>
         </tbody>
       </Table>
     </div>

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

@@ -0,0 +1,47 @@
+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.md

@@ -0,0 +1,7 @@
+You can optionally build your table using our sub-components, which map to their respective html table elements:
+
+`Table.Head` = `thead`
+`Table.Body` = `tbody`
+`Table.Row` = `tr`
+`Table.Header` = `th`
+`Table.Cell` = `td`

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

@@ -0,0 +1,34 @@
+<%= 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

@@ -0,0 +1,48 @@
+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

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

@@ -0,0 +1,3 @@
+Optionally build your table with divs by passing `div` to the `tag` prop of all* your sub-components. 
+
+*NOTE: The `tag` prop defaults to `table`, which returns html elements.  If divs are desired, sub-components must be used and all table elements, including the initial kit call, must use `div` as their `tag` in order for the table to render properly.

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

@@ -0,0 +1,34 @@
+<%= 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_rails.md

@@ -0,0 +1,7 @@
+You can optionally build your table using our sub-components, which map to their respective html table elements:
+
+`table_head` = `thead`
+`table_body` = `tbody`
+`table_row` = `tr`
+`table_header` = `th`
+`table_cell` = `td`

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

@@ -24,6 +24,9 @@ examples:
     - table_with_background_kit: Table With Background Kit
     - table_vertical_border: Vertical Borders
     - table_striped: Striped Table
+    - table_with_subcomponents_rails: Table with Sub Components (Table Elements)
+    - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
+
 
   react:
     - table_sm: Small
@@ -49,3 +52,6 @@ examples:
     - table_with_background_kit: Table With Background Kit
     - table_vertical_border: Vertical Borders
     - table_striped: Striped Table
+    - table_with_subcomponents: Table with Sub Components (Table Elements)
+    - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
+

data/app/pb_kits/playbook/pb_table/docs/index.js

@@ -21,3 +21,6 @@ export { default as TableAlignmentShiftData } from './_table_alignment_shift_dat
 export { default as TableWithBackgroundKit } from './_table_with_background_kit.jsx'
 export { default as TableVerticalBorder } from './_table_vertical_border.jsx'
 export { default as TableStriped } from './_table_striped.jsx'
+export { default as TableDiv } from './_table_div.jsx'
+export { default as TableWithSubcomponents } from './_table_with_subcomponents.jsx'
+export { default as TableWithSubcomponentsAsDivs } from './_table_with_subcomponents_as_divs.jsx'

data/app/pb_kits/playbook/pb_table/styles/_content.scss

@@ -2,9 +2,9 @@
   &.table-sm,
   &.table-md,
   &.table-lg {
-    tbody {
-      tr {
-        td {
+    tbody, .pb_table_tbody {
+      tr, .pb_table_tr {
+        td, .pb_table_td {
           font-size: $default-font-size;
         }
       }