playbook_ui 14.11.1 → 14.12.0.pre.alpha.PBNTR720railscarddraggable5649

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 684dfcc3e0b2d271c0ef3992c66895d5bf59f7814908e97b4ba0a6a2fd3a35c6
-  data.tar.gz: 8cff029a4d16a46c0d11292767c7faed0fed272b1102316c5c6988289b145f9b
+  metadata.gz: bfb340a31e2bb74d3749938720b1a44b2217e841d785f287f45499b70d8f03e5
+  data.tar.gz: 3cc515a9004e7a4558bd62bbda022c354e2fdfd15a9bd2541324a9d50287ae5c
 SHA512:
-  metadata.gz: cf605e9ea95eca375c9efc8a112416d373958b9c5b0cd2bb4ea63495a6e6a97e22776d372d96894d2060c0c2c02ee671943390b06dbf0b35dded14de3b531a09
-  data.tar.gz: 8c2b6329d1a8ed96313eb9cacae23f86c2801ebdf4fe24de3070b969b79758753ca5f7e2507956482e4560fac781f6dc443f55cf0844ea749f2e7dcd26b1c92e
+  metadata.gz: 93eab8412f7e086ffd7fa534aff415b0f648ec73e247a281cd1e2dc357144dc90bf2d63dc7c36c027769b2ee6e7d1355852cf5f36b159a3559f2a491315dc174
+  data.tar.gz: 4a15e5855591a6a817a683f701958ccae8b6b10d1a9d825c9ebcff15c4e3b276b5eb08c12f7858f82ea6d8604fbdd0aee419dddffe02012b0992891767f46a16

data/app/pb_kits/playbook/_playbook.scss

@@ -1,3 +1,4 @@
+
 @import 'pb_advanced_table/advanced_table';
 @import 'pb_avatar/avatar';
 @import 'pb_avatar_action_button/avatar_action_button';
@@ -108,6 +109,7 @@
 @import 'pb_user_badge/user_badge';
 @import 'pb_walkthrough/walkthrough';
 @import 'pb_weekday_stacked/weekday_stacked';
+@import 'pb_icon_button/icon_button';
 @import 'utilities/mixins';
 @import 'utilities/spacing';
 @import 'utilities/cursor';

data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx

@@ -8,6 +8,7 @@ import { GlobalProps } from "../../utilities/globalProps"
 import Flex from "../../pb_flex/_flex"
 import FlexItem from "../../pb_flex/_flex_item"
 import Icon from "../../pb_icon/_icon"
+import Checkbox from "../../pb_checkbox/_checkbox"
 
 import AdvancedTableContext from "../Context/AdvancedTableContext"
 
