Skip to content

Commit

Permalink
[PBNTR-662] Create a "stickyRightcolumn" prop for the Table kit - REA…
Browse files Browse the repository at this point in the history 
…CT ONLY (#4051)

**What does this PR do?** A clear and concise description with your
runway ticket url.
 As a Playbook user, 
I want to create a "stickyRightcolumn" prop for our React Table kit,
so that I can select any column on my table to make sticky. 

**Screenshots:** Screenshots to visualize your addition/change
<img width="1099" alt="Screenshot 2024-12-23 at 10 30 08 AM"
src="https://github.com/user-attachments/assets/817b3cea-3288-471f-afef-f1a710f6a98f"
/>


**How to test?** Steps to confirm the desired behavior:
1. Go to [Sticky Right
Column](https://pr4051.playbook.beta.px.powerapp.cloud/kits/table/react#sticky-right-column)

#### Checklist:
- [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new
kit`, `deprecated`, or `breaking`. See [Changelog &
Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels)
for details.
- [x] **DEPLOY** I have added the `milano` label to show I'm ready for a
review.
  • Loading branch information
@skduncan
skduncan authored Jan 3, 2025
1 parent 75a1f6d commit 4b98e80
Show file tree
Hide file tree
Showing 11 changed files with 309 additions and 42 deletions.
85 changes: 67 additions & 18 deletions playbook/app/pb_kits/playbook/pb_table/_table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,8 @@ type TableProps = {
singleLine?: boolean,
size?: "sm" | "md" | "lg",
sticky?: boolean,
stickyLeftcolumn?: string[],
stickyLeftColumn?: string[],
stickyRightColumn?: string[],
striped?: boolean,
tag?: "table" | "div",
verticalBorder?: boolean,
Expand All @@ -52,7 +53,8 @@ const Table = (props: TableProps): React.ReactElement => {
singleLine = false,
size = 'sm',
sticky = false,
stickyLeftcolumn = [],
stickyLeftColumn = [],
stickyRightColumn= [],
striped = false,
tag = 'table',
verticalBorder = false,
Expand All @@ -79,7 +81,8 @@ const Table = (props: TableProps): React.ReactElement => {
'single-line': singleLine,
'no-hover': disableHover,
'sticky-header': sticky,
'sticky-left-column': stickyLeftcolumn,
'sticky-left-column': stickyLeftColumn,
'sticky-right-column': stickyRightColumn,
'striped': striped,
[outerPaddingCss]: outerPadding !== '',
},
Expand All @@ -90,11 +93,12 @@ const Table = (props: TableProps): React.ReactElement => {
)

useEffect(() => {
const handleStickyColumns = () => {
const handleStickyLeftColumns = () => {
if (!stickyLeftColumn.length) return;
let accumulatedWidth = 0;

stickyLeftcolumn.forEach((colId, index) => {
const isLastColumn = index === stickyLeftcolumn.length - 1;
stickyLeftColumn.forEach((colId, index) => {
const isLastColumn = index === stickyLeftColumn.length - 1;
const header = document.querySelector(`th[id="${colId}"]`);
const cells = document.querySelectorAll(`td[id="${colId}"]`);

Expand All @@ -103,11 +107,11 @@ const Table = (props: TableProps): React.ReactElement => {
(header as HTMLElement).style.left = `${accumulatedWidth}px`;

if (!isLastColumn) {
header.classList.add('with-border');
header.classList.remove('sticky-shadow');
header.classList.add('with-border-right');
header.classList.remove('sticky-left-shadow');
} else {
header.classList.remove('with-border');
header.classList.add('sticky-shadow');
header.classList.remove('with-border-right');
header.classList.add('sticky-left-shadow');
}

accumulatedWidth += (header as HTMLElement).offsetWidth;
Expand All @@ -118,26 +122,71 @@ const Table = (props: TableProps): React.ReactElement => {
(cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;

if (!isLastColumn) {
cell.classList.add('with-border');
cell.classList.remove('sticky-shadow');
cell.classList.add('with-border-right');
cell.classList.remove('sticky-left-shadow');
} else {
cell.classList.remove('with-border');
cell.classList.add('sticky-shadow');
cell.classList.remove('with-border-right');
cell.classList.add('sticky-left-shadow');
}
});
});
};

setTimeout(() => {
handleStickyColumns();
handleStickyLeftColumns();
}, 10);

window.addEventListener('resize', handleStickyColumns);
window.addEventListener('resize', handleStickyLeftColumns);

return () => {
window.removeEventListener('resize', handleStickyColumns);
window.removeEventListener('resize', handleStickyLeftColumns);
};
}, [stickyLeftcolumn]);
}, [stickyLeftColumn]);

useEffect(() => {
const handleStickyRightColumns = () => {
if (!stickyRightColumn.length) return;
let accumulatedWidth = 0;

stickyRightColumn.reverse().forEach((colId, index) => {
const isLastColumn = index === stickyRightColumn.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.right = `${accumulatedWidth}px`;

if (!isLastColumn) {
header.classList.add('with-border-left');
header.classList.remove('sticky-right-shadow');
} else {
header.classList.remove('with-border-left');
header.classList.add('sticky-right-shadow');
}

accumulatedWidth += (header as HTMLElement).offsetWidth;
}

cells.forEach((cell) => {
cell.classList.add('sticky');
(cell as HTMLElement).style.right = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;

if (!isLastColumn) {
cell.classList.add('with-border-left');
cell.classList.remove('sticky-right-shadow');
} else {
cell.classList.remove('with-border-left');
cell.classList.add('sticky-right-shadow');
}
});
});
};

setTimeout(() => {
handleStickyRightColumns();
}, 10);
}, [stickyRightColumn]);

useEffect(() => {
const instance = new PbTable()
Expand Down
88 changes: 88 additions & 0 deletions playbook/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
import React from 'react'
import Table from '../_table'

const TableStickyColumns = () => {
return (
<Table
responsive="scroll"
size="md"
stickyLeftColumn={["a"]}
stickyRightColumn={["b"]}
>
<thead>
<tr>
<th id="a">{'Column 1'}</th>
<th>{'Column 2'}</th>
<th>{'Column 3'}</th>
<th>{'Column 4'}</th>
<th>{'Column 5'}</th>
<th>{'Column 6'}</th>
<th>{'Column 7'}</th>
<th>{'Column 8'}</th>
<th>{'Column 9'}</th>
<th>{'Column 10'}</th>
<th>{'Column 11'}</th>
<th>{'Column 12'}</th>
<th>{'Column 13'}</th>
<th>{'Column 14'}</th>
<th id="b">{'Column 15'}</th>
</tr>
</thead>
<tbody>
<tr>
<td id="a">{'Value 1'}</td>
<td>{'Value 2'}</td>
<td>{'Value 3'}</td>
<td>{'Value 4'}</td>
<td>{'Value 5'}</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 id="b">{'Value 15'}</td>
</tr>
<tr>
<td id="a">{'Value 1'}</td>
<td>{'Value 2'}</td>
<td>{'Value 3'}</td>
<td>{'Value 4'}</td>
<td>{'Value 5'}</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 id="b">{'Value 15'}</td>
</tr>
<tr>
<td id="a">{'Value 1'}</td>
<td>{'Value 2'}</td>
<td>{'Value 3'}</td>
<td>{'Value 4'}</td>
<td>{'Value 5'}</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 id="b">{'Value 15'}</td>
</tr>
</tbody>
</Table>
)
}

export default TableStickyColumns
3 changes: 3 additions & 0 deletions playbook/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_react.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
The `stickyLeftColumn` and `stickyRightColumn` props can be used together on the same table as needed.

Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using props.
2 changes: 1 addition & 1 deletion playbook/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const TableStickyLeftColumns = () => {
<Table
responsive="scroll"
size="md"
stickyLeftcolumn={["1", "2", "3"]}
stickyLeftColumn={["1", "2", "3"]}
>
<thead>
<tr>
Expand Down
2 changes: 2 additions & 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
@@ -1 +1,3 @@
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>`.

Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `stickyLeftColumn`.
5 changes: 4 additions & 1 deletion playbook/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,5 @@
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>`.
If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`

If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`

Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using `stickyLeftColumn` prop.
87 changes: 87 additions & 0 deletions playbook/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
import React from 'react'
import Table from '../_table'

const TableStickyRightColumns = () => {
return (
<Table
responsive="scroll"
size="md"
stickyRightColumn={["13", "14", "15"]}
>
<thead>
<tr>
<th>{'Column 1'}</th>
<th>{'Column 2'}</th>
<th>{'Column 3'}</th>
<th>{'Column 4'}</th>
<th>{'Column 5'}</th>
<th>{'Column 6'}</th>
<th>{'Column 7'}</th>
<th>{'Column 8'}</th>
<th>{'Column 9'}</th>
<th>{'Column 10'}</th>
<th>{'Column 11'}</th>
<th>{'Column 12'}</th>
<th id="13">{'Column 13'}</th>
<th id="14">{'Column 14'}</th>
<th id="15">{'Column 15'}</th>
</tr>
</thead>
<tbody>
<tr>
<td>{'Value 1'}</td>
<td>{'Value 2'}</td>
<td>{'Value 3'}</td>
<td>{'Value 4'}</td>
<td>{'Value 5'}</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 id="13">{'Value 13'}</td>
<td id="14">{'Value 14'}</td>
<td id="15">{'Value 15'}</td>
</tr>
<tr>
<td>{'Value 1'}</td>
<td>{'Value 2'}</td>
<td>{'Value 3'}</td>
<td>{'Value 4'}</td>
<td>{'Value 5'}</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 id="13">{'Value 13'}</td>
<td id="14">{'Value 14'}</td>
<td id="15">{'Value 15'}</td>
</tr>
<tr>
<td>{'Value 1'}</td>
<td>{'Value 2'}</td>
<td>{'Value 3'}</td>
<td>{'Value 4'}</td>
<td>{'Value 5'}</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 id="13">{'Value 13'}</td>
<td id="14">{'Value 14'}</td>
<td id="15">{'Value 15'}</td>
</tr>
</tbody>
</Table>
)
}

export default TableStickyRightColumns
5 changes: 5 additions & 0 deletions playbook/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_react.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
The `stickyRightColumn` prop works in the same way as the above `stickyLeftColumn` prop. It expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.

If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`

Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `stickyRightColumn` prop.
Loading

0 comments on commit 4b98e80

Please sign in to comment.