Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[PBNTR-662] Create a "stickyRightcolumn" prop for the Table kit - REACT ONLY #4051

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
+309 −42
Open

[PBNTR-662] Create a "stickyRightcolumn" prop for the Table kit - REACT ONLY #4051

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9002861
Added stickyRightcolumn prop and example doc. Adjusted styling to acc…
skduncan Dec 23, 2024
d817a75
Removed resize function of script
skduncan Dec 23, 2024
95ea687
Added example to show table using both sticky column props at once. A…
skduncan Dec 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 67 additions & 18 deletions playbook/app/pb_kits/playbook/pb_table/_table.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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.
2 changes: 2 additions & 0 deletions playbook/app/pb_kits/playbook/pb_table/docs/example.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@ examples:
- table_lg: Large
- table_sticky: Sticky Header
- table_sticky_left_columns: Sticky Left Column
- table_sticky_right_columns: Sticky Right Column
- table_sticky_columns: Sticky Left and Right Columns
- table_alignment_row: Row Alignment
- table_alignment_column: Cell Alignment
- table_alignment_shift_row: Row Shift
Expand Down
2 changes: 2 additions & 0 deletions playbook/app/pb_kits/playbook/pb_table/docs/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@ export { default as TableWithSubcomponents } from './_table_with_subcomponents.j
export { default as TableWithSubcomponentsAsDivs } from './_table_with_subcomponents_as_divs.jsx'
export { default as TableOuterPadding } from './_table_outer_padding.jsx'
export { default as TableStickyLeftColumns } from './_table_sticky_left_columns.jsx'
export { default as TableStickyRightColumns } from './_table_sticky_right_columns.jsx'
export { default as TableStickyColumns } from './_table_sticky_columns.jsx'
export { default as TableWithCollapsible } from './_table_with_collapsible.jsx'
export { default as TableWithCollapsibleWithCustomContent } from './_table_with_collapsible_with_custom_content.jsx'
export { default as TableWithCollapsibleWithNestedTable } from './_table_with_collapsible_with_nested_table.jsx'
Expand Down
Loading
Loading