playbook_ui 13.19.0.pre.alpha.PBNTR207tabledivsupport2245 → 13.19.0.pre.alpha.PBNTR211tablekitsubcomponentsreact2318

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

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

@@ -0,0 +1,5 @@
+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/_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 "./SubKits";
 
 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

@@ -1,34 +1,34 @@
 <%= pb_rails("table", props: { size: "sm", tag: "div" }) do %>
-  <div class="thead">
-    <div class="tr">
-      <div class="th">Column 1</div>
-      <div class="th">Column 2</div>
-      <div class="th">Column 3</div>
-      <div class="th">Column 4</div>
-      <div class="th">Column 5</div>
+  <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="tbody">
-    <div class="tr">
-      <div class="td">Value 1</div>
-      <div class="td">Value 2</div>
-      <div class="td">Value 3</div>
-      <div class="td">Value 4</div>
-      <div class="td">Value 5</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="tr">
-      <div class="td">Value 1</div>
-      <div class="td">Value 2</div>
-      <div class="td">Value 3</div>
-      <div class="td">Value 4</div>
-      <div class="td">Value 5</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="tr">
-      <div class="td">Value 1</div>
-      <div class="td">Value 2</div>
-      <div class="td">Value 3</div>
-      <div class="td">Value 4</div>
-      <div class="td">Value 5</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

@@ -5,38 +5,39 @@ const TableDiv = (props) => {
   return (
     <Table
         size="sm"
+        tag="div"
         {...props}
     >
-      <div className="thead">
-        <div className="tr">
-          <div className="th">{'Column 1'}</div>
-          <div className="th">{'Column 2'}</div>
-          <div className="th">{'Column 3'}</div>
-          <div className="th">{'Column 4'}</div>
-          <div className="th">{'Column 5'}</div>
+      <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="tbody">
-        <div className="tr">
-          <div className="td">{'Value 1'}</div>
-          <div className="td">{'Value 2'}</div>
-          <div className="td">{'Value 3'}</div>
-          <div className="td">{'Value 4'}</div>
-          <div className="td">{'Value 5'}</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="tr">
-          <div className="td">{'Value 1'}</div>
-          <div className="td">{'Value 2'}</div>
-          <div className="td">{'Value 3'}</div>
-          <div className="td">{'Value 4'}</div>
-          <div className="td">{'Value 5'}</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="tr">
-          <div className="td">{'Value 1'}</div>
-          <div className="td">{'Value 2'}</div>
-          <div className="td">{'Value 3'}</div>
-          <div className="td">{'Value 4'}</div>
-          <div className="td">{'Value 5'}</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>

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.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.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