diff --git a/packages/canary-web-components/src/components/ic-data-table/ic-data-table.stories.mdx b/packages/canary-web-components/src/components/ic-data-table/ic-data-table.stories.mdx
index b9ea8a6e76..78347aa321 100644
--- a/packages/canary-web-components/src/components/ic-data-table/ic-data-table.stories.mdx
+++ b/packages/canary-web-components/src/components/ic-data-table/ic-data-table.stories.mdx
@@ -1038,9 +1038,7 @@ If there is a certain row or column that should be exempt from truncation, then
#### Truncating Cell Data code example
diff --git a/packages/canary-web-components/src/components/ic-data-table/ic-data-table.tsx b/packages/canary-web-components/src/components/ic-data-table/ic-data-table.tsx
index a97b748964..29356e1e24 100644
--- a/packages/canary-web-components/src/components/ic-data-table/ic-data-table.tsx
+++ b/packages/canary-web-components/src/components/ic-data-table/ic-data-table.tsx
@@ -263,7 +263,6 @@ export class DataTable {
}
componentDidUpdate(): void {
- console.log("HERE");
this.updateTruncation = true;
this.dataTruncation();
}
@@ -289,15 +288,13 @@ export class DataTable {
typographyEl: HTMLIcTypographyElement,
cellContainer: HTMLElement
) => {
- // console.log(cellContainer.clientHeight);
typographyEl.maxLines = Math.max(
Math.floor(cellContainer.clientHeight / 24) - 1,
1
); // Math.floor
- typographyEl.checkMaxLines(
+ typographyEl.checkCellTextMaxLines(
cellContainer.clientHeight,
- typographyEl.scrollHeight,
- true
+ typographyEl.scrollHeight
);
this.removeDivStyles(cellContainer);
@@ -323,14 +320,8 @@ export class DataTable {
if (this.updateTruncation) {
this.resetMaxLines(typographyEl);
- }
-
- if (typographyEl.id === "jobTitle-0") {
- console.log({
- typographyEl: typographyEl,
- cellContainer: cellContainer?.clientHeight,
- scrollHeight: typographyEl.scrollHeight,
- });
+ cellContainer.appendChild(typographyEl);
+ tooltip?.remove();
}
if (
@@ -354,11 +345,33 @@ export class DataTable {
typographyEl.style.webkitLineClamp = `${Math.floor(
cellContainer.clientHeight / 24
)}`;
+ if (tooltip) {
+ cellContainer.appendChild(typographyEl);
+ tooltip.remove();
+ }
if (!tooltip) {
// if truncation pattern is tooltip and the tooltip does not exist, dynamically create one and add the content inside
const tooltipEl = document.createElement("ic-tooltip");
+ const rowIndex = Number(typographyEl.id.match(/-(\d+)$/)[1]);
tooltipEl.setAttribute("target", typographyEl.id);
tooltipEl.setAttribute("label", typographyEl.innerHTML);
+
+ // Checks if the truncated text is in the first row of the displayed page
+ rowIndex === 0 && tooltipEl.setAttribute("placement", "bottom");
+ // Checks if the truncated text is in the last row of the displayed page
+ if (
+ rowIndex === this.data.length - 1 ||
+ rowIndex === this.rowsPerPage - 1
+ ) {
+ tooltipEl.setAttribute("placement", "top");
+ }
+ // Checks if the truncated text is in the first column
+ typographyEl.id.includes(this.columns[0].key) &&
+ tooltipEl.setAttribute("placement", "right");
+ // Checks if the truncated text is in the last column
+ typographyEl.id.includes(
+ this.columns[this.columns.length - 1].key
+ ) && tooltipEl.setAttribute("placement", "left");
typographyEl.parentNode.replaceChild(tooltipEl, typographyEl);
tooltipEl.appendChild(typographyEl);
}
@@ -386,6 +399,7 @@ export class DataTable {
handleItemsPerPageChange(ev: CustomEvent): void {
this.previousRowsPerPage = this.rowsPerPage;
this.rowsPerPage = ev.detail.value;
+ this.dataTruncation();
}
@Listen("icPageChange")
@@ -403,6 +417,7 @@ export class DataTable {
} else {
this.previousRowsPerPage = this.rowsPerPage;
}
+ this.dataTruncation();
}
@Listen("icTableDensityUpdate")
@@ -769,7 +784,6 @@ export class DataTable {
...row,
index,
});
-
this.currentRowHeight = variableRowHeightVal
? variableRowHeightVal !== "auto" && variableRowHeightVal
: this.globalRowHeight !== "auto" && this.globalRowHeight;
diff --git a/packages/canary-web-components/src/components/ic-data-table/story-data.ts b/packages/canary-web-components/src/components/ic-data-table/story-data.ts
index 6e63959cb3..993e503588 100644
--- a/packages/canary-web-components/src/components/ic-data-table/story-data.ts
+++ b/packages/canary-web-components/src/components/ic-data-table/story-data.ts
@@ -166,30 +166,28 @@ export const LONG_DATA_VALUES = [
export const LONG_DATA_VALUES_UPDATE = [
{
- name: 'Michael Phelps',
+ name: "Michael Phelps",
age: 23,
department: "United States",
employeeNumber: 1,
jobTitle: "Swimmer",
},
{
- name: 'Natalie Coughlin',
+ name: "Natalie Coughlin",
age: 25,
department: "United States",
employeeNumber: 2,
- jobTitle:
- "Swimmer",
+ jobTitle: "Swimmer",
},
{
name: "Debbie Flood",
age: 28,
department: "Great Britain",
employeeNumber: 3,
- jobTitle:
- "7 time Olympic and Commonwealth Champion for Rowing",
+ jobTitle: "7 time Olympic and Commonwealth Champion for Rowing",
},
{
- name: 'Gillian Charleton',
+ name: "Gillian Charleton",
age: "22",
department: "Canada",
employeeNumber: 4,
@@ -197,7 +195,6 @@ export const LONG_DATA_VALUES_UPDATE = [
},
];
-
export const DATA_CELL_ALIGNMENT = [
{
firstName: {
@@ -445,7 +442,7 @@ export const LONG_DATA = [
},
{
employeeNumber: 5,
- name: "Luke Ashford",
+ name: "Bartholomew Christoper Augustine Zacchaeus Ashford",
age: 18,
jobTitle: "Junior Developer",
address: "5 New Street, Town, Country, Postcode",
@@ -487,7 +484,7 @@ export const LONG_DATA = [
},
{
employeeNumber: 11,
- name: "Pete Norton",
+ name: "Chrysanthemum Finnleigh Carrington Savannah Norton",
age: 32,
jobTitle: "Analyst",
address: "6 Key Street, Town, County, Postcode",
@@ -515,7 +512,7 @@ export const LONG_DATA = [
},
{
employeeNumber: 15,
- name: "Mary Lincoln",
+ name: "Bernadette Mariah Genevieve Maddison Lincoln",
age: 23,
jobTitle: "Developer",
address: "10 Main Street, Town, Country, Postcode",
@@ -802,6 +799,7 @@ export const SortOptions = (): HTMLIcDataTableElement => {
export const Pagination = (): HTMLIcDataTableElement => {
const dataTable = createDataTableElement("Pagination", LONG_COLS, LONG_DATA);
dataTable.setAttribute("show-pagination", "true");
+ dataTable.setAttribute("truncation-pattern", "tooltip");
dataTable.paginationOptions = {
itemsPerPage: [
{ label: "5", value: "5" },
@@ -917,27 +915,27 @@ export const TruncationShowHide = (): HTMLElement => {
dataTable.globalRowHeight = 40;
dataTable.variableRowHeight = null;
dataTable.setAttribute("truncation-pattern", "showHide");
-
+
const resetButton = document.createElement("ic-button");
resetButton.addEventListener("click", () => dataTable.resetRowHeights());
resetButton.innerHTML = "Reset";
-
+
const setButton = document.createElement("ic-button");
setButton.addEventListener("click", () => {
dataTable.globalRowHeight = 80;
dataTable.variableRowHeight = ({ name, age }) =>
- (name === "John Smith" || age === 41) ? 200 : null;
+ name === "John Smith" || age === 41 ? 200 : null;
});
setButton.innerHTML = "Set";
- const updateDataButton = document.createElement('ic-button');
- updateDataButton.addEventListener('click', () => {
+ const updateDataButton = document.createElement("ic-button");
+ updateDataButton.addEventListener("click", () => {
setTimeout(() => {
dataTable.data = LONG_DATA_VALUES_UPDATE;
- }, 500)
+ }, 500);
});
updateDataButton.innerHTML = "Update data";
-
+
const buttonWrapper = document.createElement("div");
buttonWrapper.style["display"] = "flex";
buttonWrapper.style["paddingTop"] = "10px";
@@ -945,7 +943,7 @@ export const TruncationShowHide = (): HTMLElement => {
buttonWrapper.insertAdjacentElement("afterbegin", setButton);
buttonWrapper.insertAdjacentElement("beforeend", resetButton);
buttonWrapper.insertAdjacentElement("beforeend", updateDataButton);
-
+
const wrapper = document.createElement("div");
wrapper.insertAdjacentElement("afterbegin", dataTable);
wrapper.insertAdjacentElement("beforeend", buttonWrapper);
diff --git a/packages/canary-web-components/src/components/ic-pagination-bar/ic-pagination-bar.tsx b/packages/canary-web-components/src/components/ic-pagination-bar/ic-pagination-bar.tsx
index 0ca7064e7e..a5697c2020 100644
--- a/packages/canary-web-components/src/components/ic-pagination-bar/ic-pagination-bar.tsx
+++ b/packages/canary-web-components/src/components/ic-pagination-bar/ic-pagination-bar.tsx
@@ -487,6 +487,7 @@ export class PaginationBar {
target={`#${PAGE_INPUT_FIELD_ID}`}
disableHover
disableClick
+ placement="top"
>
{
const tempPx = parseInt(px);
return `${(1 / base) * tempPx}rem`;
-};
\ No newline at end of file
+};