playbook_ui_docs 13.20.0.pre.alpha.PBNTR225advancedtablefeedback2375 → 13.20.0.pre.alpha.play1247htmloptions2403

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

@@ -1,6 +1,5 @@
 examples:
   rails:
-    # - table_div: Div
     - table_sm: Small
     - table_md: Medium
     - table_lg: Large
@@ -25,12 +24,11 @@ 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_rails: Table with Sub Components (Table Elements)
     - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
 
 
   react:
-    # - table_div: Div
     - table_sm: Small
     - table_md: Medium
     - table_lg: Large
@@ -54,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

@@ -22,3 +22,5 @@ export { default as TableWithBackgroundKit } from './_table_with_background_kit.
 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'