@@ -17,6 +18,7 @@ interface CustomCellProps {
   row: Row<GenericObject>
   value?: string
   customRenderer?: (row: Row<GenericObject>, value: string | undefined) => React.ReactNode
+  selectableRows?: boolean
 } 
 
 export const CustomCell = ({
@@ -25,8 +27,9 @@ export const CustomCell = ({
   row,
   value,
   customRenderer,
+  selectableRows,
 }: CustomCellProps & GlobalProps) => {
-  const { setExpanded, expanded, expandedControl, inlineRowLoading } = useContext(AdvancedTableContext);
+  const { setExpanded, expanded, expandedControl, inlineRowLoading, hasAnySubRows } = useContext(AdvancedTableContext);
 
   const handleOnExpand = (row: Row<GenericObject>) => {
     onRowToggleClick && onRowToggleClick(row);
@@ -41,10 +44,23 @@ export const CustomCell = ({
 
   return (
     <div style={{ paddingLeft: `${row.depth * 1.25}em` }}>
-      <Flex alignItems="center" 
+      <Flex 
+          alignItems="center" 
           columnGap="xs"
+          justify={!hasAnySubRows ? "end" : "start"}
           orientation="row"
       >
+        {
+          selectableRows && hasAnySubRows && (
+          <Checkbox
+              checked={row.getIsSelected()}
+              disabled={!row.getCanSelect()}
+              indeterminate={row.getIsSomeSelected()}
+              name={row.id}
+              onChange={row.getToggleSelectedHandler()}
+          />
+          )
+        }
         {renderButton ? (
           <button
               className="gray-icon expand-toggle-icon"

data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx

@@ -1,12 +1,13 @@
 import React, { useContext } from "react"
 import classnames from "classnames"
-import { flexRender, Header } from "@tanstack/react-table"
+import { flexRender, Header, Table } from "@tanstack/react-table"
 
 import { GenericObject } from "../../types"
 
 import { GlobalProps } from "../../utilities/globalProps"
 
 import Flex from "../../pb_flex/_flex"
+import Checkbox from "../../pb_checkbox/_checkbox"
 
 import { SortIconButton } from "./SortIconButton"
 import { ToggleIconButton } from "./ToggleIconButton"
@@ -24,6 +25,7 @@ type TableHeaderCellProps = {
   isPinnedLeft?: boolean
   loading?: boolean
   sortIcon?: string | string[]
+  table?: Table<GenericObject>
 } & GlobalProps
 
 export const TableHeaderCell = ({
@@ -35,9 +37,13 @@ export const TableHeaderCell = ({
   isPinnedLeft = false,
   loading,
   sortIcon,
+  table
 }: TableHeaderCellProps) => {
-  const { sortControl, responsive } = useContext(AdvancedTableContext)
+  const { sortControl, responsive, selectableRows, hasAnySubRows, showActionsBar } =
+    useContext(AdvancedTableContext);
 
+  type justifyTypes = "none" | "center" | "start" | "end" | "between" | "around" | "evenly"
+  
   const toggleSortButton = (event: React.SyntheticEvent) => {
     if (sortControl) {
       const sortIsDesc = header?.column.getIsSorted() === "desc"
@@ -59,6 +65,7 @@ export const TableHeaderCell = ({
  
 const cellClassName = classnames(
   "table-header-cells",
+  `${showActionsBar && "header-cells-with-actions"}`,
   `${isChrome() ? "chrome-styles" : ""}`,
   `${enableSorting ? "table-header-cells-active" : ""}`,
   { "pinned-left": responsive === "scroll" && isPinnedLeft },
@@ -82,8 +89,14 @@ const isToggleExpansionEnabled =
   (enableToggleExpansion === "all" || "header") &&
   enableToggleExpansion !== "none"
 
-const justifyHeader = isLeafColumn ? "end" : "center"
+  let justifyHeader:justifyTypes;
 
+  if (header?.index === 0 && hasAnySubRows) {
+    justifyHeader = enableSorting ? "between" : "start";
+  } else {
+    justifyHeader = isLeafColumn ? "end" : "center";
+  }
+  
   return (
     <th
         align="right"
@@ -102,9 +115,18 @@ const justifyHeader = isLeafColumn ? "end" : "center"
       ) : (
         <Flex
             alignItems="center"
-            justify={header?.index === 0 && enableSorting ? "between" : header?.index === 0 && !enableSorting ? "start" : justifyHeader}
+            justify={justifyHeader}
         >
-          {isToggleExpansionEnabled && (
+          {
+            selectableRows && header?.index === 0 && hasAnySubRows && (
+              <Checkbox
+                  checked={table?.getIsAllRowsSelected()}
+                  indeterminate={table?.getIsSomeRowsSelected()}
+                  onChange={table?.getToggleAllRowsSelectedHandler()}
+              />
+            )
+          }
+          {isToggleExpansionEnabled && hasAnySubRows && (
               <ToggleIconButton onClick={handleExpandOrCollapse} />
             )}
 

data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx

@@ -9,6 +9,7 @@ import { globalProps } from "../../utilities/globalProps"
 import { isChrome } from "../Utilities/BrowserCheck"
 
 import LoadingInline from "../../pb_loading_inline/_loading_inline"
+import Checkbox from "../../pb_checkbox/_checkbox"
 
 import { SubRowHeaderRow } from "../Components/SubRowHeaderRow"
 import { LoadingCell } from "../Components/LoadingCell"
@@ -42,6 +43,8 @@ export const TableBody = ({
     loading,
     responsive,
     table,
+    selectableRows,
+    hasAnySubRows
   } = useContext(AdvancedTableContext)
 
   const classes = classnames(
@@ -65,7 +68,7 @@ export const TableBody = ({
           const numberOfColumns = table.getAllFlatColumns().length
           const isDataLoading = isExpandable && (inlineRowLoading && rowHasNoChildren) && (row.depth < columnDefinitions[0].cellAccessors?.length)
           const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren))
-
+          const rowColor = row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white"
           return (
             <React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
               {isFirstChildofSubrow && subRowHeaders && (
@@ -79,11 +82,23 @@ export const TableBody = ({
                 />
               )}
             <tr
-                className={`${rowBackground ? "bg-silver" : "bg-white"} ${
+                className={`${rowColor} ${
                   row.depth > 0 ? `depth-sub-row-${row.depth}` : ""
               }`}
                 id={`${row.index}-${row.id}-${row.depth}-row`}
             >
+              {/* Render custom checkbox column when we want selectableRows for non-expanding tables */}
+              {selectableRows && !hasAnySubRows && (
+                  <td className="checkbox-cell">
+                    <Checkbox
+                        checked={row.getIsSelected()}
+                        disabled={!row.getCanSelect()}
+                        indeterminate={row.getIsSomeSelected()}
+                        name={row.id}
+                        onChange={row.getToggleSelectedHandler()}
+                    />
+                  </td>
+                )}
               {row.getVisibleCells().map((cell, i) => {
                 const isPinnedLeft = columnPinning.left.includes(cell.column.id)
                 const isLastCell = cell.column.parent?.columns.at(-1)?.id === cell.column.id

data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx

@@ -7,8 +7,10 @@ import { GenericObject } from "../../types"
 import { buildCss } from "../../utilities/props"
 import { globalProps } from "../../utilities/globalProps"
 
-import { TableHeaderCell } from "../Components/TableHeaderCell"
+import Checkbox from "../../pb_checkbox/_checkbox"
 
+import { TableHeaderCell } from "../Components/TableHeaderCell"
+import { isChrome } from "../Utilities/BrowserCheck"
 import AdvancedTableContext from "../Context/AdvancedTableContext"
 
 type TableHeaderProps = {
@@ -34,6 +36,10 @@ export const TableHeader = ({
     handleExpandOrCollapse,
     loading,
     table,
+    hasAnySubRows,
+    showActionsBar,
+    selectableRows,
+    responsive
   } = useContext(AdvancedTableContext)
 
   const classes = classnames(
@@ -44,6 +50,12 @@ export const TableHeader = ({
 
   const columnPinning = table.getState().columnPinning;
 
+  const customCellClassnames = classnames(
+    "table-header-cells-custom",
+    `${showActionsBar && "header-cells-with-actions"}`,
+    `${isChrome() ? "chrome-styles" : ""}`,
+    `${responsive === "scroll" && "pinned-left"}`,
+  );
   return (
     <>
       <thead className={classes}
@@ -52,6 +64,15 @@ export const TableHeader = ({
         {/* Get the header groups (only one in this example) */}
         {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>) => (
           <tr key={`${headerGroup.id}-headerGroup`}>
+            {!hasAnySubRows && selectableRows && (
+              <th className={customCellClassnames}>
+                <Checkbox
+                    checked={table?.getIsAllRowsSelected()}
+                    indeterminate={table?.getIsSomeRowsSelected()}
+                    onChange={table?.getToggleAllRowsSelectedHandler()}
+                />
+              </th>
+            )}
             {headerGroup.headers.map(header => {
               const isPinnedLeft = columnPinning.left.includes(header.id)
               return (
@@ -65,6 +86,7 @@ export const TableHeader = ({
                     key={`${header.id}-header`}
                     loading={loading}
                     sortIcon={sortIcon}
+                    table={table}
                 />
               )
             })}

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -23,10 +23,20 @@
     background-color: $white;
   }
 
+  .bg-row-selection {
+    background-color: $info_subtle;
+  }
+
   .full-width {
     width: 100%;
   }
 
+  .row-selection-actions-card {
+    border-bottom-right-radius: 0px !important;
+    border-bottom-left-radius: 0px !important;
+    border-bottom-color: transparent;
+  }
+
   .table-header-cells:first-child {
     min-width: 180px;
   }
@@ -47,6 +57,16 @@
     th[colspan]:not([colspan="1"]) {
       border-right: 1px solid $border_light !important;
     }
+    .table-header-cells-custom {
+      text-align:center;
+      [class^=pb_checkbox_kit] .pb_checkbox_label {
+        padding-left: 0px;
+      }
+    }
+    .header-cells-with-actions {
+      border-top-left-radius: 0px !important;
+      border-top-right-radius: 0px !important;
+    }
   }
 
   .pb_advanced_table_body {
@@ -59,6 +79,14 @@
     tr .pb_table_td:last-child {
       padding-right: 8px !important;
     }
+
+    .checkbox-cell {
+      display: flex;
+      justify-content: center;
+      [class^=pb_checkbox_kit] .pb_checkbox_label {
+        padding-left: 0px;
+      }
+    }
   }
 
 
@@ -116,6 +144,7 @@
 
   // Vertical separator
   .table-header-cells:first-child,
+  .table-header-cells-custom:first-child,
   td:first-child,
   .pb_table_td:first-child {
     box-shadow: 1px 0px 0px 0px $border_light !important;

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -12,12 +12,17 @@ import {
   Row,
   useReactTable,
   Getter,
+  RowSelectionState
 } from "@tanstack/react-table"
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props"
 import { globalProps, GlobalProps } from "../utilities/globalProps"
 
 import Table from "../pb_table/_table"
+import Card from "../pb_card/_card"
+import Caption from "../pb_caption/_caption"
+import Flex from "../pb_flex/_flex"
+import FlexItem from "../pb_flex/_flex_item"
 
 import AdvancedTableContext from "./Context/AdvancedTableContext"
 
@@ -30,6 +35,7 @@ import Pagination from "../pb_pagination/_pagination"
 
 type AdvancedTableProps = {
   aria?: { [key: string]: string }
+  actions?: React.ReactNode[] | React.ReactNode
   children?: React.ReactNode | React.ReactNode[]
   className?: string
   columnDefinitions: GenericObject[]
@@ -47,16 +53,20 @@ type AdvancedTableProps = {
   pagination?: boolean,
   paginationProps?: GenericObject
   responsive?: "scroll" | "none",
+  selectableRows?: boolean,
+  showActionsBar?: boolean,
   sortControl?: GenericObject
   tableData: GenericObject[]
   tableOptions?: GenericObject
   tableProps?: GenericObject
   toggleExpansionIcon?: string | string[]
+  onRowSelectionChange?: (arg: RowSelectionState) => void
 } & GlobalProps
 
 const AdvancedTable = (props: AdvancedTableProps) => {
   const {
     aria = {},
+    actions,
     children,
     className,
     columnDefinitions,
@@ -74,11 +84,14 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     pagination = false,
     paginationProps,
     responsive = "scroll",
+    showActionsBar = true,
+    selectableRows,
     sortControl,
     tableData,
     tableOptions,
     tableProps,
     toggleExpansionIcon = "arrows-from-line",
+    onRowSelectionChange,
   } = props
 
   const [loadingStateRowCount, setLoadingStateRowCount] = useState(
@@ -96,6 +109,9 @@ const AdvancedTable = (props: AdvancedTableProps) => {
 
   const columnHelper = createColumnHelper()
 
+  //Row Selection
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+
   //Create cells for columns, with customization for first column
   const createCellFunction = (cellAccessors: string[], customRenderer?: (row: Row<GenericObject>, value: any) => JSX.Element, index?: number) => {
     const columnCells = ({
@@ -116,6 +132,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
                     getValue={getValue}
                     onRowToggleClick={onRowToggleClick}
                     row={row}
+                    selectableRows={selectableRows}
                 />
           )
         }
@@ -128,6 +145,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
                 customRenderer={customRenderer}
                 onRowToggleClick={onRowToggleClick}
                 row={row} 
+                selectableRows={selectableRows}
                 value={accessorValue} 
             />
           ) : (
@@ -189,9 +207,13 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     },
   ]
 
-  const expandAndSortState = () => {
-    if (sortControl) {
+  const customState = () => {
+    if (sortControl && selectableRows) {
+      return { state: { expanded, sorting, rowSelection } }
+    } else if (sortControl) {
       return { state: { expanded, sorting } }
+    } else if (selectableRows) {
+      return { state: { expanded, rowSelection } }
     } else {
       return { state: { expanded } }
     }
@@ -219,13 +241,24 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     getSortedRowModel: getSortedRowModel(),
     enableSortingRemoval: false,
     sortDescFirst: true,
-    ...expandAndSortState(),
-    ... paginationInitializer,
+    onRowSelectionChange: setRowSelection,
+    getRowId: selectableRows ? row => row.id : undefined,
+    ...customState(),
+    ...paginationInitializer,
     ...tableOptions,
   })
 
   const tableRows = table.getRowModel()
 
+  const hasAnySubRows = tableRows.rows.some(row => row.subRows && row.subRows.length > 0);
+  const selectedRowsLength = Object.keys(table.getState().rowSelection).length
+
+  useEffect(() => {
+    if (onRowSelectionChange) {
+      onRowSelectionChange(table.getState().rowSelection)
+    }
+  } , [table.getState().rowSelection, onRowSelectionChange])
+
   // Set table row count for loading state
   const updateLoadingStateRowCount = useCallback(() => {
     const rowsCount = table.getRowModel().rows.length
@@ -284,6 +317,9 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             sortControl,
             table,
             toggleExpansionIcon,
+            showActionsBar,
+            selectableRows,
+            hasAnySubRows
           }}
       >
         <>
@@ -297,6 +333,27 @@ const AdvancedTable = (props: AdvancedTableProps) => {
                   total={table.getPageCount()}
                   />
           }
+          {
+            selectableRows && showActionsBar && (
+              <Card className="row-selection-actions-card"
+                  padding="xs"
+              >
+                <Flex alignItems="center"
+                    justify="between"
+                >
+                    <Caption color="light"
+                        paddingLeft="xs"
+                        size="xs"
+                    >
+                      {selectedRowsLength} Selected
+                    </Caption>
+                    <FlexItem>
+                    {actions}
+                    </FlexItem>
+                </Flex>
+              </Card>
+            )
+          }
           <Table
               className={`${loading ? "content-loading" : ""}`}
               dark={dark}

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb

@@ -1,5 +1,5 @@
 <%= pb_content_tag do %>
-        <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark }) do %>
+        <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark }.merge(object.table_props)) do %>
           <% if content.present? %>
             <% content.presence %>
           <% else %>

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb

@@ -13,6 +13,8 @@ module Playbook
       prop :responsive, type: Playbook::Props::Enum,
                         values: %w[none scroll],
                         default: "none"
+      prop :table_props, type: Playbook::Props::HashProp,
+                         default: {}
 
       def classname
         generate_classname("pb_advanced_table", responsive_classname, separator: " ")

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_no_subrows.jsx

@@ -0,0 +1,50 @@
+import React from "react"
+import { AdvancedTable } from "playbook-ui"
+import MOCK_DATA from "./advanced_table_mock_data_no_subrows.json"
+
+const AdvancedTableNoSubrows = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          enableToggleExpansion="all"
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableNoSubrows

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination.jsx

@@ -40,6 +40,7 @@ const AdvancedTablePagination = (props) => {
       <AdvancedTable
           columnDefinitions={columnDefinitions}
           pagination
+          responsive="none"
           tableData={PAGINATION_MOCK_DATA}
           {...props}
       />

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.jsx

@@ -47,6 +47,7 @@ const AdvancedTablePaginationWithProps = (props) => {
           columnDefinitions={columnDefinitions}
           pagination
           paginationProps={paginationProps}
+          responsive="none"
           tableData={PAGINATION_MOCK_DATA}
           {...props}
       />

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows.jsx

@@ -0,0 +1,60 @@
+import React from "react"
+import { AdvancedTable } from "playbook-ui"
+import MOCK_DATA from "./advanced_table_mock_data_with_id.json"
+
+const AdvancedTableSelectableRows = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+
+  //Render the subRow header rows
+  const subRowHeaders = ["Quarter", "Month", "Day"]
+
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          enableToggleExpansion="all"
+          onRowSelectionChange={(selectedRows) => console.log(selectedRows)}
+          selectableRows
+          tableData={MOCK_DATA}
+          
+          {...props}
+      >
+        <AdvancedTable.Header />
+        <AdvancedTable.Body subRowHeaders={subRowHeaders}/>
+      </AdvancedTable>
+    </div>
+  )
+}
+
+export default AdvancedTableSelectableRows

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows.md

@@ -0,0 +1,5 @@
+`selectableRows` is a boolean prop that if present will add checkboxes to all rows that will allow for selecting rows. 
+
+When a parent row is clicked, it will check all nested children rows, Children rows can be manually checked or unchecked as well. 
+
+The `onRowSelectionChange` prop returns an array of ids of all Rows that have been selected. Open the console on this example and check and uncheck checkboxes to see this is action! __NOTE__: Each object within the `tableData`Array must contain a unique id in order to attach an id to all Rows for this to function.