playbook_ui 16.11.0.pre.alpha.testkey2 → 16.11.0.pre.alpha.typeaheadsmartreset17862

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (151) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +2 -7
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx +1 -3
  4. data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts +3 -6
  5. data/app/pb_kits/playbook/pb_advanced_table/Utilities/CellRendererUtils.tsx +1 -6
  6. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +1 -4
  7. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +1 -1
  8. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb +0 -2
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.md +8 -5
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.html.erb +0 -1
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.md +3 -6
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_width.md +6 -6
  13. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_rails.html.erb +5 -5
  14. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_rails.md +3 -3
  15. data/app/pb_kits/playbook/pb_advanced_table/docs/_playground.json +1 -4
  16. data/app/pb_kits/playbook/pb_advanced_table/docs/_playground.overrides.json +1 -1
  17. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -8
  18. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +0 -2
  19. data/app/pb_kits/playbook/pb_advanced_table/index.js +11 -28
  20. data/app/pb_kits/playbook/pb_advanced_table/kit.schema.json +2 -12
  21. data/app/pb_kits/playbook/pb_advanced_table/table_body.html.erb +5 -17
  22. data/app/pb_kits/playbook/pb_advanced_table/table_body.rb +18 -57
  23. data/app/pb_kits/playbook/pb_advanced_table/table_header.rb +3 -15
  24. data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +2 -2
  25. data/app/pb_kits/playbook/pb_advanced_table/table_row.rb +2 -21
  26. data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.rb +0 -4
  27. data/app/pb_kits/playbook/pb_avatar/docs/_playground.json +0 -1
  28. data/app/pb_kits/playbook/pb_avatar/kit.schema.json +2 -4
  29. data/app/pb_kits/playbook/pb_background/kit.schema.json +3 -3
  30. data/app/pb_kits/playbook/pb_card/docs/_playground.json +0 -1
  31. data/app/pb_kits/playbook/pb_card/kit.schema.json +3 -5
  32. data/app/pb_kits/playbook/pb_currency/docs/_playground.json +0 -1
  33. data/app/pb_kits/playbook/pb_currency/kit.schema.json +2 -4
  34. data/app/pb_kits/playbook/pb_date_picker/docs/_playground.json +0 -1
  35. data/app/pb_kits/playbook/pb_date_picker/kit.schema.json +2 -18
  36. data/app/pb_kits/playbook/pb_date_range_inline/docs/_playground.json +0 -1
  37. data/app/pb_kits/playbook/pb_date_range_inline/kit.schema.json +2 -4
  38. data/app/pb_kits/playbook/pb_date_range_stacked/docs/_playground.json +1 -3
  39. data/app/pb_kits/playbook/pb_date_range_stacked/kit.schema.json +2 -4
  40. data/app/pb_kits/playbook/pb_date_stacked/docs/_playground.json +0 -1
  41. data/app/pb_kits/playbook/pb_date_stacked/kit.schema.json +2 -4
  42. data/app/pb_kits/playbook/pb_date_time/kit.schema.json +0 -7
  43. data/app/pb_kits/playbook/pb_date_time_stacked/docs/_playground.json +0 -1
  44. data/app/pb_kits/playbook/pb_date_time_stacked/kit.schema.json +2 -4
  45. data/app/pb_kits/playbook/pb_date_year_stacked/docs/_playground.json +1 -2
  46. data/app/pb_kits/playbook/pb_date_year_stacked/kit.schema.json +2 -4
  47. data/app/pb_kits/playbook/pb_distribution_bar/distribution_bar.html.erb +1 -8
  48. data/app/pb_kits/playbook/pb_distribution_bar/distribution_bar.rb +6 -3
  49. data/app/pb_kits/playbook/pb_docs/kit_example.html.erb +14 -7
  50. data/app/pb_kits/playbook/pb_docs/kit_example.rb +17 -2
  51. data/app/pb_kits/playbook/pb_filter/docs/_playground.json +1 -1
  52. data/app/pb_kits/playbook/pb_filter/kit.schema.json +3 -6
  53. data/app/pb_kits/playbook/pb_flex/kit.schema.json +3 -6
  54. data/app/pb_kits/playbook/pb_home_address_street/docs/_playground.json +0 -1
  55. data/app/pb_kits/playbook/pb_home_address_street/kit.schema.json +2 -4
  56. data/app/pb_kits/playbook/pb_icon/docs/_playground.json +0 -1
  57. data/app/pb_kits/playbook/pb_icon/kit.schema.json +5 -18
  58. data/app/pb_kits/playbook/pb_icon_circle/kit.schema.json +4 -12
  59. data/app/pb_kits/playbook/pb_icon_stat_value/kit.schema.json +3 -3
  60. data/app/pb_kits/playbook/pb_layout/docs/_playground.json +0 -1
  61. data/app/pb_kits/playbook/pb_layout/kit.schema.json +2 -4
  62. data/app/pb_kits/playbook/pb_list/docs/_playground.json +0 -1
  63. data/app/pb_kits/playbook/pb_list/kit.schema.json +2 -4
  64. data/app/pb_kits/playbook/pb_loading_inline/docs/_playground.json +0 -1
  65. data/app/pb_kits/playbook/pb_loading_inline/kit.schema.json +2 -4
  66. data/app/pb_kits/playbook/pb_map/docs/_playground.json +0 -7
  67. data/app/pb_kits/playbook/pb_map/docs/_playground.overrides.json +0 -5
  68. data/app/pb_kits/playbook/pb_message/kit.schema.json +1 -1
  69. data/app/pb_kits/playbook/pb_multi_level_select/docs/_playground.json +0 -1
  70. data/app/pb_kits/playbook/pb_multi_level_select/kit.schema.json +1 -2
  71. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_playground.json +0 -9
  72. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_playground.overrides.json +0 -6
  73. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_playground.json +0 -9
  74. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_playground.overrides.json +0 -6
  75. data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_playground.json +0 -9
  76. data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_playground.overrides.json +0 -6
  77. data/app/pb_kits/playbook/pb_pb_line_graph/docs/_playground.json +0 -9
  78. data/app/pb_kits/playbook/pb_pb_line_graph/docs/_playground.overrides.json +0 -6
  79. data/app/pb_kits/playbook/pb_phone_number_input/docs/_playground.json +0 -1
  80. data/app/pb_kits/playbook/pb_phone_number_input/kit.schema.json +2 -4
  81. data/app/pb_kits/playbook/pb_pill/_pill.scss +4 -25
  82. data/app/pb_kits/playbook/pb_pill/_pill.tsx +1 -3
  83. data/app/pb_kits/playbook/pb_pill/docs/_playground.json +0 -11
  84. data/app/pb_kits/playbook/pb_pill/docs/_playground.overrides.json +1 -11
  85. data/app/pb_kits/playbook/pb_pill/docs/example.yml +0 -2
  86. data/app/pb_kits/playbook/pb_pill/docs/index.js +0 -1
  87. data/app/pb_kits/playbook/pb_pill/kit.schema.json +2 -13
  88. data/app/pb_kits/playbook/pb_pill/pill.rb +1 -4
  89. data/app/pb_kits/playbook/pb_popover/kit.schema.json +2 -54
  90. data/app/pb_kits/playbook/pb_progress_simple/docs/_playground.json +2 -2
  91. data/app/pb_kits/playbook/pb_progress_simple/kit.schema.json +2 -4
  92. data/app/pb_kits/playbook/pb_progress_step/kit.schema.json +2 -2
  93. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_playground.json +0 -11
  94. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_playground.overrides.json +0 -11
  95. data/app/pb_kits/playbook/pb_section_separator/docs/_playground.json +0 -1
  96. data/app/pb_kits/playbook/pb_section_separator/kit.schema.json +2 -4
  97. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_playground.json +4 -5
  98. data/app/pb_kits/playbook/pb_skeleton_loading/kit.schema.json +14 -43
  99. data/app/pb_kits/playbook/pb_time_picker/docs/_playground.json +0 -1
  100. data/app/pb_kits/playbook/pb_time_picker/kit.schema.json +2 -4
  101. data/app/pb_kits/playbook/pb_time_range_inline/docs/_playground.json +0 -1
  102. data/app/pb_kits/playbook/pb_time_range_inline/kit.schema.json +2 -4
  103. data/app/pb_kits/playbook/pb_timeline/kit.schema.json +1 -1
  104. data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx +5 -7
  105. data/app/pb_kits/playbook/pb_timestamp/docs/_playground.json +0 -1
  106. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.html.erb +0 -15
  107. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.jsx +0 -19
  108. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.md +1 -3
  109. data/app/pb_kits/playbook/pb_timestamp/kit.schema.json +2 -4
  110. data/app/pb_kits/playbook/pb_timestamp/timestamp.test.js +0 -44
  111. data/app/pb_kits/playbook/pb_tooltip/kit.schema.json +7 -21
  112. data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx +1 -87
  113. data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +6 -23
  114. data/app/pb_kits/playbook/pb_typeahead/components/IndicatorsContainer.tsx +2 -9
  115. data/app/pb_kits/playbook/pb_typeahead/docs/_playground.json +0 -2
  116. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md +2 -2
  117. data/app/pb_kits/playbook/pb_typeahead/kit.schema.json +33 -36
  118. data/app/pb_kits/playbook/utilities/global-props.schema.json +1 -318
  119. data/dist/chunks/{_pb_line_graph-xWHipZZB.js → _pb_line_graph-Gn_9RYbf.js} +1 -1
  120. data/dist/chunks/_typeahead-C_5E8NyA.js +5 -0
  121. data/dist/chunks/{globalProps-Bf9KbYid.js → globalProps-CVEUyQe6.js} +1 -1
  122. data/dist/chunks/{lib-DYWDQgCv.js → lib-CYrXqTdQ.js} +2 -2
  123. data/dist/chunks/vendor.js +4 -4
  124. data/dist/menu.yml +13 -4
  125. data/dist/playbook-rails-react-bindings.js +1 -1
  126. data/dist/playbook-rails.js +1 -1
  127. data/dist/playbook.css +1 -1
  128. data/lib/playbook/pb_doc_helper.rb +2 -0
  129. data/lib/playbook/version.rb +1 -1
  130. metadata +6 -26
  131. data/app/pb_kits/playbook/pb_advanced_table/column_layout_helper.rb +0 -76
  132. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_width_rails.html.erb +0 -41
  133. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_width_rails.md +0 -49
  134. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_full_width_cell.jsx +0 -69
  135. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_full_width_cell.md +0 -3
  136. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_full_width_cell_rails.html.erb +0 -49
  137. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_full_width_cell_rails.md +0 -3
  138. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_both_rails.html.erb +0 -57
  139. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_both_rails.md +0 -1
  140. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_bottom_rails.html.erb +0 -57
  141. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_bottom_rails.md +0 -1
  142. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_skipping_subrow_headers.html.erb +0 -40
  143. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_skipping_subrow_headers.jsx +0 -55
  144. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_skipping_subrow_headers_rails.md +0 -1
  145. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_skipping_subrow_headers_react.md +0 -1
  146. data/app/pb_kits/playbook/pb_pill/_pill.test.jsx +0 -83
  147. data/app/pb_kits/playbook/pb_pill/docs/_pill_size.html.erb +0 -1
  148. data/app/pb_kits/playbook/pb_pill/docs/_pill_size.jsx +0 -16
  149. data/app/pb_kits/playbook/pb_pill/docs/_pill_size.md +0 -1
  150. data/app/pb_kits/playbook/pb_timestamp/activeSupportTimeZones.ts +0 -165
  151. data/dist/chunks/_typeahead-6Dx7GOMe.js +0 -5
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 5be7074eafcfa061ab5694dac4c388d5e1c52706b70c0a770f1e8a3f0c10bfa0
4
- data.tar.gz: 62d659f54e4b4754c8ca4dc4ea0d3152dce8602f4e43b9a576c5c13dbfe34875
3
+ metadata.gz: a98c490059e92349039253ac160b379acc8a126ff167f546765e65094fa40239
4
+ data.tar.gz: a63c9306be380a982826eab1ac1bbcee5f9450c0948fd8d93653079f59b9218d
5
5
  SHA512:
