Skip to content

Commit

Permalink
Updated doc example and sticky column functionality
Browse files Browse the repository at this point in the history
  • Loading branch information
@skduncan
skduncan committed Dec 18, 2024
1 parent f07a662 commit d9b54a4
Show file tree
Hide file tree
Showing 7 changed files with 53 additions and 63 deletions.
14 changes: 8 additions & 6 deletions playbook/app/pb_kits/playbook/pb_table/_table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -47,6 +48,7 @@ const Table = (props: TableProps): React.ReactElement => {
disableHover = false,
htmlOptions = {},
id,
isPinnedLeft = false,
outerPadding = '',
responsive = 'collapse',
singleLine = false,
Expand Down Expand Up @@ -92,31 +94,31 @@ 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');
} else {
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');
Expand Down
78 changes: 30 additions & 48 deletions playbook/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,16 +25,16 @@
<td id="3">Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Column 6</td>
<td>Column 7</td>
<td>Column 8</td>
<td>Column 9</td>
<td>Column 10</td>
<td>Column 11</td>
<td>Column 12</td>
<td>Column 13</td>
<td>Column 14</td>
<td>Column 15</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
<td>Value 13</td>
<td>Value 14</td>
<td>Value 15</td>

</tr>
<tr>
Expand All @@ -43,16 +43,16 @@
<td id="3">Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Column 6</td>
<td>Column 7</td>
<td>Column 8</td>
<td>Column 9</td>
<td>Column 10</td>
<td>Column 11</td>
<td>Column 12</td>
<td>Column 13</td>
<td>Column 14</td>
<td>Column 15</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
<td>Value 13</td>
<td>Value 14</td>
<td>Value 15</td>

</tr>
<tr>
Expand All @@ -61,34 +61,16 @@
<td id="3">Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Column 6</td>
<td>Column 7</td>
<td>Column 8</td>
<td>Column 9</td>
<td>Column 10</td>
<td>Column 11</td>
<td>Column 12</td>
<td>Column 13</td>
<td>Column 14</td>
<td>Column 15</td>

</tr>
<tr>
<td id="1">Value 1</td>
<td id="2">Value 2</td>
<td id="3">Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Column 6</td>
<td>Column 7</td>
<td>Column 8</td>
<td>Column 9</td>
<td>Column 10</td>
<td>Column 11</td>
<td>Column 12</td>
<td>Column 13</td>
<td>Column 14</td>
<td>Column 15</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
<td>Value 13</td>
<td>Value 14</td>
<td>Value 15</td>

</tr>
</tbody>
Expand Down
1 change: 1 addition & 0 deletions playbook/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md
View file
Original file line number Diff line number Diff line change
@@ -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 `<th>` and `<td>`.
3 changes: 2 additions & 1 deletion playbook/app/pb_kits/playbook/pb_table/docs/example.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
8 changes: 5 additions & 3 deletions playbook/app/pb_kits/playbook/pb_table/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
});
Expand Down
11 changes: 7 additions & 4 deletions playbook/app/pb_kits/playbook/pb_table/styles/_scroll.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
}
1 change: 0 additions & 1 deletion playbook/app/pb_kits/playbook/pb_table/styles/_sticky_columns.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
[class^="pb_table"] {
.sticky {
position: sticky !important;
left: 0;
z-index: 1;
background-color: white;
}
Expand Down

0 comments on commit d9b54a4

Please sign in to comment.