diff --git a/docs/assets/scss/_tables.scss b/docs/assets/scss/_tables.scss
index c10daa78c4a1..4273bf36ca5a 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%;
         }
       }
@@ -97,6 +99,46 @@ main {
         }
       }
 
+      &.sortable tr {
+        th {
+          position: relative;
+
+          &.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";
+            }
+          }
+        }
+      }
+
       tr {
         &:not(:last-child) {
           border-color: #e9eef2;
@@ -131,8 +173,6 @@ main {
   }
 }
 
-
-
 @media (min-width: 1024px) {
   main {
     .td-content {
diff --git a/docs/src/index.js b/docs/src/index.js
index b3fac6050e22..b1ce364fc45b 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.sortable');
+    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');