From d9b54a40da94258893869f7447b481ff3f8a1709 Mon Sep 17 00:00:00 2001 From: Sam Duncan Date: Wed, 18 Dec 2024 07:57:02 -0600 Subject: [PATCH] Updated doc example and sticky column functionality --- .../app/pb_kits/playbook/pb_table/_table.tsx | 14 ++-- .../docs/_table_sticky_left_columns.html.erb | 78 +++++++------------ .../docs/_table_sticky_left_columns_rails.md | 1 + .../playbook/pb_table/docs/example.yml | 3 +- .../app/pb_kits/playbook/pb_table/index.ts | 8 +- .../playbook/pb_table/styles/_scroll.scss | 11 ++- .../pb_table/styles/_sticky_columns.scss | 1 - 7 files changed, 53 insertions(+), 63 deletions(-) create mode 100644 playbook/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md diff --git a/playbook/app/pb_kits/playbook/pb_table/_table.tsx b/playbook/app/pb_kits/playbook/pb_table/_table.tsx index 35e9f6d923..b895b5bd3c 100755 --- a/playbook/app/pb_kits/playbook/pb_table/_table.tsx +++ b/playbook/app/pb_kits/playbook/pb_table/_table.tsx @@ -23,6 +23,7 @@ type TableProps = { disableHover?: boolean, htmlOptions?: { [key: string]: string | number | boolean | (() => void) }, id?: string, + isPinnedLeft?: boolean, outerPadding?: "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl", responsive?: "collapse" | "scroll" | "none", singleLine?: boolean, @@ -47,6 +48,7 @@ const Table = (props: TableProps): React.ReactElement => { disableHover = false, htmlOptions = {}, id, + isPinnedLeft = false, outerPadding = '', responsive = 'collapse', singleLine = false, @@ -92,16 +94,16 @@ const Table = (props: TableProps): React.ReactElement => { useEffect(() => { const handleStickyColumns = () => { let accumulatedWidth = 0; - + stickyLeftcolumn.forEach((colId, index) => { const isLastColumn = index === stickyLeftcolumn.length - 1; const header = document.querySelector(`th[id="${colId}"]`); const cells = document.querySelectorAll(`td[id="${colId}"]`); - + if (header) { header.classList.add('sticky'); (header as HTMLElement).style.left = `${accumulatedWidth}px`; - + if (!isLastColumn) { header.classList.add('with-border'); header.classList.remove('sticky-shadow'); @@ -109,14 +111,14 @@ const Table = (props: TableProps): React.ReactElement => { header.classList.remove('with-border'); header.classList.add('sticky-shadow'); } - + accumulatedWidth += (header as HTMLElement).offsetWidth; } - + cells.forEach((cell) => { cell.classList.add('sticky'); (cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`; - + if (!isLastColumn) { cell.classList.add('with-border'); cell.classList.remove('sticky-shadow'); diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.html.erb b/playbook/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.html.erb index 45e96e5406..4a13b3a3f0 100644 --- a/playbook/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.html.erb +++ b/playbook/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.html.erb @@ -25,16 +25,16 @@ Value 3 Value 4 Value 5 - Column 6 - Column 7 - Column 8 - Column 9 - Column 10 - Column 11 - Column 12 - Column 13 - Column 14 - Column 15 + Value 6 + Value 7 + Value 8 + Value 9 + Value 10 + Value 11 + Value 12 + Value 13 + Value 14 + Value 15 @@ -43,16 +43,16 @@ Value 3 Value 4 Value 5 - Column 6 - Column 7 - Column 8 - Column 9 - Column 10 - Column 11 - Column 12 - Column 13 - Column 14 - Column 15 + Value 6 + Value 7 + Value 8 + Value 9 + Value 10 + Value 11 + Value 12 + Value 13 + Value 14 + Value 15 @@ -61,34 +61,16 @@ Value 3 Value 4 Value 5 - Column 6 - Column 7 - Column 8 - Column 9 - Column 10 - Column 11 - Column 12 - Column 13 - Column 14 - Column 15 - - - - Value 1 - Value 2 - Value 3 - Value 4 - Value 5 - Column 6 - Column 7 - Column 8 - Column 9 - Column 10 - Column 11 - Column 12 - Column 13 - Column 14 - Column 15 + Value 6 + Value 7 + Value 8 + Value 9 + Value 10 + Value 11 + Value 12 + Value 13 + Value 14 + Value 15 diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md b/playbook/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md new file mode 100644 index 0000000000..8a2f86bc56 --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md @@ -0,0 +1 @@ +The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `` and ``. diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/example.yml b/playbook/app/pb_kits/playbook/pb_table/docs/example.yml index 201661314d..a57d88ca95 100755 --- a/playbook/app/pb_kits/playbook/pb_table/docs/example.yml +++ b/playbook/app/pb_kits/playbook/pb_table/docs/example.yml @@ -4,6 +4,7 @@ examples: - table_md: Medium - table_lg: Large - table_sticky: Sticky Header + - table_sticky_left_columns: Sticky Left Column - table_header: Table Header - table_alignment_row_rails: Row Alignment - table_alignment_column_rails: Cell Alignment @@ -33,7 +34,7 @@ examples: - table_md: Medium - table_lg: Large - table_sticky: Sticky Header - - table_alignment_row: Row Alignment + - table_sticky_left_columns: Sticky Left Column - table_alignment_column: Cell Alignment - table_alignment_shift_row: Row Shift - table_alignment_shift_data: Cell Shift diff --git a/playbook/app/pb_kits/playbook/pb_table/index.ts b/playbook/app/pb_kits/playbook/pb_table/index.ts index 8f9c810bd9..9022dcf07b 100644 --- a/playbook/app/pb_kits/playbook/pb_table/index.ts +++ b/playbook/app/pb_kits/playbook/pb_table/index.ts @@ -51,9 +51,11 @@ export default class PbTable extends PbEnhancedElement { .split('-'); if (this.stickyLeftColumns.length > 0) { - this.handleStickyColumnsRef = this.handleStickyColumns.bind(this); - this.handleStickyColumns(); - window.addEventListener('resize', this.handleStickyColumnsRef); + setTimeout(() => { + this.handleStickyColumnsRef = this.handleStickyColumns.bind(this); + this.handleStickyColumns(); + window.addEventListener('resize', this.handleStickyColumnsRef); + }, 10); } } }); diff --git a/playbook/app/pb_kits/playbook/pb_table/styles/_scroll.scss b/playbook/app/pb_kits/playbook/pb_table/styles/_scroll.scss index b1eead69ac..76fd0f06c0 100644 --- a/playbook/app/pb_kits/playbook/pb_table/styles/_scroll.scss +++ b/playbook/app/pb_kits/playbook/pb_table/styles/_scroll.scss @@ -1,4 +1,7 @@ - .table-responsive-scroll { - display: block; - overflow-x: auto; - } +.table-responsive-scroll { + display: block; + overflow-x: auto; + border-right: 1px solid $border_light !important; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} diff --git a/playbook/app/pb_kits/playbook/pb_table/styles/_sticky_columns.scss b/playbook/app/pb_kits/playbook/pb_table/styles/_sticky_columns.scss index 55da8880ea..9fa2143580 100644 --- a/playbook/app/pb_kits/playbook/pb_table/styles/_sticky_columns.scss +++ b/playbook/app/pb_kits/playbook/pb_table/styles/_sticky_columns.scss @@ -3,7 +3,6 @@ [class^="pb_table"] { .sticky { position: sticky !important; - left: 0; z-index: 1; background-color: white; }