6
- metadata.gz: ccf3727bacb1d58f73a28d4206404d7bc5a2adc2c8a4927bd2e866f4fd33f01b218c578e53f4e63f3ee90876b3a6a4b56b3e8490d9e54feed7a40785dee00e20
7
- data.tar.gz: 4693efa3e4eb76363123453f2d0de8eafc31323e35f838c2bb17cd8a7a0b31316ec5fe17b1d63cb9959de67d5b4e7cbe35302200654c8bb26ccc00e5eff04e60
6
+ metadata.gz: 9c175c28a3ff722dd73a6c08598ca4a4c2544371ccf9c3c14ff603312a7e7498dd9007592172a0397301869ead003bbe7d27a0dd552dd567e211db6e92e0566e
7
+ data.tar.gz: 07e1466200a3f6efe349b2ba12d5e085c1124711cf51311dcd64157d2e78736a843b7755964f705dd321519de53442d901a76de9af44c14e39e788976dcf0166
@@ -21,7 +21,6 @@ interface CustomCellProps {
21
21
  customRenderer?: (row: Row<GenericObject>, value: string | undefined) => React.ReactNode
22
22
  selectableRows?: boolean
23
23
  customStyle?: GenericObject
24
- fullWidthCell?: boolean
25
24
  }
26
25
 
