From 7bf8ade78e668050d8ed8b80f3b86be1606525c3 Mon Sep 17 00:00:00 2001 From: Sami Ahmed Siddiqui Date: Wed, 12 Jun 2024 15:57:45 +0500 Subject: [PATCH 1/5] Sort feature to tables (Where applicable) --- docs/assets/scss/_tables.scss | 57 +++++++++++++++++++----- docs/src/index.js | 84 +++++++++++++++++++++++++++++++++++ 2 files changed, 130 insertions(+), 11 deletions(-) diff --git a/docs/assets/scss/_tables.scss b/docs/assets/scss/_tables.scss index c10daa78c4a1..dc0e1143c955 100644 --- a/docs/assets/scss/_tables.scss +++ b/docs/assets/scss/_tables.scss @@ -9,19 +9,20 @@ main { margin: 20px 0; max-width: 828px; - > table{ + > table { margin: 0 !important; border: none; box-shadow: none; - @media(max-width:900px){ - min-width:650px; - } - tbody{ + + @media (max-width:900px) { + min-width:650px; + } + + tbody { border-bottom:0; - tr:last-child{ - //background: red; - td{ + tr:last-child { + td { border-bottom:0px; } } @@ -70,7 +71,8 @@ main { } &.sno-last { - tr th:last-child, tr td:last-child { + tr th:last-child, + tr td:last-child { width: 1%; } } @@ -114,6 +116,41 @@ main { font-size: 12px; line-height: 24px; padding: 12.75px 15px; + min-width: 140px; + + &.empty-th .sort-btn { + display: none; + } + + .sort-btn { + font-size: 0; + width: 5px; + height: 20px; + display: inline-block; + vertical-align: middle; + text-align: center; + cursor: pointer; + position: absolute; + + &::after { + color: #97a5b0; + display: inline-block; + font-size: 14px; + width: 0; + height: 0; + background-size: contain; + border-radius: 4px; + margin-top: 0; + margin-left: 5px; + transition: all 300ms linear; + content: "\f0d7"; + font-family: "Font Awesome 6 Pro"; + } + + &.sorted::after { + content: "\f0d8"; + } + } } td { @@ -131,8 +168,6 @@ main { } } - - @media (min-width: 1024px) { main { .td-content { diff --git a/docs/src/index.js b/docs/src/index.js index b3fac6050e22..a94aab9fa183 100644 --- a/docs/src/index.js +++ b/docs/src/index.js @@ -506,6 +506,90 @@ $(document).ready(() => { } }); + /** + Sort option in table. + */ + (() => { + const tables = document.querySelectorAll('.td-content .table-responsive table'); + tables.forEach(table => { + const headersEmpty = table.querySelectorAll('th:empty'); + headersEmpty.forEach((innerDiv) => { + innerDiv.classList.add('empty-th'); + }); + + const headers = table.querySelectorAll('th'); + const tbody = table.tBodies[0]; + const totalRows = tbody.querySelectorAll('tr'); + + let sortOrder = 1; + if (totalRows.length > 1) { + headers.forEach((header, index) => { + const sortSpan = document.createElement('span'); + const tdsEmpty = table.querySelectorAll(`td:nth-child(${index + 1})`); + + let emptyCellsCount = 0; + tdsEmpty.forEach((emptyCell) => { + if (emptyCell.textContent.trim() !== '') { + emptyCellsCount += 1; + } + }); + + if (emptyCellsCount === 0) { + table.querySelector(`thead th:nth-child(${index + 1})`).classList.add('empty-th'); + } + + sortSpan.textContent = 'Sort'; + sortSpan.classList.add('sort-btn'); + header.appendChild(sortSpan); + sortSpan.addEventListener('click', (ev) => { + ev.target.classList.toggle('sorted'); + sortTableByColumn(table, index, sortOrder); + sortOrder *= -1; + }); + }); + } + }); + + function sortTableByColumn(table, columnIndex, sortOrder) { + const tbody = table.tBodies[0]; + const rows = Array.from(tbody.querySelectorAll('tr')); + const sortedRows = rows.sort((a, b) => { + let aText = ''; + let bText = ''; + let returnVal = ''; + + if (a.cells[columnIndex] && a.cells[columnIndex].textContent) { + aText = a.cells[columnIndex].textContent.replace(/[,\-(]/g, '').trim(); + } + + if (b.cells[columnIndex] && b.cells[columnIndex].textContent) { + bText = b.cells[columnIndex].textContent.replace(/[,\-(]/g, '').trim(); + } + + if (aText === '' && bText === '') { + returnVal = 0; + } else if (aText === '') { + returnVal = 1; + } else if (bText === '') { + returnVal = -1; + } else { + returnVal = sortOrder * aText.localeCompare(bText, 'en', { + numeric: true, + sensitivity: 'base' + }); + } + + return returnVal; + }); + + while (tbody.firstChild) { + tbody.removeChild(tbody.firstChild); + } + + tbody.append(...sortedRows); + } + })(); + if ($('.component-box').length > 0) { $('.component-box li p a').each(function () { $(this).parents('li').addClass('linked-box'); From eb985116ef287f81a67305caa197385ead9e42b8 Mon Sep 17 00:00:00 2001 From: Sami Ahmed Siddiqui Date: Wed, 12 Jun 2024 16:49:32 +0500 Subject: [PATCH 2/5] fix sorting icon in responsive --- docs/assets/scss/_tables.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/assets/scss/_tables.scss b/docs/assets/scss/_tables.scss index dc0e1143c955..2ab577eb6937 100644 --- a/docs/assets/scss/_tables.scss +++ b/docs/assets/scss/_tables.scss @@ -116,7 +116,6 @@ main { font-size: 12px; line-height: 24px; padding: 12.75px 15px; - min-width: 140px; &.empty-th .sort-btn { display: none; From bed32ae0a71c371f3ddaf142d088dc9f1dcdf556 Mon Sep 17 00:00:00 2001 From: Sami Ahmed Siddiqui Date: Wed, 12 Jun 2024 16:58:52 +0500 Subject: [PATCH 3/5] fix sort icon in responsive --- docs/assets/scss/_tables.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/assets/scss/_tables.scss b/docs/assets/scss/_tables.scss index 2ab577eb6937..9b178b810c04 100644 --- a/docs/assets/scss/_tables.scss +++ b/docs/assets/scss/_tables.scss @@ -116,6 +116,7 @@ main { font-size: 12px; line-height: 24px; padding: 12.75px 15px; + position: relative; &.empty-th .sort-btn { display: none; From 62afc670ab93ca8fd8d91a7264d6c948106c2d15 Mon Sep 17 00:00:00 2001 From: Sami Ahmed Siddiqui Date: Thu, 13 Jun 2024 11:34:37 +0500 Subject: [PATCH 4/5] Allow sorting to particular tables --- docs/assets/scss/_tables.scss | 37 ++++++++++++++++++++--------------- docs/src/index.js | 2 +- 2 files changed, 22 insertions(+), 17 deletions(-) diff --git a/docs/assets/scss/_tables.scss b/docs/assets/scss/_tables.scss index 9b178b810c04..4273bf36ca5a 100644 --- a/docs/assets/scss/_tables.scss +++ b/docs/assets/scss/_tables.scss @@ -99,23 +99,8 @@ main { } } - tr { - &:not(:last-child) { - border-color: #e9eef2; - border-style: solid; - border-width: 0 0 1px 0; - } - + &.sortable tr { th { - border-width: 0; - font-family: 'Inter'; - font-style: normal; - color: #4e5f6d; - text-transform: uppercase; - font-weight: 600; - font-size: 12px; - line-height: 24px; - padding: 12.75px 15px; position: relative; &.empty-th .sort-btn { @@ -152,6 +137,26 @@ main { } } } + } + + tr { + &:not(:last-child) { + border-color: #e9eef2; + border-style: solid; + border-width: 0 0 1px 0; + } + + th { + border-width: 0; + font-family: 'Inter'; + font-style: normal; + color: #4e5f6d; + text-transform: uppercase; + font-weight: 600; + font-size: 12px; + line-height: 24px; + padding: 12.75px 15px; + } td { border-width: 0; diff --git a/docs/src/index.js b/docs/src/index.js index a94aab9fa183..262d6626d77b 100644 --- a/docs/src/index.js +++ b/docs/src/index.js @@ -510,7 +510,7 @@ $(document).ready(() => { Sort option in table. */ (() => { - const tables = document.querySelectorAll('.td-content .table-responsive table'); + const tables = document.querySelectorAll('.td-content .table-responsive table.sortable'); tables.forEach(table => { const headersEmpty = table.querySelectorAll('th:empty'); headersEmpty.forEach((innerDiv) => { From 65c248564472cc5c9473b32c42495746c04f6a5d Mon Sep 17 00:00:00 2001 From: Sami Ahmed Siddiqui Date: Thu, 13 Jun 2024 12:20:25 +0500 Subject: [PATCH 5/5] Fix JS warning --- docs/src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/index.js b/docs/src/index.js index 262d6626d77b..b1ce364fc45b 100644 --- a/docs/src/index.js +++ b/docs/src/index.js @@ -575,7 +575,7 @@ $(document).ready(() => { } else { returnVal = sortOrder * aText.localeCompare(bText, 'en', { numeric: true, - sensitivity: 'base' + sensitivity: 'base', }); }