27
26
  export const CustomCell = ({
@@ -32,7 +31,6 @@ export const CustomCell = ({
32
31
  customRenderer,
33
32
  selectableRows,
34
33
  customStyle = {},
35
- fullWidthCell,
36
34
  }: CustomCellProps & GlobalProps) => {
37
35
  const { setExpanded, expanded, expandedControl, inlineRowLoading, hasAnySubRows, cascadeCollapse } = useContext(AdvancedTableContext);
38
36
 
@@ -60,7 +58,7 @@ export const CustomCell = ({
60
58
  const renderButton = inlineRowLoading ? RowHasChildren : row.getCanExpand()
61
59
 
62
60
  return (
63
- <div style={{ paddingLeft: `${row.depth * 1.25}em`, ...(fullWidthCell ? { width: "100%" } : {}) }}>
61
+ <div style={{ paddingLeft: `${row.depth * 1.25}em`}}>
64
62
  <Flex
65
63
  alignItems="center"
66
64
  columnGap="xs"
@@ -96,10 +94,7 @@ export const CustomCell = ({
96
94
  )}
97
95
  </button>
98
96
  ) : null}
99
- <FlexItem
100
- paddingLeft={renderButton? "none" : "xs"}
101
- width={fullWidthCell ? "100%" : undefined}
102
- >
97
+ <FlexItem paddingLeft={renderButton? "none" : "xs"}>
103
98
  {row.depth === 0 ? (
104
99
  customRenderer ? customRenderer(row, getValue()) : getValue()
105
100
  ) :(
@@ -213,8 +213,6 @@ export const RegularTableView = ({
213
213
  ))}
214
214
  {totalRows.map((row: Row<GenericObject>, rowIndex: number) => {
215
215
  const isFirstChildofSubrow = row.depth > 0 && row.index === 0;
216
- const subRowHeaderText = subRowHeaders?.[row.depth - 1]?.trim();
217
- const shouldRenderSubRowHeader = isFirstChildofSubrow && !!subRowHeaderText;
218
216
  const numberOfColumns = table.getAllFlatColumns().length;
219
217
  const isFirstRegularRow = rowIndex === 0 && !row.getIsPinned();
220
218
  const customRowStyle = getRowStyle(rowStyling, row);
@@ -225,7 +223,7 @@ export const RegularTableView = ({
225
223
 
226
224
  return (
227
225
  <React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
228
- {shouldRenderSubRowHeader && (
226
+ {isFirstChildofSubrow && subRowHeaders && (
229
227
  <SubRowHeaderRow
230
228
  collapsibleTrail={collapsibleTrail}
231
229
  enableToggleExpansion={enableToggleExpansion}
@@ -42,7 +42,6 @@ interface UseTableStateProps {
42
42
  rowStyling?: GenericObject[];
43
43
  inlineRowLoading?: boolean;
44
44
  sortParentOnly?: boolean;
45
- fullWidthCell?: boolean;
46
45
  }
47
46
 
48
47
  export function useTableState({
@@ -63,8 +62,7 @@ export function useTableState({
63
62
  pinnedRows,
64
63
  rowStyling,
65
64
  inlineRowLoading = false,
66
- sortParentOnly = false,
67
- fullWidthCell = false,
65
+ sortParentOnly = false
68
66
  }: UseTableStateProps) {
69
67
 
70
68
  // Create a local state for expanded and setExpanded if expandedControl not used
@@ -147,14 +145,13 @@ export function useTableState({
147
145
  isFirstColumn,
148
146
  onRowToggleClick,
149
147
  selectableRows,
150
- rowStyling,
151
- fullWidthCell
148
+ rowStyling
152
149
  );
153
150
  }
154
151
 
155
152
  return columnStructure;
156
153
  }) || [];
157
- }, [columnHelper, onRowToggleClick, rowStyling, selectableRows, fullWidthCell]);
154
+ }, [columnHelper, onRowToggleClick, rowStyling, selectableRows]);
158
155
 
159
156
  const columns = useMemo(() => buildColumns(columnDefinitions), [buildColumns, columnDefinitions]);
160
157
 
@@ -12,8 +12,6 @@ import { getRowStyle } from "./RowUtils";
12
12
  * @param isFirstColumn Whether this is the first column (special handling)
13
13
  * @param onRowToggleClick Optional callback for row toggle
14
14
  * @param selectableRows Whether rows are selectable
15
- * @param rowStyling Optional row styling configuration
16
- * @param fullWidthCell Whether first-column cell content should take full width
17
15
  */
18
16
  export const createCellFunction = (
19
17
  cellAccessors: string[],
@@ -21,8 +19,7 @@ export const createCellFunction = (
21
19
  isFirstColumn?: boolean,
22
20
  onRowToggleClick?: (row: Row<GenericObject>) => void,
23
21
  selectableRows?: boolean,
24
- rowStyling?: GenericObject[],
25
- fullWidthCell?: boolean
22
+ rowStyling?: GenericObject[]
26
23
  ) => {
27
24
  // Add display name to the returned function
28
25
  const cellRenderer = ({
@@ -42,7 +39,6 @@ export const createCellFunction = (
42
39
  <CustomCell
43
40
  customRenderer={customRenderer}
44
41
  customStyle={customStyle}
45
- fullWidthCell={fullWidthCell}
46
42
  getValue={getValue}
47
43
  onRowToggleClick={onRowToggleClick}
48
44
  row={row}
@@ -58,7 +54,6 @@ export const createCellFunction = (
58
54
  <CustomCell
59
55
  customRenderer={customRenderer}
60
56
  customStyle={customStyle}
61
- fullWidthCell={fullWidthCell}
62
57
  onRowToggleClick={onRowToggleClick}
63
58
  row={row}
64
59
  selectableRows={selectableRows}
@@ -36,7 +36,6 @@ type AdvancedTableProps = {
36
36
  expandedControl?: GenericObject
37
37
  expandByDepth?: GenericObject[]
38
38
  onExpandByDepthClick?: (arg: number, arg1: any) => void
39
- fullWidthCell?: boolean
40
39
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
41
40
  id?: string
42
41
  initialLoadingRowsCount?: number
@@ -99,7 +98,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
99
98
  expandedControl,
100
99
  expandByDepth,
101
100
  onExpandByDepthClick,
102
- fullWidthCell = false,
103
101
  htmlOptions = {},
104
102
  id,
105
103
  initialLoadingRowsCount = 10,
@@ -166,8 +164,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
166
164
  pinnedRows,
167
165
  rowStyling,
168
166
  inlineRowLoading,
169
- sortParentOnly,
170
- fullWidthCell,
167
+ sortParentOnly
171
168
  });
172
169
 
173
170
  // Initialize table actions
@@ -12,7 +12,7 @@
12
12
  <% content.presence %>
13
13
  <% else %>
14
14
  <%= pb_rails("advanced_table/table_header", props: { table_id: object.id, column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, show_actions_bar: object.show_actions_bar, inline_row_loading: object.inline_row_loading, persist_toggle_expansion_button: object.persist_toggle_expansion_button, table_data: object.table_data }) %>
15
- <%= pb_rails("advanced_table/table_body", props: { table_id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion, row_styling: object.row_styling, inline_row_loading: object.inline_row_loading, full_width_cell: object.full_width_cell, pinned_rows: object.pinned_rows }) %>
15
+ <%= pb_rails("advanced_table/table_body", props: { table_id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion, row_styling: object.row_styling, inline_row_loading: object.inline_row_loading, pinned_rows: object.pinned_rows }) %>
16
16
  <% end %>
17
17
  <% end %>
18
18
  <% end %>
@@ -35,8 +35,6 @@ module Playbook
35
35
  default: []
36
36
  prop :inline_row_loading, type: Playbook::Props::Boolean,
37
37
  default: false
38
- prop :full_width_cell, type: Playbook::Props::Boolean,
39
- default: false
40
38
  prop :persist_toggle_expansion_button, type: Playbook::Props::Boolean,
41
39
  default: false
42
40
  prop :pinned_rows, type: Playbook::Props::HashProp,
@@ -1,12 +1,15 @@
1
1
  The `columnStyling` prop is an optional item that can be used within `columnDefinitions` as shown in the code snippet below. It is an object that has several optional key/value pairs, this doc example highlights the following:
2
2
 
3
- 1. `headerAlignment`: This will allow you to control alignment of header content which is set to right aligned by default. you can set this to `left`, `right` or `center`.
4
- 2. `cellAlignment`: This will allow you to control alignment of content within all cells in the given column. This is set to right aligned by default. you can set this to `left`, `right` or `center`.
5
- 3. `fontColor`: This will allow you to control the font color for a given column.
6
- 4. Column width: optional keys on `columnStyling` are `minWidth`, `width`, and `maxWidth` (numbers = pixels; CSS strings allowed). This example sets `width` on Year for a fixed hierarchy column (see the width doc for `minWidth` and bands).
3
+ 1) `headerAlignment`: This will allow you to control alignment of header content which is set to right aligned by default. you can set this to `left`, `right` or `center`.
4
+
5
+ 2) `cellAlignment`: This will allow you to control alignment of content within all cells in the given column. This is set to right aligned by default. you can set this to `left`, `right` or `center`.
6
+
7
+ 3) `fontColor`: This will allow you to control the font color for a given column.
8
+
9
+ 4) Column width: optional keys on `columnStyling` are `minWidth`, `width`, and `maxWidth` (numbers = pixels; CSS strings allowed). This example sets `width` on Year for a fixed hierarchy column (see the width doc for `minWidth` and bands).
7
10
 
8
11
  Fixed width: pass `width` only (or TanStack `size` only) and Playbook sets min and max to the same value automatically — you do not need all three for an exact width.
9
12
 
10
- See [Column Styling: Width](https://playbook.powerapp.cloud/kits/advanced_table/styling/react#column-styling-width) for the full guide (Playbook ↔ TanStack mapping, floor-only vs bands, and when to use one vs three values).
13
+ See [Column Styling: Width](https://playbook.powerapp.cloud/kits/advanced_table/react#column-styling-width) for the full guide (Playbook ↔ TanStack mapping, floor-only vs bands, and when to use one vs three values).
11
14
 
12
15
  `columnStyling` can be used within the columnDefinition of all the columns or some of them, as shown. Each column has its own individual control in this way.
@@ -3,7 +3,6 @@
3
3
  accessor: "year",
4
4
  label: "Year",
5
5
  cellAccessors: ["quarter", "month", "day"],
6
- column_styling: { width: 124 },
7
6
  },
8
7
  {
9
8
  accessor: "newEnrollments",
@@ -1,12 +1,9 @@
1
1
  The `column_styling` prop is an optional item that can be used within `column_definitions` as shown in the code snippet below. It is an object that has several optional key/value pairs, this doc example highlights the following:
2
2
 
3
3
  1) `header_alignment`: This will allow you to control alignment of header content which is set to right aligned by default. you can set this to `left`, `right` or `center`.
4
- 2) `cell_alignment`: This will allow you to control alignment of content within all cells in the given column. This is set to right aligned by default. you can set this to `left`, `right` or `center`.
5
- 3) `font_color`: This will allow you to control the font color for a given column.
6
- 4) Column width: optional keys on `column_styling` are `min_width`, `width`, and `max_width` (numbers = pixels; CSS strings allowed). This example sets `width` on Year for a fixed hierarchy column (see the width doc for `min_width` and bands).
7
4
 
8
- Fixed width: pass `width` only and Playbook sets min and max to the same value automatically you do not need all three for an exact width.
5
+ 2) `cell_alignment`: This will allow you to control alignment of content within all cells in the given column. This is set to right aligned by default. you can set this to `left`, `right` or `center`.
9
6
 
10
- See [Column Styling: Width](https://playbook.powerapp.cloud/kits/advanced_table/styling/rails#column-styling-width) for the full guide (floor-only vs bands, and when to use one vs three values).
7
+ 3) `font_color`: This will allow you to control the font color for a given column.
11
8
 
12
- `column_styling` can be used within the column_definition of all the columns or some of them, as shown. Each column has its own individual control in this way.
9
+ `column_styling` can be used within the column_definition of all the columns or some of them, as shown. Each column has its own individual control in this way.
@@ -1,6 +1,6 @@
1
1
  AdvancedTable column width is controlled in two equivalent places on each leaf `columnDefinitions` entry. Playbook maps them to inline styles on header and body cells (and forwards numeric values into TanStack Table’s column model).
2
2
 
3
- **1)** Playbook `columnStyling` and TanStack `ColumnDef` use the same three ideas:
3
+ 1) Playbook `columnStyling` and TanStack `ColumnDef` use the same three ideas:
4
4
 
5
5
  - Preferred / target width: `columnStyling` `width` maps to TanStack `size` on the same column object.
6
6
  - Minimum width (floor): `columnStyling` `minWidth` maps to TanStack `minSize`.
@@ -10,7 +10,7 @@ Numbers are pixels. You can also pass CSS length strings on `columnStyling` (e.g
10
10
 
11
11
  If both APIs set the same axis, `columnStyling` wins for that axis when Playbook builds cell styles.
12
12
 
13
- **2)** Fixed width: set `width` only
13
+ 2) Fixed width: set `width` only
14
14
 
15
15
  If you pass only `width` (or only `size`) and do not set `minWidth` / `maxWidth` (or `minSize` / `maxSize`), Playbook treats that as a fixed column: it sets all three to the same value under the hood so you do not have to repeat yourself.
16
16
 
@@ -26,7 +26,7 @@ size: 200
26
26
 
27
27
  Use this when the column should stay one width (e.g. a hierarchy column with expand controls).
28
28
 
29
- **3)** Floor only: `minWidth` / `minSize`
29
+ 3) Floor only: `minWidth` / `minSize`
30
30
 
31
31
  Set only a minimum when the column may grow with the table or content but must not shrink below a baseline (common fix for horizontal “jump” when rows expand):
32
32
 
@@ -34,7 +34,7 @@ Set only a minimum when the column may grow with the table or content but must n
34
34
  columnStyling: { minWidth: 160 }
35
35
  ```
36
36
 
37
- **4)** Flexible band: min + preferred + max
37
+ 4) Flexible band: min + preferred + max
38
38
 
39
39
  Set two or three values when you want a range. CSS uses preferred `width` clamped between `minWidth` and `maxWidth`:
40
40
 
@@ -46,7 +46,7 @@ Example from the table below (Attendance): `minWidth: 108`, `width: 124`, `maxWi
46
46
 
47
47
  You only need all three when you want that band. If min and max are omitted, `width` alone is enough for a fixed column.
48
48
 
49
- **5)** TanStack band without `columnStyling`
49
+ 5) TanStack band without `columnStyling`
50
50
 
51
51
  The Meetings column uses only TanStack fields:
52
52
 
@@ -56,7 +56,7 @@ The Meetings column uses only TanStack fields:
56
56
 
57
57
  Playbook applies the same min / preferred / max idea to cell styles. Setting only `size: 200` would lock all three to 200, same as `width: 200` in `columnStyling`.
58
58
 
59
- **6)** What the example table shows
59
+ 6) What the example table shows
60
60
 
61
61
  - Year (fixed): `columnStyling: { width: 128 }` — locked to 128px.
62
62
  - Enrollments (floor): `columnStyling: { minWidth: 160 }` — at least 160px; can grow.
@@ -19,8 +19,8 @@
19
19
  label: "Year",
20
20
  cellAccessors: ["quarter", "month", "day"],
21
21
  sort_menu: [
22
- { item: "Year", link: "?sort=year_asc#pinned_rows_top_table", active: params["sort"] == "year_asc", direction: "asc" },
23
- { item: "Year", link: "?sort=year_desc#pinned_rows_top_table", active: params["sort"] == "year_desc", direction: "desc" }
22
+ { item: "Year", link: "?sort=year_asc#pinned_rows_table", active: params["sort"] == "year_asc", direction: "asc" },
23
+ { item: "Year", link: "?sort=year_desc#pinned_rows_table", active: params["sort"] == "year_desc", direction: "desc" }
24
24
  ],
25
25
  },
26
26
  {
@@ -51,7 +51,7 @@
51
51
 
52
52
  <% pinned_rows = { top: ["8"] } %>
53
53
 
54
- <%= pb_rails("advanced_table", props: { id: "pinned_rows_top_table", table_data: @table_data_with_id, column_definitions: column_definitions, max_height: "xs", pinned_rows: pinned_rows, responsive: "none", table_props: { sticky: true }}) do %>
55
- <%= pb_rails("advanced_table/table_header", props: { table_id: "pinned_rows_top_table", column_definitions: column_definitions }) %>
56
- <%= pb_rails("advanced_table/table_body", props: { table_id: "pinned_rows_top_table", table_data: @table_data_with_id, column_definitions: column_definitions, pinned_rows: pinned_rows }) %>
54
+ <%= pb_rails("advanced_table", props: { id: "pinned_rows_table", table_data: @table_data_with_id, column_definitions: column_definitions, max_height: "xs", pinned_rows: pinned_rows, responsive: "none", table_props: { sticky: true }}) do %>
55
+ <%= pb_rails("advanced_table/table_header", props: { table_id: "pinned_rows_table", column_definitions: column_definitions }) %>
56
+ <%= pb_rails("advanced_table/table_body", props: { table_id: "pinned_rows_table", table_data: @table_data_with_id, column_definitions: column_definitions, pinned_rows: pinned_rows }) %>
57
57
  <% end %>
@@ -1,7 +1,7 @@
1
- Use the `pinned_rows` prop to pin specific rows to the top or bottom of an Advanced Table. Pinned rows will remain at the top or bottom when scrolling through table data and will not change position if sorting is used.
1
+ Use the `pinned_rows` prop to pin specific rows to the top of an Advanced Table. Pinned rows will remain at the top when scrolling through table data and will not change position if sorting is used.
2
2
 
3
3
  **NOTE:**
4
4
  - Sticky header required: Pinned rows must be used with `sticky: true` via `table_props` (works with both responsive and non-responsive tables)
5
5
  - Row ids required: Each object within the `table_data` array must contain a unique `id` in order to attach an id to all Rows for this to function.
6
- - `pinned_rows` takes a hash with a `top` and/or `bottom` key containing an array of row ids, as shown in the code snippet below.
7
- - For expandable rows, use the parent id in `pinned_rows[:top]` or `pinned_rows[:bottom]`; all its children will automatically be pinned with it. If a child id is passed without the parent being pinned, nothing will be pinned.
6
+ - `pinned_rows` takes a hash with a `top` key containing an array of row ids, as shown in the code snippet below.
7
+ - For expandable rows, use the parent id in `pinned_rows[:top]`; all its children will automatically be pinned with it. If a child id is passed without the parent being pinned, nothing will be pinned.
@@ -9,10 +9,8 @@
9
9
  "defaults": {
10
10
  "columnGroupBorderColor": "none",
11
11
  "enableToggleExpansion": "header",
12
- "fullWidthCell": false,
13
12
  "inlineRowLoading": false,
14
13
  "loading": false,
15
- "maxHeight": "auto",
16
14
  "responsive": "scroll",
17
15
  "scrollBarNone": false,
18
16
  "selectableRows": false,
@@ -94,8 +92,7 @@
94
92
  "name": "Column Configuration",
95
93
  "props": [
96
94
  "columnVisibilityControl",
97
- "columnGroupBorderColor",
98
- "fullWidthCell"
95
+ "columnGroupBorderColor"
99
96
  ]
100
97
  },
101
98
  {
@@ -160,7 +160,7 @@
160
160
  },
161
161
  {
162
162
  "name": "Column Configuration",
163
- "props": ["columnVisibilityControl", "columnGroupBorderColor", "fullWidthCell"]
163
+ "props": ["columnVisibilityControl", "columnGroupBorderColor"]
164
164
  },
165
165
  {
166
166
  "name": "Table engine",
@@ -3,19 +3,15 @@ examples:
3
3
  - advanced_table_beta: Default (Required Props)
4
4
  - advanced_table_loading: Loading State
5
5
  - advanced_table_beta_subrow_headers: SubRow Headers
6
- - advanced_table_skipping_subrow_headers: Skipping Subrow Headers
7
6
  - advanced_table_enable_toggle_expansion_rails: Enable Toggle Expansion
8
7
  - advanced_table_collapsible_trail_rails: Collapsible Trail
9
8
  - advanced_table_table_props: Table Props
10
9
  - advanced_table_sticky_header_rails: Sticky Header
11
10
  - advanced_table_table_props_sticky_header: Sticky Header for Responsive Table
12
- - advanced_table_pinned_rows_rails: Pinned Rows (Top)
13
- - advanced_table_pinned_rows_bottom_rails: Pinned Rows (Bottom)
14
- - advanced_table_pinned_rows_both_rails: Pinned Rows (Both)
11
+ - advanced_table_pinned_rows_rails: Pinned Rows
15
12
  - advanced_table_beta_sort: Enable Sorting
16
13
  - advanced_table_responsive: Responsive Tables
17
14
  - advanced_table_custom_cell_rails: Custom Components for Cells
18
- - advanced_table_full_width_cell_rails: Full Width Cell
19
15
  - advanced_table_with_custom_header_rails: Custom Header Cell
20
16
  - advanced_table_with_custom_header_multi_header_rails: Custom Header with Multiple Headers
21
17
  - advanced_table_column_headers: Multi-Header Columns
@@ -30,7 +26,6 @@ examples:
30
26
  - advanced_table_row_styling: Row Styling
31
27
  - advanced_table_padding_control_per_row_rails: Padding Control using Row Styling
32
28
  - advanced_table_column_styling_rails: Column Styling
33
- - advanced_table_column_styling_width_rails: Column Styling Width
34
29
  - advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
35
30
  - advanced_table_padding_control_rails: Padding Control using Column Styling
36
31
  - advanced_table_background_control_rails: Column Styling Background Color
@@ -50,7 +45,6 @@ examples:
50
45
  - advanced_table_expanded_control: Expanded Control
51
46
  - advanced_table_expand_by_depth: Expand by Depth
52
47
  - advanced_table_subrow_headers: SubRow Headers
53
- - advanced_table_skipping_subrow_headers: Skipping Subrow Headers
54
48
  - advanced_table_cascade_collapse: Cascade Collapse
55
49
  - advanced_table_collapsible_trail: Collapsible Trail
56
50
  - advanced_table_table_options: Table Options
@@ -62,7 +56,6 @@ examples:
62
56
  - advanced_table_sticky_scroll_limitation: Sticky Header and Column Scroll Limitation
63
57
  - advanced_table_responsive: Responsive Tables
64
58
  - advanced_table_custom_cell: Custom Components for Cells
65
- - advanced_table_full_width_cell: Full Width Cell
66
59
  - advanced_table_with_custom_header: Custom Header Cell
67
60
  - advanced_table_with_custom_header_multi_header: Custom Header with Multiple Headers
68
61
  - advanced_table_pagination: Pagination
@@ -10,7 +10,6 @@ export { default as AdvancedTableTableProps } from './_advanced_table_table_prop
10
10
  export { default as AdvancedTableInlineRowLoading } from './_advanced_table_inline_row_loading.jsx'
11
11
  export { default as AdvancedTableResponsive } from './_advanced_table_responsive.jsx'
12
12
  export { default as AdvancedTableCustomCell } from './_advanced_table_custom_cell.jsx'
13
- export { default as AdvancedTableFullWidthCell } from './_advanced_table_full_width_cell.jsx'
14
13
  export { default as AdvancedTablePagination } from './_advanced_table_pagination.jsx'
15
14
  export { default as AdvancedTablePaginationWithProps } from './_advanced_table_pagination_with_props.jsx'
16
15
  export { default as AdvancedTableColumnHeaders } from './_advanced_table_column_headers.jsx'
@@ -54,6 +53,5 @@ export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advance
54
53
  export { default as AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'
55
54
  export { default as AdvancedTableCascadeCollapse } from './_advanced_table_cascade_collapse.jsx'
56
55
  export { default as AdvancedTableSortParentOnly } from './_advanced_table_sort_parent_only.jsx'
57
- export { default as AdvancedTableSkippingSubrowHeaders } from './_advanced_table_skipping_subrow_headers.jsx'
58
56
  export { default as AdvancedTablePinnedRowsBottom } from './_advanced_table_pinned_rows_bottom.jsx'
59
57
  export { default as AdvancedTablePinnedRowsBoth } from './_advanced_table_pinned_rows_both.jsx'
@@ -356,40 +356,23 @@ export default class PbAdvancedTable extends PbEnhancedElement {
356
356
  }
357
357
 
358
358
  /**
359
- * Recompute sticky top/bottom for visible pinned rows so collapsed rows don't leave a gap.
359
+ * Recompute sticky top for visible pinned rows so collapsed rows don't leave a gap.
360
360
  * Call after expand/collapse and on load.
361
361
  */
362
362
  static updatePinnedRowsStickyTops(advancedTableWrapper) {
363
- const headerOffset =
364
- "calc(var(--advanced-table-header-height, 44px) + var(--advanced-table-action-bar-height, 0px))";
365
-
366
- const pinnedTopTbody = advancedTableWrapper?.querySelector("tbody.pinned-rows-tbody");
367
- if (pinnedTopTbody) {
368
- const pinnedRows = Array.from(pinnedTopTbody.querySelectorAll("tr.pinned-row"));
369
- const visibleRows = pinnedRows.filter(
370
- (tr) => tr.style.display !== "none" && tr.offsetParent !== null
371
- );
372
-
373
- visibleRows.forEach((tr, index) => {
374
- tr.style.top = `calc(${headerOffset} + 2.5em * ${index})`;
375
- tr.style.bottom = "";
376
- });
377
- }
363
+ const pinnedTbody = advancedTableWrapper?.querySelector("tbody.pinned-rows-tbody");
364
+ if (!pinnedTbody) return;
378
365
 
379
- const pinnedBottomTbody = advancedTableWrapper?.querySelector(
380
- "tbody.pinned-rows-tbody-bottom"
366
+ const pinnedRows = Array.from(pinnedTbody.querySelectorAll("tr.pinned-row"));
367
+ const visibleRows = pinnedRows.filter(
368
+ (tr) => tr.style.display !== "none" && tr.offsetParent !== null
381
369
  );
382
- if (pinnedBottomTbody) {
383
- const pinnedRows = Array.from(pinnedBottomTbody.querySelectorAll("tr.pinned-row"));
384
- const visibleRows = pinnedRows.filter(
385
- (tr) => tr.style.display !== "none" && tr.offsetParent !== null
386
- );
387
370
 
388
- visibleRows.forEach((tr, index) => {
389
- tr.style.bottom = `calc(2.5em * ${visibleRows.length - 1 - index})`;
390
- tr.style.top = "";
391
- });
392
- }
371
+ const headerOffset =
372
+ "calc(var(--advanced-table-header-height, 44px) + var(--advanced-table-action-bar-height, 0px))";
373
+ visibleRows.forEach((tr, index) => {
374
+ tr.style.top = `calc(${headerOffset} + 2.5em * ${index})`;
375
+ });
393
376
  }
394
377
 
395
378
  hideCloseIcon() {
@@ -92,14 +92,6 @@
92
92
  "react"
93
93
  ]
94
94
  },
95
- "fullWidthCell": {
96
- "type": "boolean",
97
- "platforms": [
98
- "react",
99
- "rails"
100
- ],
101
- "default": false
102
- },
103
95
  "initialLoadingRowsCount": {
104
96
  "type": "number",
105
97
  "platforms": [
@@ -125,8 +117,7 @@
125
117
  "maxHeight": {
126
118
  "type": "enum",
127
119
  "platforms": [
128
- "react",
129
- "rails"
120
+ "react"
130
121
  ],
131
122
  "values": [
132
123
  "auto",
@@ -137,8 +128,7 @@
137
128
  "xl",
138
129
  "xxl",
139
130
  "xxxl"
140
- ],
141
- "default": "auto"
131
+ ]
142
132
  },
143
133
  "onRowToggleClick": {
144
134
  "type": "function",
@@ -1,12 +1,10 @@
1
1
  <% table_data = object.table_data || [] %>
2
2
  <% if object.has_pinned_rows? %>
3
- <% if object.has_pinned_top_rows? %>
4
- <%= pb_content_tag(:tbody, class: "pinned-rows-tbody") do %>
5
- <% next_index = 0 %>
6
- <% object.pinned_top_root_rows.each do |root_info| %>
7
- <% row_output, next_index = object.render_row_and_children(root_info[:row], object.column_definitions, root_info[:depth], root_info[:depth] > 0, root_info[:ancestor_ids] || [], root_info[:ancestor_ids]&.first, immediate_parent_row_id: object.row_id_for(root_info[:parent_row]), is_pinned_row: true, pinned_index: next_index, pinned_position: "top", initial_table_data_attributes: root_info[:depth].to_i > 0 ? object.pinned_root_initial_data_attributes(root_info) : nil) %>
8
- <%= row_output %>
9
- <% end %>
3
+ <%= pb_content_tag(:tbody, class: "pinned-rows-tbody") do %>
4
+ <% next_index = 0 %>
5
+ <% object.pinned_root_rows.each do |root_info| %>
6
+ <% row_output, next_index = object.render_row_and_children(root_info[:row], object.column_definitions, root_info[:depth], root_info[:depth] > 0, root_info[:ancestor_ids] || [], root_info[:ancestor_ids]&.first, immediate_parent_row_id: object.row_id_for(root_info[:parent_row]), is_pinned_row: true, pinned_index: next_index, initial_table_data_attributes: root_info[:depth].to_i > 0 ? object.pinned_root_initial_data_attributes(root_info) : nil) %>
7
+ <%= row_output %>
10
8
  <% end %>
11
9
  <% end %>
12
10
  <%= pb_content_tag(:tbody) do %>
@@ -15,16 +13,6 @@
15
13
  <%= result.is_a?(Array) ? result[0] : result %>
16
14
  <% end %>
17
15
  <% end %>
18
- <% if object.has_pinned_bottom_rows? %>
19
- <%= pb_content_tag(:tbody, class: "pinned-rows-tbody-bottom") do %>
20
- <% next_index = 0 %>
21
- <% bottom_total = object.pinned_bottom_row_count %>
22
- <% object.pinned_bottom_root_rows.each do |root_info| %>
23
- <% row_output, next_index = object.render_row_and_children(root_info[:row], object.column_definitions, root_info[:depth], root_info[:depth] > 0, root_info[:ancestor_ids] || [], root_info[:ancestor_ids]&.first, immediate_parent_row_id: object.row_id_for(root_info[:parent_row]), is_pinned_row: true, pinned_index: next_index, pinned_position: "bottom", pinned_bottom_total: bottom_total, initial_table_data_attributes: root_info[:depth].to_i > 0 ? object.pinned_root_initial_data_attributes(root_info) : nil) %>
24
- <%= row_output %>
25
- <% end %>
26
- <% end %>
27
- <% end %>
28
16
  <% else %>
29
17
  <%= pb_content_tag(:tbody) do %>
30
18
  <% table_data.each do |row| %>