From 85092d6a36987ba944b2774858993b631b4f1d06 Mon Sep 17 00:00:00 2001
From: Chaitanya Deorukhkar <deorukhkarchaitanya@gmail.com>
Date: Fri, 24 Nov 2023 14:46:21 +0530
Subject: [PATCH] add tests for isLoading and isRefreshing

---
 .../Table/__tests__/Table.web.test.tsx        |  132 +
 .../__snapshots__/Table.web.test.tsx.snap     | 3065 +++++++++++++----
 2 files changed, 2591 insertions(+), 606 deletions(-)

diff --git a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx
index 6184e430909..ff7b1c82663 100644
--- a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx
+++ b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx
@@ -387,6 +387,138 @@ describe('<Table />', () => {
     expect(container).toMatchSnapshot();
   });
 
+  it('should render table with surfaceLevel', () => {
+    const { container } = renderWithTheme(
+      <Table data={{ nodes: nodes.slice(0, 2) }} surfaceLevel={3}>
+        {(tableData) => (
+          <>
+            <TableHeader>
+              <TableHeaderRow>
+                <TableHeaderCell>Payment ID</TableHeaderCell>
+                <TableHeaderCell>Amount</TableHeaderCell>
+                <TableHeaderCell>Status</TableHeaderCell>
+                <TableHeaderCell>Type</TableHeaderCell>
+                <TableHeaderCell>Method</TableHeaderCell>
+                <TableHeaderCell>Name</TableHeaderCell>
+              </TableHeaderRow>
+            </TableHeader>
+            <TableBody>
+              {tableData.map((tableItem, index) => (
+                <TableRow item={tableItem} key={index}>
+                  <TableCell>{tableItem.paymentId}</TableCell>
+                  <TableCell>{tableItem.amount}</TableCell>
+                  <TableCell>{tableItem.status}</TableCell>
+                  <TableCell>{tableItem.type}</TableCell>
+                  <TableCell>{tableItem.method}</TableCell>
+                  <TableCell>{tableItem.name}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+            <TableFooter>
+              <TableFooterRow>
+                <TableFooterCell>-</TableFooterCell>
+                <TableFooterCell>-</TableFooterCell>
+                <TableFooterCell>-</TableFooterCell>
+                <TableFooterCell>-</TableFooterCell>
+                <TableFooterCell>-</TableFooterCell>
+                <TableFooterCell>-</TableFooterCell>
+              </TableFooterRow>
+            </TableFooter>
+          </>
+        )}
+      </Table>,
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should render table with isLoading', () => {
+    const { container } = renderWithTheme(
+      <Table data={{ nodes: nodes.slice(0, 2) }} isLoading={true}>
+        {(tableData) => (
+          <>
+            <TableHeader>
+              <TableHeaderRow>
+                <TableHeaderCell>Payment ID</TableHeaderCell>
+                <TableHeaderCell>Amount</TableHeaderCell>
+                <TableHeaderCell>Status</TableHeaderCell>
+                <TableHeaderCell>Type</TableHeaderCell>
+                <TableHeaderCell>Method</TableHeaderCell>
+                <TableHeaderCell>Name</TableHeaderCell>
+              </TableHeaderRow>
+            </TableHeader>
+            <TableBody>
+              {tableData.map((tableItem, index) => (
+                <TableRow item={tableItem} key={index}>
+                  <TableCell>{tableItem.paymentId}</TableCell>
+                  <TableCell>{tableItem.amount}</TableCell>
+                  <TableCell>{tableItem.status}</TableCell>
+                  <TableCell>{tableItem.type}</TableCell>
+                  <TableCell>{tableItem.method}</TableCell>
+                  <TableCell>{tableItem.name}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+            <TableFooter>
+              <TableFooterRow>
+                <TableFooterCell>-</TableFooterCell>
+                <TableFooterCell>-</TableFooterCell>
+                <TableFooterCell>-</TableFooterCell>
+                <TableFooterCell>-</TableFooterCell>
+                <TableFooterCell>-</TableFooterCell>
+                <TableFooterCell>-</TableFooterCell>
+              </TableFooterRow>
+            </TableFooter>
+          </>
+        )}
+      </Table>,
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should render table with isRefreshing', () => {
+    const { container } = renderWithTheme(
+      <Table data={{ nodes: nodes.slice(0, 2) }} isRefreshing={true}>
+        {(tableData) => (
+          <>
+            <TableHeader>
+              <TableHeaderRow>
+                <TableHeaderCell>Payment ID</TableHeaderCell>
+                <TableHeaderCell>Amount</TableHeaderCell>
+                <TableHeaderCell>Status</TableHeaderCell>
+                <TableHeaderCell>Type</TableHeaderCell>
+                <TableHeaderCell>Method</TableHeaderCell>
+                <TableHeaderCell>Name</TableHeaderCell>
+              </TableHeaderRow>
+            </TableHeader>
+            <TableBody>
+              {tableData.map((tableItem, index) => (
+                <TableRow item={tableItem} key={index}>
+                  <TableCell>{tableItem.paymentId}</TableCell>
+                  <TableCell>{tableItem.amount}</TableCell>
+                  <TableCell>{tableItem.status}</TableCell>
+                  <TableCell>{tableItem.type}</TableCell>
+                  <TableCell>{tableItem.method}</TableCell>
+                  <TableCell>{tableItem.name}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+            <TableFooter>
+              <TableFooterRow>
+                <TableFooterCell>-</TableFooterCell>
+                <TableFooterCell>-</TableFooterCell>
+                <TableFooterCell>-</TableFooterCell>
+                <TableFooterCell>-</TableFooterCell>
+                <TableFooterCell>-</TableFooterCell>
+                <TableFooterCell>-</TableFooterCell>
+              </TableFooterRow>
+            </TableFooter>
+          </>
+        )}
+      </Table>,
+    );
+    expect(container).toMatchSnapshot();
+  });
+
   it('should render table with sticky header, footer & first column', () => {
     const { container } = renderWithTheme(
       <Table
diff --git a/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap b/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap
index 6f4c54290ff..ff5d47047ea 100644
--- a/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap
+++ b/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap
@@ -2211,7 +2211,105 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
 </div>
 `;
 
-exports[`<Table /> should render table with showStripedRows 1`] = `
+exports[`<Table /> should render table with isLoading 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c2 {
+  padding: 1px;
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-animation: eoUyJr 900ms cubic-bezier(0.5,0,0.3,1.5) infinite;
+  animation: eoUyJr 900ms cubic-bezier(0.5,0,0.3,1.5) infinite;
+}
+
+<div>
+  <div
+    class="c0"
+    data-blade-component="table"
+  >
+    <div
+      class=""
+      data-blade-component="spinner"
+    >
+      <div
+        aria-label="Loading Table"
+        class="c1"
+        data-blade-component="base-box"
+        role="progressbar"
+      >
+        <div
+          class=" c2"
+          data-blade-component="base-box"
+        >
+          <svg
+            aria-hidden="true"
+            class="Svgweb__StyledSvg-vcmjs8-0"
+            data-blade-component="icon"
+            fill="none"
+            height="20px"
+            viewBox="0 0 24 24"
+            width="20px"
+          >
+            <path
+              d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
+              data-blade-component="svg-path"
+              fill="hsla(217, 18%, 45%, 1)"
+              fill-opacity="0.2"
+            />
+            <path
+              d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
+              data-blade-component="svg-path"
+              fill="hsla(217, 18%, 45%, 1)"
+            />
+            <path
+              d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
+              data-blade-component="svg-path"
+              fill="hsla(217, 18%, 45%, 1)"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<Table /> should render table with isRefreshing 1`] = `
 .c0 {
   -webkit-flex: 1;
   -ms-flex: 1;
@@ -2219,7 +2317,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
   position: relative;
 }
 
-.c7 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2228,10 +2326,44 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  position: absolute;
+  z-index: 3;
   height: 100%;
+  width: 100%;
+  background-color: hsla(214,15%,18%,0.64);
 }
 
-.c8 {
+.c3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c11 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  height: 100%;
+}
+
+.c12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2246,7 +2378,20 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
   pointer-events: auto;
 }
 
-.c3 {
+.c4 {
+  padding: 1px;
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-animation: eoUyJr 900ms cubic-bezier(0.5,0,0.3,1.5) infinite;
+  animation: eoUyJr 900ms cubic-bezier(0.5,0,0.3,1.5) infinite;
+}
+
+.c7 {
   color: hsla(217,56%,17%,1);
   font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
   font-size: 0.875rem;
@@ -2259,7 +2404,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
   padding: 0;
 }
 
-.c10 {
+.c14 {
   color: hsla(217,56%,17%,1);
   font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
   font-size: 0.875rem;
@@ -2272,61 +2417,59 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
   padding: 0;
 }
 
-.c4.c4.c4 {
+.c2 {
+  opacity: 1;
+  -webkit-transition: opacity 200ms;
+  transition: opacity 200ms;
+}
+
+.c8.c8.c8 {
   border: none;
   -webkit-transition: background-color 150ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 150ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c4.c4.c4 tr:last-child .cell-wrapper {
+.c8.c8.c8 tr:last-child .cell-wrapper {
   border-bottom: none;
 }
 
-.c4.c4.c4 .row-select-single-selected .cell-wrapper-base,
-.c4.c4.c4 .row-select-selected .cell-wrapper-base {
+.c8.c8.c8 .row-select-single-selected .cell-wrapper-base,
+.c8.c8.c8 .row-select-selected .cell-wrapper-base {
   background-color: hsla(218,89%,51%,0.09);
 }
 
-.c4.c4.c4 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base,
-.c4.c4.c4 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base {
+.c8.c8.c8 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base,
+.c8.c8.c8 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base {
   background-color: hsla(218,89%,51%,0.18);
 }
 
-.c4.c4.c4 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base,
-.c4.c4.c4 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base {
+.c8.c8.c8 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base,
+.c8.c8.c8 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base {
   background-color: hsla(218,89%,51%,0.09);
 }
 
-.c4.c4.c4 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base,
-.c4.c4.c4 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base {
+.c8.c8.c8 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base,
+.c8.c8.c8 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base {
   background-color: hsla(218,89%,51%,0.18);
 }
 
-.c4.c4.c4 tr:nth-child(even) .cell-wrapper {
-  background-color: hsla(216,15%,54%,0.09);
-}
-
-.c4.c4.c4 tr:nth-child(even) .cell-wrapper-base {
-  background-color: transparent;
-}
-
-.c6.c6.c6 {
+.c10.c10.c10 {
   height: 100%;
   background-color: hsla(0,0%,100%,1);
 }
 
-.c6.c6.c6 > div:first-child {
+.c10.c10.c10 > div:first-child {
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
 }
 
-.c6.c6.c6:focus-visible {
+.c10.c10.c10:focus-visible {
   outline: none;
   box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18) inset;
 }
 
-.c9.c9.c9 {
+.c13.c13.c13 {
   -webkit-transition: background-color 150ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 150ms cubic-bezier(0.3,0,0.2,1);
   background-color: transparent;
@@ -2335,26 +2478,29 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
   padding-left: 12px;
   padding-right: 12px;
   height: 100%;
+  border-bottom-width: 1px;
+  border-bottom-color: hsla(216,15%,54%,0.18);
+  border-bottom-style: solid;
 }
 
-.c5.c5.c5 {
+.c9.c9.c9 {
   background-color: transparent;
 }
 
-.c5.c5.c5:focus {
+.c9.c9.c9:focus {
   outline: none;
   box-shadow: 0 0 0 2px hsla(218,89%,51%,0.09);
 }
 
-.c11.c11.c11 {
+.c15.c15.c15 {
   background-color: hsla(216,15%,54%,0.09);
 }
 
-.c11.c11.c11 tr:last-child th {
+.c15.c15.c15 tr:last-child th {
   border-bottom: none;
 }
 
-.c12.c12.c12 {
+.c16.c16.c16 {
   height: 100%;
   background-color: hsla(0,0%,100%,1);
   border-bottom-width: 1px;
@@ -2365,7 +2511,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
   border-top-style: solid;
 }
 
-.c12.c12.c12 > div {
+.c16.c16.c16 > div {
   background-color: hsla(216,15%,54%,0.09);
   display: -webkit-box;
   display: -webkit-flex;
@@ -2381,11 +2527,11 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
   padding-right: 12px;
 }
 
-.c1.c1.c1 tr:first-child th {
+.c5.c5.c5 tr:first-child th {
   border-top: none;
 }
 
-.c2.c2.c2 {
+.c6.c6.c6 {
   background-color: hsla(0,0%,100%,1);
   height: 100%;
   border-bottom-width: 1px;
@@ -2397,7 +2543,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
   cursor: auto;
 }
 
-.c2.c2.c2 > div {
+.c6.c6.c6 > div {
   background-color: hsla(216,15%,54%,0.09);
   display: -webkit-box;
   display: -webkit-flex;
@@ -2421,37 +2567,37 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
   padding-right: 12px;
 }
 
-.c2.c2.c2:focus-visible {
+.c6.c6.c6:focus-visible {
   box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18) inset;
   outline: none;
 }
 
 @media screen and (min-width:320px) {
-  .c8 {
+  .c12 {
     pointer-events: auto;
   }
 }
 
 @media screen and (min-width:480px) {
-  .c8 {
+  .c12 {
     pointer-events: auto;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c8 {
+  .c12 {
     pointer-events: auto;
   }
 }
 
 @media screen and (min-width:1024px) {
-  .c8 {
+  .c12 {
     pointer-events: auto;
   }
 }
 
 @media screen and (min-width:1200px) {
-  .c8 {
+  .c12 {
     pointer-events: auto;
   }
 }
@@ -2461,6 +2607,54 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
     class="c0"
     data-blade-component="table"
   >
+    <div
+      class="c1 c2"
+      data-blade-component="base-box"
+    >
+      <div
+        class=""
+        data-blade-component="spinner"
+      >
+        <div
+          aria-label="Refreshing Table"
+          class="c3"
+          data-blade-component="base-box"
+          role="progressbar"
+        >
+          <div
+            class=" c4"
+            data-blade-component="base-box"
+          >
+            <svg
+              aria-hidden="true"
+              class="Svgweb__StyledSvg-vcmjs8-0"
+              data-blade-component="icon"
+              fill="none"
+              height="20px"
+              viewBox="0 0 24 24"
+              width="20px"
+            >
+              <path
+                d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
+                data-blade-component="svg-path"
+                fill="hsla(0, 0%, 100%, 1)"
+                fill-opacity="0.2"
+              />
+              <path
+                d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
+                data-blade-component="svg-path"
+                fill="hsla(0, 0%, 100%, 1)"
+              />
+              <path
+                d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
+                data-blade-component="svg-path"
+                fill="hsla(0, 0%, 100%, 1)"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
     <table
       class="css-1ja8l55-Table"
       data-blade-component="table"
@@ -2469,7 +2663,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
       style="--data-table-library_grid-template-columns: 150px 150px 150px 150px 150px 150px;"
     >
       <thead
-        class="c1 css-1a28xfp-Header"
+        class="c5 css-1a28xfp-Header"
         data-blade-component="table-header"
         role="rowgroup"
       >
@@ -2480,7 +2674,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           role="rowheader"
         >
           <th
-            class="th c2 css-96zqc6-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c6 css-96zqc6-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-header-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -2490,7 +2684,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <p
-                class="c3"
+                class="c7"
                 data-blade-component="text"
               >
                 Payment ID
@@ -2498,7 +2692,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             </div>
           </th>
           <th
-            class="th c2 css-96zqc6-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c6 css-96zqc6-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-header-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -2508,7 +2702,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <p
-                class="c3"
+                class="c7"
                 data-blade-component="text"
               >
                 Amount
@@ -2516,7 +2710,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             </div>
           </th>
           <th
-            class="th c2 css-96zqc6-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c6 css-96zqc6-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-header-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -2526,7 +2720,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <p
-                class="c3"
+                class="c7"
                 data-blade-component="text"
               >
                 Status
@@ -2534,7 +2728,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             </div>
           </th>
           <th
-            class="th c2 css-96zqc6-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c6 css-96zqc6-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-header-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -2544,7 +2738,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <p
-                class="c3"
+                class="c7"
                 data-blade-component="text"
               >
                 Type
@@ -2552,7 +2746,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             </div>
           </th>
           <th
-            class="th c2 css-96zqc6-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c6 css-96zqc6-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-header-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -2562,7 +2756,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <p
-                class="c3"
+                class="c7"
                 data-blade-component="text"
               >
                 Method
@@ -2570,7 +2764,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             </div>
           </th>
           <th
-            class="th c2 css-96zqc6-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c6 css-96zqc6-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-header-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -2580,7 +2774,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <p
-                class="c3"
+                class="c7"
                 data-blade-component="text"
               >
                 Name
@@ -2590,18 +2784,18 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
         </tr>
       </thead>
       <tbody
-        class="c4 css-8eb0m3-Body"
+        class="c8 css-8eb0m3-Body"
         data-blade-component="table-body"
         data-table-library_body=""
       >
         <tr
-          class="tr tr-body c5 css-1rzx1gz-getRowContainerStyle-Row"
+          class="tr tr-body c9 css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
           data-table-library_tr-body=""
           role="row"
         >
           <td
-            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c10 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -2609,16 +2803,16 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <div
-                class="c7 cell-wrapper-base"
+                class="c11 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c8 c9 cell-wrapper"
+                  class="c12 c13 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c10"
+                    class="c14"
                     data-blade-component="text"
                   >
                     rzp01
@@ -2628,7 +2822,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             </div>
           </td>
           <td
-            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c10 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -2636,11 +2830,11 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <div
-                class="c7 cell-wrapper-base"
+                class="c11 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c8 c9 cell-wrapper"
+                  class="c12 c13 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
@@ -2650,7 +2844,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             </div>
           </td>
           <td
-            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c10 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -2658,16 +2852,16 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <div
-                class="c7 cell-wrapper-base"
+                class="c11 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c8 c9 cell-wrapper"
+                  class="c12 c13 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c10"
+                    class="c14"
                     data-blade-component="text"
                   >
                     pending
@@ -2677,7 +2871,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             </div>
           </td>
           <td
-            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c10 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -2685,16 +2879,16 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <div
-                class="c7 cell-wrapper-base"
+                class="c11 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c8 c9 cell-wrapper"
+                  class="c12 c13 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c10"
+                    class="c14"
                     data-blade-component="text"
                   >
                     credit
@@ -2704,7 +2898,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             </div>
           </td>
           <td
-            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c10 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -2712,16 +2906,16 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <div
-                class="c7 cell-wrapper-base"
+                class="c11 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c8 c9 cell-wrapper"
+                  class="c12 c13 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c10"
+                    class="c14"
                     data-blade-component="text"
                   >
                     Netbanking
@@ -2731,7 +2925,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             </div>
           </td>
           <td
-            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c10 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -2739,16 +2933,16 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <div
-                class="c7 cell-wrapper-base"
+                class="c11 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c8 c9 cell-wrapper"
+                  class="c12 c13 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c10"
+                    class="c14"
                     data-blade-component="text"
                   >
                     John Doe
@@ -2759,13 +2953,13 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           </td>
         </tr>
         <tr
-          class="tr tr-body c5 css-1rzx1gz-getRowContainerStyle-Row"
+          class="tr tr-body c9 css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
           data-table-library_tr-body=""
           role="row"
         >
           <td
-            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c10 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -2773,16 +2967,16 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <div
-                class="c7 cell-wrapper-base"
+                class="c11 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c8 c9 cell-wrapper"
+                  class="c12 c13 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c10"
+                    class="c14"
                     data-blade-component="text"
                   >
                     rzp02
@@ -2792,7 +2986,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             </div>
           </td>
           <td
-            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c10 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -2800,11 +2994,11 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <div
-                class="c7 cell-wrapper-base"
+                class="c11 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c8 c9 cell-wrapper"
+                  class="c12 c13 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
@@ -2814,7 +3008,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             </div>
           </td>
           <td
-            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c10 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -2822,16 +3016,16 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <div
-                class="c7 cell-wrapper-base"
+                class="c11 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c8 c9 cell-wrapper"
+                  class="c12 c13 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c10"
+                    class="c14"
                     data-blade-component="text"
                   >
                     pending
@@ -2841,7 +3035,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             </div>
           </td>
           <td
-            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c10 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -2849,16 +3043,16 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <div
-                class="c7 cell-wrapper-base"
+                class="c11 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c8 c9 cell-wrapper"
+                  class="c12 c13 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c10"
+                    class="c14"
                     data-blade-component="text"
                   >
                     credit
@@ -2868,7 +3062,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             </div>
           </td>
           <td
-            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c10 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -2876,16 +3070,16 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <div
-                class="c7 cell-wrapper-base"
+                class="c11 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c8 c9 cell-wrapper"
+                  class="c12 c13 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c10"
+                    class="c14"
                     data-blade-component="text"
                   >
                     UPI
@@ -2895,7 +3089,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             </div>
           </td>
           <td
-            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c10 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -2903,16 +3097,16 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <div
-                class="c7 cell-wrapper-base"
+                class="c11 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c8 c9 cell-wrapper"
+                  class="c12 c13 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c10"
+                    class="c14"
                     data-blade-component="text"
                   >
                     Jane Doe
@@ -2924,7 +3118,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
         </tr>
       </tbody>
       <tfoot
-        class="c11 css-1a28xfp-Header"
+        class="c15 css-1a28xfp-Header"
         data-blade-component="table-footer"
         role="rowgroup"
       >
@@ -2935,7 +3129,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           role="rowfooter"
         >
           <th
-            class="th c12 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c16 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -2944,7 +3138,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <p
-                class="c3"
+                class="c7"
                 data-blade-component="text"
               >
                 -
@@ -2952,7 +3146,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             </div>
           </th>
           <th
-            class="th c12 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c16 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -2961,7 +3155,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <p
-                class="c3"
+                class="c7"
                 data-blade-component="text"
               >
                 -
@@ -2969,7 +3163,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             </div>
           </th>
           <th
-            class="th c12 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c16 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -2978,7 +3172,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <p
-                class="c3"
+                class="c7"
                 data-blade-component="text"
               >
                 -
@@ -2986,7 +3180,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             </div>
           </th>
           <th
-            class="th c12 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c16 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -2995,7 +3189,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <p
-                class="c3"
+                class="c7"
                 data-blade-component="text"
               >
                 -
@@ -3003,7 +3197,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             </div>
           </th>
           <th
-            class="th c12 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c16 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -3012,7 +3206,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <p
-                class="c3"
+                class="c7"
                 data-blade-component="text"
               >
                 -
@@ -3020,7 +3214,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
             </div>
           </th>
           <th
-            class="th c12 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c16 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -3029,7 +3223,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           >
             <div>
               <p
-                class="c3"
+                class="c7"
                 data-blade-component="text"
               >
                 -
@@ -3043,7 +3237,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
 </div>
 `;
 
-exports[`<Table /> should render table with sticky header, footer & first column 1`] = `
+exports[`<Table /> should render table with showStripedRows 1`] = `
 .c0 {
   -webkit-flex: 1;
   -ms-flex: 1;
@@ -3051,7 +3245,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
   position: relative;
 }
 
-.c8 {
+.c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3063,7 +3257,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
   height: 100%;
 }
 
-.c9 {
+.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3078,7 +3272,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
   pointer-events: auto;
 }
 
-.c4 {
+.c3 {
   color: hsla(217,56%,17%,1);
   font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
   font-size: 0.875rem;
@@ -3091,7 +3285,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
   padding: 0;
 }
 
-.c11 {
+.c10 {
   color: hsla(217,56%,17%,1);
   font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
   font-size: 0.875rem;
@@ -3104,57 +3298,61 @@ exports[`<Table /> should render table with sticky header, footer & first column
   padding: 0;
 }
 
-.c1.c1.c1 {
-  height: 300px;
-}
-
-.c5.c5.c5 {
+.c4.c4.c4 {
   border: none;
   -webkit-transition: background-color 150ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 150ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c5.c5.c5 tr:last-child .cell-wrapper {
+.c4.c4.c4 tr:last-child .cell-wrapper {
   border-bottom: none;
 }
 
-.c5.c5.c5 .row-select-single-selected .cell-wrapper-base,
-.c5.c5.c5 .row-select-selected .cell-wrapper-base {
+.c4.c4.c4 .row-select-single-selected .cell-wrapper-base,
+.c4.c4.c4 .row-select-selected .cell-wrapper-base {
   background-color: hsla(218,89%,51%,0.09);
 }
 
-.c5.c5.c5 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base,
-.c5.c5.c5 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base {
+.c4.c4.c4 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base,
+.c4.c4.c4 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base {
   background-color: hsla(218,89%,51%,0.18);
 }
 
-.c5.c5.c5 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base,
-.c5.c5.c5 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base {
+.c4.c4.c4 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base,
+.c4.c4.c4 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base {
   background-color: hsla(218,89%,51%,0.09);
 }
 
-.c5.c5.c5 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base,
-.c5.c5.c5 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base {
+.c4.c4.c4 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base,
+.c4.c4.c4 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base {
   background-color: hsla(218,89%,51%,0.18);
 }
 
-.c7.c7.c7 {
+.c4.c4.c4 tr:nth-child(even) .cell-wrapper {
+  background-color: hsla(216,15%,54%,0.09);
+}
+
+.c4.c4.c4 tr:nth-child(even) .cell-wrapper-base {
+  background-color: transparent;
+}
+
+.c6.c6.c6 {
   height: 100%;
   background-color: hsla(0,0%,100%,1);
 }
 
-.c7.c7.c7 > div:first-child {
+.c6.c6.c6 > div:first-child {
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
 }
 
-.c7.c7.c7:focus-visible {
+.c6.c6.c6:focus-visible {
   outline: none;
   box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18) inset;
 }
 
-.c10.c10.c10 {
+.c9.c9.c9 {
   -webkit-transition: background-color 150ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 150ms cubic-bezier(0.3,0,0.2,1);
   background-color: transparent;
@@ -3163,29 +3361,26 @@ exports[`<Table /> should render table with sticky header, footer & first column
   padding-left: 12px;
   padding-right: 12px;
   height: 100%;
-  border-bottom-width: 1px;
-  border-bottom-color: hsla(216,15%,54%,0.18);
-  border-bottom-style: solid;
 }
 
-.c6.c6.c6 {
+.c5.c5.c5 {
   background-color: transparent;
 }
 
-.c6.c6.c6:focus {
+.c5.c5.c5:focus {
   outline: none;
   box-shadow: 0 0 0 2px hsla(218,89%,51%,0.09);
 }
 
-.c12.c12.c12 {
+.c11.c11.c11 {
   background-color: hsla(216,15%,54%,0.09);
 }
 
-.c12.c12.c12 tr:last-child th {
+.c11.c11.c11 tr:last-child th {
   border-bottom: none;
 }
 
-.c13.c13.c13 {
+.c12.c12.c12 {
   height: 100%;
   background-color: hsla(0,0%,100%,1);
   border-bottom-width: 1px;
@@ -3196,7 +3391,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
   border-top-style: solid;
 }
 
-.c13.c13.c13 > div {
+.c12.c12.c12 > div {
   background-color: hsla(216,15%,54%,0.09);
   display: -webkit-box;
   display: -webkit-flex;
@@ -3212,11 +3407,11 @@ exports[`<Table /> should render table with sticky header, footer & first column
   padding-right: 12px;
 }
 
-.c2.c2.c2 tr:first-child th {
+.c1.c1.c1 tr:first-child th {
   border-top: none;
 }
 
-.c3.c3.c3 {
+.c2.c2.c2 {
   background-color: hsla(0,0%,100%,1);
   height: 100%;
   border-bottom-width: 1px;
@@ -3228,7 +3423,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
   cursor: auto;
 }
 
-.c3.c3.c3 > div {
+.c2.c2.c2 > div {
   background-color: hsla(216,15%,54%,0.09);
   display: -webkit-box;
   display: -webkit-flex;
@@ -3252,37 +3447,37 @@ exports[`<Table /> should render table with sticky header, footer & first column
   padding-right: 12px;
 }
 
-.c3.c3.c3:focus-visible {
+.c2.c2.c2:focus-visible {
   box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18) inset;
   outline: none;
 }
 
 @media screen and (min-width:320px) {
-  .c9 {
+  .c8 {
     pointer-events: auto;
   }
 }
 
 @media screen and (min-width:480px) {
-  .c9 {
+  .c8 {
     pointer-events: auto;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c9 {
+  .c8 {
     pointer-events: auto;
   }
 }
 
 @media screen and (min-width:1024px) {
-  .c9 {
+  .c8 {
     pointer-events: auto;
   }
 }
 
 @media screen and (min-width:1200px) {
-  .c9 {
+  .c8 {
     pointer-events: auto;
   }
 }
@@ -3293,14 +3488,14 @@ exports[`<Table /> should render table with sticky header, footer & first column
     data-blade-component="table"
   >
     <table
-      class="c1 css-adg849-Table"
+      class="css-1ja8l55-Table"
       data-blade-component="table"
       data-table-library_table=""
       role="table"
       style="--data-table-library_grid-template-columns: 150px 150px 150px 150px 150px 150px;"
     >
       <thead
-        class="c2 css-1a28xfp-Header"
+        class="c1 css-1a28xfp-Header"
         data-blade-component="table-header"
         role="rowgroup"
       >
@@ -3311,7 +3506,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
           role="rowheader"
         >
           <th
-            class="th c3 css-2ilrvh-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c2 css-96zqc6-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-header-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -3321,7 +3516,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <p
-                class="c4"
+                class="c3"
                 data-blade-component="text"
               >
                 Payment ID
@@ -3329,7 +3524,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </th>
           <th
-            class="th c3 css-2ilrvh-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c2 css-96zqc6-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-header-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -3339,7 +3534,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <p
-                class="c4"
+                class="c3"
                 data-blade-component="text"
               >
                 Amount
@@ -3347,7 +3542,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </th>
           <th
-            class="th c3 css-2ilrvh-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c2 css-96zqc6-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-header-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -3357,7 +3552,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <p
-                class="c4"
+                class="c3"
                 data-blade-component="text"
               >
                 Status
@@ -3365,7 +3560,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </th>
           <th
-            class="th c3 css-2ilrvh-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c2 css-96zqc6-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-header-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -3375,7 +3570,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <p
-                class="c4"
+                class="c3"
                 data-blade-component="text"
               >
                 Type
@@ -3383,7 +3578,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </th>
           <th
-            class="th c3 css-2ilrvh-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c2 css-96zqc6-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-header-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -3393,7 +3588,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <p
-                class="c4"
+                class="c3"
                 data-blade-component="text"
               >
                 Method
@@ -3401,7 +3596,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </th>
           <th
-            class="th c3 css-2ilrvh-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c2 css-96zqc6-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-header-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -3411,7 +3606,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <p
-                class="c4"
+                class="c3"
                 data-blade-component="text"
               >
                 Name
@@ -3421,18 +3616,18 @@ exports[`<Table /> should render table with sticky header, footer & first column
         </tr>
       </thead>
       <tbody
-        class="c5 css-8eb0m3-Body"
+        class="c4 css-8eb0m3-Body"
         data-blade-component="table-body"
         data-table-library_body=""
       >
         <tr
-          class="tr tr-body c6 css-1rzx1gz-getRowContainerStyle-Row"
+          class="tr tr-body c5 css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
           data-table-library_tr-body=""
           role="row"
         >
           <td
-            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -3440,16 +3635,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c7 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c8 c9 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c10"
                     data-blade-component="text"
                   >
                     rzp01
@@ -3459,7 +3654,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -3467,11 +3662,11 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c7 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c8 c9 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
@@ -3481,7 +3676,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -3489,16 +3684,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c7 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c8 c9 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c10"
                     data-blade-component="text"
                   >
                     pending
@@ -3508,7 +3703,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -3516,16 +3711,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c7 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c8 c9 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c10"
                     data-blade-component="text"
                   >
                     credit
@@ -3535,7 +3730,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -3543,16 +3738,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c7 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c8 c9 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c10"
                     data-blade-component="text"
                   >
                     Netbanking
@@ -3562,7 +3757,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -3570,16 +3765,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c7 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c8 c9 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c10"
                     data-blade-component="text"
                   >
                     John Doe
@@ -3590,13 +3785,13 @@ exports[`<Table /> should render table with sticky header, footer & first column
           </td>
         </tr>
         <tr
-          class="tr tr-body c6 css-1rzx1gz-getRowContainerStyle-Row"
+          class="tr tr-body c5 css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
           data-table-library_tr-body=""
           role="row"
         >
           <td
-            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -3604,16 +3799,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c7 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c8 c9 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c10"
                     data-blade-component="text"
                   >
                     rzp02
@@ -3623,7 +3818,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -3631,11 +3826,11 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c7 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c8 c9 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
@@ -3645,7 +3840,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -3653,16 +3848,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c7 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c8 c9 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c10"
                     data-blade-component="text"
                   >
                     pending
@@ -3672,7 +3867,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -3680,16 +3875,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c7 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c8 c9 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c10"
                     data-blade-component="text"
                   >
                     credit
@@ -3699,7 +3894,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -3707,16 +3902,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c7 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c8 c9 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c10"
                     data-blade-component="text"
                   >
                     UPI
@@ -3726,7 +3921,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -3734,16 +3929,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c7 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c8 c9 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c10"
                     data-blade-component="text"
                   >
                     Jane Doe
@@ -3753,198 +3948,1269 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
         </tr>
+      </tbody>
+      <tfoot
+        class="c11 css-1a28xfp-Header"
+        data-blade-component="table-footer"
+        role="rowgroup"
+      >
         <tr
-          class="tr tr-body c6 css-1rzx1gz-getRowContainerStyle-Row"
-          data-blade-component="table-row"
-          data-table-library_tr-body=""
-          role="row"
+          class="tr tr-footer css-19bs4cg-getHeaderRowContainerStyle-HeaderRow"
+          data-blade-component="table-footer-row"
+          data-table-library_tr-header=""
+          role="rowfooter"
         >
-          <td
-            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
-            data-blade-component="table-cell"
-            data-table-library_td=""
-            role="cell"
-            tabindex="0"
+          <th
+            class="th c12 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            data-blade-component="table-footer-cell"
+            data-hide="false"
+            data-resize-min-width="75"
+            data-table-library_th=""
+            role="columnfooter"
           >
             <div>
-              <div
-                class="c8 cell-wrapper-base"
-                data-blade-component="base-box"
+              <p
+                class="c3"
+                data-blade-component="text"
               >
-                <div
-                  class="c9 c10 cell-wrapper"
-                  data-blade-component="base-box"
-                  pointer-events="auto"
-                >
-                  <p
-                    class="c11"
-                    data-blade-component="text"
-                  >
-                    rzp03
-                  </p>
-                </div>
-              </div>
+                -
+              </p>
             </div>
-          </td>
-          <td
-            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
-            data-blade-component="table-cell"
-            data-table-library_td=""
-            role="cell"
-            tabindex="0"
+          </th>
+          <th
+            class="th c12 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            data-blade-component="table-footer-cell"
+            data-hide="false"
+            data-resize-min-width="75"
+            data-table-library_th=""
+            role="columnfooter"
           >
             <div>
-              <div
-                class="c8 cell-wrapper-base"
-                data-blade-component="base-box"
+              <p
+                class="c3"
+                data-blade-component="text"
               >
-                <div
-                  class="c9 c10 cell-wrapper"
-                  data-blade-component="base-box"
-                  pointer-events="auto"
-                >
-                  120
-                </div>
-              </div>
+                -
+              </p>
             </div>
-          </td>
-          <td
-            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
-            data-blade-component="table-cell"
-            data-table-library_td=""
-            role="cell"
-            tabindex="0"
+          </th>
+          <th
+            class="th c12 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            data-blade-component="table-footer-cell"
+            data-hide="false"
+            data-resize-min-width="75"
+            data-table-library_th=""
+            role="columnfooter"
           >
             <div>
-              <div
-                class="c8 cell-wrapper-base"
-                data-blade-component="base-box"
+              <p
+                class="c3"
+                data-blade-component="text"
               >
-                <div
-                  class="c9 c10 cell-wrapper"
-                  data-blade-component="base-box"
-                  pointer-events="auto"
-                >
-                  <p
-                    class="c11"
-                    data-blade-component="text"
-                  >
-                    failed
-                  </p>
-                </div>
-              </div>
+                -
+              </p>
             </div>
-          </td>
-          <td
-            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
-            data-blade-component="table-cell"
-            data-table-library_td=""
-            role="cell"
-            tabindex="0"
+          </th>
+          <th
+            class="th c12 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            data-blade-component="table-footer-cell"
+            data-hide="false"
+            data-resize-min-width="75"
+            data-table-library_th=""
+            role="columnfooter"
           >
             <div>
-              <div
-                class="c8 cell-wrapper-base"
-                data-blade-component="base-box"
+              <p
+                class="c3"
+                data-blade-component="text"
               >
-                <div
-                  class="c9 c10 cell-wrapper"
-                  data-blade-component="base-box"
-                  pointer-events="auto"
-                >
-                  <p
-                    class="c11"
-                    data-blade-component="text"
-                  >
-                    debit
-                  </p>
-                </div>
-              </div>
+                -
+              </p>
             </div>
-          </td>
-          <td
-            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
-            data-blade-component="table-cell"
-            data-table-library_td=""
-            role="cell"
-            tabindex="0"
+          </th>
+          <th
+            class="th c12 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            data-blade-component="table-footer-cell"
+            data-hide="false"
+            data-resize-min-width="75"
+            data-table-library_th=""
+            role="columnfooter"
           >
             <div>
-              <div
-                class="c8 cell-wrapper-base"
-                data-blade-component="base-box"
+              <p
+                class="c3"
+                data-blade-component="text"
               >
-                <div
-                  class="c9 c10 cell-wrapper"
-                  data-blade-component="base-box"
-                  pointer-events="auto"
-                >
-                  <p
-                    class="c11"
-                    data-blade-component="text"
-                  >
-                    Debit Card
-                  </p>
-                </div>
-              </div>
+                -
+              </p>
             </div>
-          </td>
-          <td
-            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
-            data-blade-component="table-cell"
-            data-table-library_td=""
-            role="cell"
-            tabindex="0"
+          </th>
+          <th
+            class="th c12 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            data-blade-component="table-footer-cell"
+            data-hide="false"
+            data-resize-min-width="75"
+            data-table-library_th=""
+            role="columnfooter"
           >
             <div>
-              <div
-                class="c8 cell-wrapper-base"
-                data-blade-component="base-box"
+              <p
+                class="c3"
+                data-blade-component="text"
               >
-                <div
-                  class="c9 c10 cell-wrapper"
-                  data-blade-component="base-box"
-                  pointer-events="auto"
-                >
-                  <p
-                    class="c11"
-                    data-blade-component="text"
-                  >
-                    Alice Smith
-                  </p>
-                </div>
-              </div>
+                -
+              </p>
             </div>
-          </td>
+          </th>
         </tr>
-        <tr
-          class="tr tr-body c6 css-1rzx1gz-getRowContainerStyle-Row"
-          data-blade-component="table-row"
-          data-table-library_tr-body=""
-          role="row"
-        >
-          <td
-            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
-            data-blade-component="table-cell"
-            data-table-library_td=""
-            role="cell"
-            tabindex="0"
-          >
-            <div>
-              <div
-                class="c8 cell-wrapper-base"
-                data-blade-component="base-box"
-              >
-                <div
-                  class="c9 c10 cell-wrapper"
-                  data-blade-component="base-box"
-                  pointer-events="auto"
-                >
-                  <p
-                    class="c11"
-                    data-blade-component="text"
-                  >
-                    rzp04
+      </tfoot>
+    </table>
+  </div>
+</div>
+`;
+
+exports[`<Table /> should render table with sticky header, footer & first column 1`] = `
+.c0 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  position: relative;
+}
+
+.c8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  height: 100%;
+}
+
+.c9 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  pointer-events: auto;
+}
+
+.c4 {
+  color: hsla(217,56%,17%,1);
+  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-size: 0.875rem;
+  font-weight: 700;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 1.25rem;
+  margin: 0;
+  padding: 0;
+}
+
+.c11 {
+  color: hsla(217,56%,17%,1);
+  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-size: 0.875rem;
+  font-weight: 400;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 1.25rem;
+  margin: 0;
+  padding: 0;
+}
+
+.c1.c1.c1 {
+  height: 300px;
+}
+
+.c5.c5.c5 {
+  border: none;
+  -webkit-transition: background-color 150ms cubic-bezier(0.3,0,0.2,1);
+  transition: background-color 150ms cubic-bezier(0.3,0,0.2,1);
+}
+
+.c5.c5.c5 tr:last-child .cell-wrapper {
+  border-bottom: none;
+}
+
+.c5.c5.c5 .row-select-single-selected .cell-wrapper-base,
+.c5.c5.c5 .row-select-selected .cell-wrapper-base {
+  background-color: hsla(218,89%,51%,0.09);
+}
+
+.c5.c5.c5 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base,
+.c5.c5.c5 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base {
+  background-color: hsla(218,89%,51%,0.18);
+}
+
+.c5.c5.c5 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base,
+.c5.c5.c5 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base {
+  background-color: hsla(218,89%,51%,0.09);
+}
+
+.c5.c5.c5 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base,
+.c5.c5.c5 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base {
+  background-color: hsla(218,89%,51%,0.18);
+}
+
+.c7.c7.c7 {
+  height: 100%;
+  background-color: hsla(0,0%,100%,1);
+}
+
+.c7.c7.c7 > div:first-child {
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c7.c7.c7:focus-visible {
+  outline: none;
+  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18) inset;
+}
+
+.c10.c10.c10 {
+  -webkit-transition: background-color 150ms cubic-bezier(0.3,0,0.2,1);
+  transition: background-color 150ms cubic-bezier(0.3,0,0.2,1);
+  background-color: transparent;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  padding-left: 12px;
+  padding-right: 12px;
+  height: 100%;
+  border-bottom-width: 1px;
+  border-bottom-color: hsla(216,15%,54%,0.18);
+  border-bottom-style: solid;
+}
+
+.c6.c6.c6 {
+  background-color: transparent;
+}
+
+.c6.c6.c6:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px hsla(218,89%,51%,0.09);
+}
+
+.c12.c12.c12 {
+  background-color: hsla(216,15%,54%,0.09);
+}
+
+.c12.c12.c12 tr:last-child th {
+  border-bottom: none;
+}
+
+.c13.c13.c13 {
+  height: 100%;
+  background-color: hsla(0,0%,100%,1);
+  border-bottom-width: 1px;
+  border-top-width: 1px;
+  border-bottom-color: hsla(216,15%,54%,0.18);
+  border-top-color: hsla(216,15%,54%,0.18);
+  border-bottom-style: solid;
+  border-top-style: solid;
+}
+
+.c13.c13.c13 > div {
+  background-color: hsla(216,15%,54%,0.09);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  height: 100%;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.c2.c2.c2 tr:first-child th {
+  border-top: none;
+}
+
+.c3.c3.c3 {
+  background-color: hsla(0,0%,100%,1);
+  height: 100%;
+  border-bottom-width: 1px;
+  border-top-width: 1px;
+  border-bottom-color: hsla(216,15%,54%,0.18);
+  border-top-color: hsla(216,15%,54%,0.18);
+  border-bottom-style: solid;
+  border-top-style: solid;
+  cursor: auto;
+}
+
+.c3.c3.c3 > div {
+  background-color: hsla(216,15%,54%,0.09);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  height: 100%;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.c3.c3.c3:focus-visible {
+  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18) inset;
+  outline: none;
+}
+
+@media screen and (min-width:320px) {
+  .c9 {
+    pointer-events: auto;
+  }
+}
+
+@media screen and (min-width:480px) {
+  .c9 {
+    pointer-events: auto;
+  }
+}
+
+@media screen and (min-width:768px) {
+  .c9 {
+    pointer-events: auto;
+  }
+}
+
+@media screen and (min-width:1024px) {
+  .c9 {
+    pointer-events: auto;
+  }
+}
+
+@media screen and (min-width:1200px) {
+  .c9 {
+    pointer-events: auto;
+  }
+}
+
+<div>
+  <div
+    class="c0"
+    data-blade-component="table"
+  >
+    <table
+      class="c1 css-adg849-Table"
+      data-blade-component="table"
+      data-table-library_table=""
+      role="table"
+      style="--data-table-library_grid-template-columns: 150px 150px 150px 150px 150px 150px;"
+    >
+      <thead
+        class="c2 css-1a28xfp-Header"
+        data-blade-component="table-header"
+        role="rowgroup"
+      >
+        <tr
+          class="tr tr-header css-19bs4cg-getHeaderRowContainerStyle-HeaderRow"
+          data-blade-component="table-header-row"
+          data-table-library_tr-header=""
+          role="rowheader"
+        >
+          <th
+            class="th c3 css-2ilrvh-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            data-blade-component="table-header-cell"
+            data-hide="false"
+            data-resize-min-width="75"
+            data-table-library_th=""
+            role="columnheader"
+            tabindex="0"
+          >
+            <div>
+              <p
+                class="c4"
+                data-blade-component="text"
+              >
+                Payment ID
+              </p>
+            </div>
+          </th>
+          <th
+            class="th c3 css-2ilrvh-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            data-blade-component="table-header-cell"
+            data-hide="false"
+            data-resize-min-width="75"
+            data-table-library_th=""
+            role="columnheader"
+            tabindex="0"
+          >
+            <div>
+              <p
+                class="c4"
+                data-blade-component="text"
+              >
+                Amount
+              </p>
+            </div>
+          </th>
+          <th
+            class="th c3 css-2ilrvh-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            data-blade-component="table-header-cell"
+            data-hide="false"
+            data-resize-min-width="75"
+            data-table-library_th=""
+            role="columnheader"
+            tabindex="0"
+          >
+            <div>
+              <p
+                class="c4"
+                data-blade-component="text"
+              >
+                Status
+              </p>
+            </div>
+          </th>
+          <th
+            class="th c3 css-2ilrvh-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            data-blade-component="table-header-cell"
+            data-hide="false"
+            data-resize-min-width="75"
+            data-table-library_th=""
+            role="columnheader"
+            tabindex="0"
+          >
+            <div>
+              <p
+                class="c4"
+                data-blade-component="text"
+              >
+                Type
+              </p>
+            </div>
+          </th>
+          <th
+            class="th c3 css-2ilrvh-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            data-blade-component="table-header-cell"
+            data-hide="false"
+            data-resize-min-width="75"
+            data-table-library_th=""
+            role="columnheader"
+            tabindex="0"
+          >
+            <div>
+              <p
+                class="c4"
+                data-blade-component="text"
+              >
+                Method
+              </p>
+            </div>
+          </th>
+          <th
+            class="th c3 css-2ilrvh-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            data-blade-component="table-header-cell"
+            data-hide="false"
+            data-resize-min-width="75"
+            data-table-library_th=""
+            role="columnheader"
+            tabindex="0"
+          >
+            <div>
+              <p
+                class="c4"
+                data-blade-component="text"
+              >
+                Name
+              </p>
+            </div>
+          </th>
+        </tr>
+      </thead>
+      <tbody
+        class="c5 css-8eb0m3-Body"
+        data-blade-component="table-body"
+        data-table-library_body=""
+      >
+        <tr
+          class="tr tr-body c6 css-1rzx1gz-getRowContainerStyle-Row"
+          data-blade-component="table-row"
+          data-table-library_tr-body=""
+          role="row"
+        >
+          <td
+            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            data-blade-component="table-cell"
+            data-table-library_td=""
+            role="cell"
+            tabindex="0"
+          >
+            <div>
+              <div
+                class="c8 cell-wrapper-base"
+                data-blade-component="base-box"
+              >
+                <div
+                  class="c9 c10 cell-wrapper"
+                  data-blade-component="base-box"
+                  pointer-events="auto"
+                >
+                  <p
+                    class="c11"
+                    data-blade-component="text"
+                  >
+                    rzp01
+                  </p>
+                </div>
+              </div>
+            </div>
+          </td>
+          <td
+            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            data-blade-component="table-cell"
+            data-table-library_td=""
+            role="cell"
+            tabindex="0"
+          >
+            <div>
+              <div
+                class="c8 cell-wrapper-base"
+                data-blade-component="base-box"
+              >
+                <div
+                  class="c9 c10 cell-wrapper"
+                  data-blade-component="base-box"
+                  pointer-events="auto"
+                >
+                  100
+                </div>
+              </div>
+            </div>
+          </td>
+          <td
+            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            data-blade-component="table-cell"
+            data-table-library_td=""
+            role="cell"
+            tabindex="0"
+          >
+            <div>
+              <div
+                class="c8 cell-wrapper-base"
+                data-blade-component="base-box"
+              >
+                <div
+                  class="c9 c10 cell-wrapper"
+                  data-blade-component="base-box"
+                  pointer-events="auto"
+                >
+                  <p
+                    class="c11"
+                    data-blade-component="text"
+                  >
+                    pending
+                  </p>
+                </div>
+              </div>
+            </div>
+          </td>
+          <td
+            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            data-blade-component="table-cell"
+            data-table-library_td=""
+            role="cell"
+            tabindex="0"
+          >
+            <div>
+              <div
+                class="c8 cell-wrapper-base"
+                data-blade-component="base-box"
+              >
+                <div
+                  class="c9 c10 cell-wrapper"
+                  data-blade-component="base-box"
+                  pointer-events="auto"
+                >
+                  <p
+                    class="c11"
+                    data-blade-component="text"
+                  >
+                    credit
+                  </p>
+                </div>
+              </div>
+            </div>
+          </td>
+          <td
+            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            data-blade-component="table-cell"
+            data-table-library_td=""
+            role="cell"
+            tabindex="0"
+          >
+            <div>
+              <div
+                class="c8 cell-wrapper-base"
+                data-blade-component="base-box"
+              >
+                <div
+                  class="c9 c10 cell-wrapper"
+                  data-blade-component="base-box"
+                  pointer-events="auto"
+                >
+                  <p
+                    class="c11"
+                    data-blade-component="text"
+                  >
+                    Netbanking
+                  </p>
+                </div>
+              </div>
+            </div>
+          </td>
+          <td
+            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            data-blade-component="table-cell"
+            data-table-library_td=""
+            role="cell"
+            tabindex="0"
+          >
+            <div>
+              <div
+                class="c8 cell-wrapper-base"
+                data-blade-component="base-box"
+              >
+                <div
+                  class="c9 c10 cell-wrapper"
+                  data-blade-component="base-box"
+                  pointer-events="auto"
+                >
+                  <p
+                    class="c11"
+                    data-blade-component="text"
+                  >
+                    John Doe
+                  </p>
+                </div>
+              </div>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="tr tr-body c6 css-1rzx1gz-getRowContainerStyle-Row"
+          data-blade-component="table-row"
+          data-table-library_tr-body=""
+          role="row"
+        >
+          <td
+            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            data-blade-component="table-cell"
+            data-table-library_td=""
+            role="cell"
+            tabindex="0"
+          >
+            <div>
+              <div
+                class="c8 cell-wrapper-base"
+                data-blade-component="base-box"
+              >
+                <div
+                  class="c9 c10 cell-wrapper"
+                  data-blade-component="base-box"
+                  pointer-events="auto"
+                >
+                  <p
+                    class="c11"
+                    data-blade-component="text"
+                  >
+                    rzp02
+                  </p>
+                </div>
+              </div>
+            </div>
+          </td>
+          <td
+            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            data-blade-component="table-cell"
+            data-table-library_td=""
+            role="cell"
+            tabindex="0"
+          >
+            <div>
+              <div
+                class="c8 cell-wrapper-base"
+                data-blade-component="base-box"
+              >
+                <div
+                  class="c9 c10 cell-wrapper"
+                  data-blade-component="base-box"
+                  pointer-events="auto"
+                >
+                  240
+                </div>
+              </div>
+            </div>
+          </td>
+          <td
+            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            data-blade-component="table-cell"
+            data-table-library_td=""
+            role="cell"
+            tabindex="0"
+          >
+            <div>
+              <div
+                class="c8 cell-wrapper-base"
+                data-blade-component="base-box"
+              >
+                <div
+                  class="c9 c10 cell-wrapper"
+                  data-blade-component="base-box"
+                  pointer-events="auto"
+                >
+                  <p
+                    class="c11"
+                    data-blade-component="text"
+                  >
+                    pending
+                  </p>
+                </div>
+              </div>
+            </div>
+          </td>
+          <td
+            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            data-blade-component="table-cell"
+            data-table-library_td=""
+            role="cell"
+            tabindex="0"
+          >
+            <div>
+              <div
+                class="c8 cell-wrapper-base"
+                data-blade-component="base-box"
+              >
+                <div
+                  class="c9 c10 cell-wrapper"
+                  data-blade-component="base-box"
+                  pointer-events="auto"
+                >
+                  <p
+                    class="c11"
+                    data-blade-component="text"
+                  >
+                    credit
+                  </p>
+                </div>
+              </div>
+            </div>
+          </td>
+          <td
+            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            data-blade-component="table-cell"
+            data-table-library_td=""
+            role="cell"
+            tabindex="0"
+          >
+            <div>
+              <div
+                class="c8 cell-wrapper-base"
+                data-blade-component="base-box"
+              >
+                <div
+                  class="c9 c10 cell-wrapper"
+                  data-blade-component="base-box"
+                  pointer-events="auto"
+                >
+                  <p
+                    class="c11"
+                    data-blade-component="text"
+                  >
+                    UPI
+                  </p>
+                </div>
+              </div>
+            </div>
+          </td>
+          <td
+            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            data-blade-component="table-cell"
+            data-table-library_td=""
+            role="cell"
+            tabindex="0"
+          >
+            <div>
+              <div
+                class="c8 cell-wrapper-base"
+                data-blade-component="base-box"
+              >
+                <div
+                  class="c9 c10 cell-wrapper"
+                  data-blade-component="base-box"
+                  pointer-events="auto"
+                >
+                  <p
+                    class="c11"
+                    data-blade-component="text"
+                  >
+                    Jane Doe
+                  </p>
+                </div>
+              </div>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="tr tr-body c6 css-1rzx1gz-getRowContainerStyle-Row"
+          data-blade-component="table-row"
+          data-table-library_tr-body=""
+          role="row"
+        >
+          <td
+            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            data-blade-component="table-cell"
+            data-table-library_td=""
+            role="cell"
+            tabindex="0"
+          >
+            <div>
+              <div
+                class="c8 cell-wrapper-base"
+                data-blade-component="base-box"
+              >
+                <div
+                  class="c9 c10 cell-wrapper"
+                  data-blade-component="base-box"
+                  pointer-events="auto"
+                >
+                  <p
+                    class="c11"
+                    data-blade-component="text"
+                  >
+                    rzp03
+                  </p>
+                </div>
+              </div>
+            </div>
+          </td>
+          <td
+            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            data-blade-component="table-cell"
+            data-table-library_td=""
+            role="cell"
+            tabindex="0"
+          >
+            <div>
+              <div
+                class="c8 cell-wrapper-base"
+                data-blade-component="base-box"
+              >
+                <div
+                  class="c9 c10 cell-wrapper"
+                  data-blade-component="base-box"
+                  pointer-events="auto"
+                >
+                  120
+                </div>
+              </div>
+            </div>
+          </td>
+          <td
+            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            data-blade-component="table-cell"
+            data-table-library_td=""
+            role="cell"
+            tabindex="0"
+          >
+            <div>
+              <div
+                class="c8 cell-wrapper-base"
+                data-blade-component="base-box"
+              >
+                <div
+                  class="c9 c10 cell-wrapper"
+                  data-blade-component="base-box"
+                  pointer-events="auto"
+                >
+                  <p
+                    class="c11"
+                    data-blade-component="text"
+                  >
+                    failed
+                  </p>
+                </div>
+              </div>
+            </div>
+          </td>
+          <td
+            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            data-blade-component="table-cell"
+            data-table-library_td=""
+            role="cell"
+            tabindex="0"
+          >
+            <div>
+              <div
+                class="c8 cell-wrapper-base"
+                data-blade-component="base-box"
+              >
+                <div
+                  class="c9 c10 cell-wrapper"
+                  data-blade-component="base-box"
+                  pointer-events="auto"
+                >
+                  <p
+                    class="c11"
+                    data-blade-component="text"
+                  >
+                    debit
+                  </p>
+                </div>
+              </div>
+            </div>
+          </td>
+          <td
+            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            data-blade-component="table-cell"
+            data-table-library_td=""
+            role="cell"
+            tabindex="0"
+          >
+            <div>
+              <div
+                class="c8 cell-wrapper-base"
+                data-blade-component="base-box"
+              >
+                <div
+                  class="c9 c10 cell-wrapper"
+                  data-blade-component="base-box"
+                  pointer-events="auto"
+                >
+                  <p
+                    class="c11"
+                    data-blade-component="text"
+                  >
+                    Debit Card
+                  </p>
+                </div>
+              </div>
+            </div>
+          </td>
+          <td
+            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            data-blade-component="table-cell"
+            data-table-library_td=""
+            role="cell"
+            tabindex="0"
+          >
+            <div>
+              <div
+                class="c8 cell-wrapper-base"
+                data-blade-component="base-box"
+              >
+                <div
+                  class="c9 c10 cell-wrapper"
+                  data-blade-component="base-box"
+                  pointer-events="auto"
+                >
+                  <p
+                    class="c11"
+                    data-blade-component="text"
+                  >
+                    Alice Smith
+                  </p>
+                </div>
+              </div>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="tr tr-body c6 css-1rzx1gz-getRowContainerStyle-Row"
+          data-blade-component="table-row"
+          data-table-library_tr-body=""
+          role="row"
+        >
+          <td
+            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            data-blade-component="table-cell"
+            data-table-library_td=""
+            role="cell"
+            tabindex="0"
+          >
+            <div>
+              <div
+                class="c8 cell-wrapper-base"
+                data-blade-component="base-box"
+              >
+                <div
+                  class="c9 c10 cell-wrapper"
+                  data-blade-component="base-box"
+                  pointer-events="auto"
+                >
+                  <p
+                    class="c11"
+                    data-blade-component="text"
+                  >
+                    rzp04
+                  </p>
+                </div>
+              </div>
+            </div>
+          </td>
+          <td
+            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            data-blade-component="table-cell"
+            data-table-library_td=""
+            role="cell"
+            tabindex="0"
+          >
+            <div>
+              <div
+                class="c8 cell-wrapper-base"
+                data-blade-component="base-box"
+              >
+                <div
+                  class="c9 c10 cell-wrapper"
+                  data-blade-component="base-box"
+                  pointer-events="auto"
+                >
+                  300
+                </div>
+              </div>
+            </div>
+          </td>
+          <td
+            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            data-blade-component="table-cell"
+            data-table-library_td=""
+            role="cell"
+            tabindex="0"
+          >
+            <div>
+              <div
+                class="c8 cell-wrapper-base"
+                data-blade-component="base-box"
+              >
+                <div
+                  class="c9 c10 cell-wrapper"
+                  data-blade-component="base-box"
+                  pointer-events="auto"
+                >
+                  <p
+                    class="c11"
+                    data-blade-component="text"
+                  >
+                    completed
+                  </p>
+                </div>
+              </div>
+            </div>
+          </td>
+          <td
+            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            data-blade-component="table-cell"
+            data-table-library_td=""
+            role="cell"
+            tabindex="0"
+          >
+            <div>
+              <div
+                class="c8 cell-wrapper-base"
+                data-blade-component="base-box"
+              >
+                <div
+                  class="c9 c10 cell-wrapper"
+                  data-blade-component="base-box"
+                  pointer-events="auto"
+                >
+                  <p
+                    class="c11"
+                    data-blade-component="text"
+                  >
+                    credit
+                  </p>
+                </div>
+              </div>
+            </div>
+          </td>
+          <td
+            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            data-blade-component="table-cell"
+            data-table-library_td=""
+            role="cell"
+            tabindex="0"
+          >
+            <div>
+              <div
+                class="c8 cell-wrapper-base"
+                data-blade-component="base-box"
+              >
+                <div
+                  class="c9 c10 cell-wrapper"
+                  data-blade-component="base-box"
+                  pointer-events="auto"
+                >
+                  <p
+                    class="c11"
+                    data-blade-component="text"
+                  >
+                    Credit Card
+                  </p>
+                </div>
+              </div>
+            </div>
+          </td>
+          <td
+            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            data-blade-component="table-cell"
+            data-table-library_td=""
+            role="cell"
+            tabindex="0"
+          >
+            <div>
+              <div
+                class="c8 cell-wrapper-base"
+                data-blade-component="base-box"
+              >
+                <div
+                  class="c9 c10 cell-wrapper"
+                  data-blade-component="base-box"
+                  pointer-events="auto"
+                >
+                  <p
+                    class="c11"
+                    data-blade-component="text"
+                  >
+                    Bob Smith
+                  </p>
+                </div>
+              </div>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="tr tr-body c6 css-1rzx1gz-getRowContainerStyle-Row"
+          data-blade-component="table-row"
+          data-table-library_tr-body=""
+          role="row"
+        >
+          <td
+            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            data-blade-component="table-cell"
+            data-table-library_td=""
+            role="cell"
+            tabindex="0"
+          >
+            <div>
+              <div
+                class="c8 cell-wrapper-base"
+                data-blade-component="base-box"
+              >
+                <div
+                  class="c9 c10 cell-wrapper"
+                  data-blade-component="base-box"
+                  pointer-events="auto"
+                >
+                  <p
+                    class="c11"
+                    data-blade-component="text"
+                  >
+                    rzp05
+                  </p>
+                </div>
+              </div>
+            </div>
+          </td>
+          <td
+            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            data-blade-component="table-cell"
+            data-table-library_td=""
+            role="cell"
+            tabindex="0"
+          >
+            <div>
+              <div
+                class="c8 cell-wrapper-base"
+                data-blade-component="base-box"
+              >
+                <div
+                  class="c9 c10 cell-wrapper"
+                  data-blade-component="base-box"
+                  pointer-events="auto"
+                >
+                  200
+                </div>
+              </div>
+            </div>
+          </td>
+          <td
+            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            data-blade-component="table-cell"
+            data-table-library_td=""
+            role="cell"
+            tabindex="0"
+          >
+            <div>
+              <div
+                class="c8 cell-wrapper-base"
+                data-blade-component="base-box"
+              >
+                <div
+                  class="c9 c10 cell-wrapper"
+                  data-blade-component="base-box"
+                  pointer-events="auto"
+                >
+                  <p
+                    class="c11"
+                    data-blade-component="text"
+                  >
+                    completed
+                  </p>
+                </div>
+              </div>
+            </div>
+          </td>
+          <td
+            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            data-blade-component="table-cell"
+            data-table-library_td=""
+            role="cell"
+            tabindex="0"
+          >
+            <div>
+              <div
+                class="c8 cell-wrapper-base"
+                data-blade-component="base-box"
+              >
+                <div
+                  class="c9 c10 cell-wrapper"
+                  data-blade-component="base-box"
+                  pointer-events="auto"
+                >
+                  <p
+                    class="c11"
+                    data-blade-component="text"
+                  >
+                    credit
                   </p>
                 </div>
               </div>
@@ -3967,7 +5233,259 @@ exports[`<Table /> should render table with sticky header, footer & first column
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
-                  300
+                  <p
+                    class="c11"
+                    data-blade-component="text"
+                  >
+                    Netbanking
+                  </p>
+                </div>
+              </div>
+            </div>
+          </td>
+          <td
+            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            data-blade-component="table-cell"
+            data-table-library_td=""
+            role="cell"
+            tabindex="0"
+          >
+            <div>
+              <div
+                class="c8 cell-wrapper-base"
+                data-blade-component="base-box"
+              >
+                <div
+                  class="c9 c10 cell-wrapper"
+                  data-blade-component="base-box"
+                  pointer-events="auto"
+                >
+                  <p
+                    class="c11"
+                    data-blade-component="text"
+                  >
+                    John Doe
+                  </p>
+                </div>
+              </div>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="tr tr-body c6 css-1rzx1gz-getRowContainerStyle-Row"
+          data-blade-component="table-row"
+          data-table-library_tr-body=""
+          role="row"
+        >
+          <td
+            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            data-blade-component="table-cell"
+            data-table-library_td=""
+            role="cell"
+            tabindex="0"
+          >
+            <div>
+              <div
+                class="c8 cell-wrapper-base"
+                data-blade-component="base-box"
+              >
+                <div
+                  class="c9 c10 cell-wrapper"
+                  data-blade-component="base-box"
+                  pointer-events="auto"
+                >
+                  <p
+                    class="c11"
+                    data-blade-component="text"
+                  >
+                    rzp06
+                  </p>
+                </div>
+              </div>
+            </div>
+          </td>
+          <td
+            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            data-blade-component="table-cell"
+            data-table-library_td=""
+            role="cell"
+            tabindex="0"
+          >
+            <div>
+              <div
+                class="c8 cell-wrapper-base"
+                data-blade-component="base-box"
+              >
+                <div
+                  class="c9 c10 cell-wrapper"
+                  data-blade-component="base-box"
+                  pointer-events="auto"
+                >
+                  240
+                </div>
+              </div>
+            </div>
+          </td>
+          <td
+            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            data-blade-component="table-cell"
+            data-table-library_td=""
+            role="cell"
+            tabindex="0"
+          >
+            <div>
+              <div
+                class="c8 cell-wrapper-base"
+                data-blade-component="base-box"
+              >
+                <div
+                  class="c9 c10 cell-wrapper"
+                  data-blade-component="base-box"
+                  pointer-events="auto"
+                >
+                  <p
+                    class="c11"
+                    data-blade-component="text"
+                  >
+                    pending
+                  </p>
+                </div>
+              </div>
+            </div>
+          </td>
+          <td
+            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            data-blade-component="table-cell"
+            data-table-library_td=""
+            role="cell"
+            tabindex="0"
+          >
+            <div>
+              <div
+                class="c8 cell-wrapper-base"
+                data-blade-component="base-box"
+              >
+                <div
+                  class="c9 c10 cell-wrapper"
+                  data-blade-component="base-box"
+                  pointer-events="auto"
+                >
+                  <p
+                    class="c11"
+                    data-blade-component="text"
+                  >
+                    credit
+                  </p>
+                </div>
+              </div>
+            </div>
+          </td>
+          <td
+            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            data-blade-component="table-cell"
+            data-table-library_td=""
+            role="cell"
+            tabindex="0"
+          >
+            <div>
+              <div
+                class="c8 cell-wrapper-base"
+                data-blade-component="base-box"
+              >
+                <div
+                  class="c9 c10 cell-wrapper"
+                  data-blade-component="base-box"
+                  pointer-events="auto"
+                >
+                  <p
+                    class="c11"
+                    data-blade-component="text"
+                  >
+                    UPI
+                  </p>
+                </div>
+              </div>
+            </div>
+          </td>
+          <td
+            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            data-blade-component="table-cell"
+            data-table-library_td=""
+            role="cell"
+            tabindex="0"
+          >
+            <div>
+              <div
+                class="c8 cell-wrapper-base"
+                data-blade-component="base-box"
+              >
+                <div
+                  class="c9 c10 cell-wrapper"
+                  data-blade-component="base-box"
+                  pointer-events="auto"
+                >
+                  <p
+                    class="c11"
+                    data-blade-component="text"
+                  >
+                    Jane Doe
+                  </p>
+                </div>
+              </div>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="tr tr-body c6 css-1rzx1gz-getRowContainerStyle-Row"
+          data-blade-component="table-row"
+          data-table-library_tr-body=""
+          role="row"
+        >
+          <td
+            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            data-blade-component="table-cell"
+            data-table-library_td=""
+            role="cell"
+            tabindex="0"
+          >
+            <div>
+              <div
+                class="c8 cell-wrapper-base"
+                data-blade-component="base-box"
+              >
+                <div
+                  class="c9 c10 cell-wrapper"
+                  data-blade-component="base-box"
+                  pointer-events="auto"
+                >
+                  <p
+                    class="c11"
+                    data-blade-component="text"
+                  >
+                    rzp07
+                  </p>
+                </div>
+              </div>
+            </div>
+          </td>
+          <td
+            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            data-blade-component="table-cell"
+            data-table-library_td=""
+            role="cell"
+            tabindex="0"
+          >
+            <div>
+              <div
+                class="c8 cell-wrapper-base"
+                data-blade-component="base-box"
+              >
+                <div
+                  class="c9 c10 cell-wrapper"
+                  data-blade-component="base-box"
+                  pointer-events="auto"
+                >
+                  120
                 </div>
               </div>
             </div>
@@ -3993,7 +5511,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
                     class="c11"
                     data-blade-component="text"
                   >
-                    completed
+                    failed
                   </p>
                 </div>
               </div>
@@ -4020,7 +5538,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
                     class="c11"
                     data-blade-component="text"
                   >
-                    credit
+                    debit
                   </p>
                 </div>
               </div>
@@ -4047,7 +5565,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
                     class="c11"
                     data-blade-component="text"
                   >
-                    Credit Card
+                    Debit Card
                   </p>
                 </div>
               </div>
@@ -4074,7 +5592,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
                     class="c11"
                     data-blade-component="text"
                   >
-                    Bob Smith
+                    Alice Smith
                   </p>
                 </div>
               </div>
@@ -4108,7 +5626,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
                     class="c11"
                     data-blade-component="text"
                   >
-                    rzp05
+                    rzp08
                   </p>
                 </div>
               </div>
@@ -4131,7 +5649,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
-                  200
+                  300
                 </div>
               </div>
             </div>
@@ -4211,7 +5729,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
                     class="c11"
                     data-blade-component="text"
                   >
-                    Netbanking
+                    Credit Card
                   </p>
                 </div>
               </div>
@@ -4238,7 +5756,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
                     class="c11"
                     data-blade-component="text"
                   >
-                    John Doe
+                    Bob Smith
                   </p>
                 </div>
               </div>
@@ -4272,7 +5790,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
                     class="c11"
                     data-blade-component="text"
                   >
-                    rzp06
+                    rzp09
                   </p>
                 </div>
               </div>
@@ -4295,7 +5813,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
-                  240
+                  200
                 </div>
               </div>
             </div>
@@ -4321,7 +5839,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
                     class="c11"
                     data-blade-component="text"
                   >
-                    pending
+                    completed
                   </p>
                 </div>
               </div>
@@ -4375,7 +5893,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
                     class="c11"
                     data-blade-component="text"
                   >
-                    UPI
+                    Netbanking
                   </p>
                 </div>
               </div>
@@ -4402,7 +5920,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
                     class="c11"
                     data-blade-component="text"
                   >
-                    Jane Doe
+                    John Doe
                   </p>
                 </div>
               </div>
@@ -4436,7 +5954,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
                     class="c11"
                     data-blade-component="text"
                   >
-                    rzp07
+                    rzp10
                   </p>
                 </div>
               </div>
@@ -4459,7 +5977,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
-                  120
+                  240
                 </div>
               </div>
             </div>
@@ -4485,7 +6003,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
                     class="c11"
                     data-blade-component="text"
                   >
-                    failed
+                    pending
                   </p>
                 </div>
               </div>
@@ -4512,7 +6030,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
                     class="c11"
                     data-blade-component="text"
                   >
-                    debit
+                    credit
                   </p>
                 </div>
               </div>
@@ -4539,7 +6057,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
                     class="c11"
                     data-blade-component="text"
                   >
-                    Debit Card
+                    UPI
                   </p>
                 </div>
               </div>
@@ -4566,185 +6084,520 @@ exports[`<Table /> should render table with sticky header, footer & first column
                     class="c11"
                     data-blade-component="text"
                   >
-                    Alice Smith
+                    Jane Doe
                   </p>
                 </div>
               </div>
             </div>
           </td>
         </tr>
+      </tbody>
+      <tfoot
+        class="c12 css-1a28xfp-Header"
+        data-blade-component="table-footer"
+        role="rowgroup"
+      >
+        <tr
+          class="tr tr-footer css-19bs4cg-getHeaderRowContainerStyle-HeaderRow"
+          data-blade-component="table-footer-row"
+          data-table-library_tr-header=""
+          role="rowfooter"
+        >
+          <th
+            class="th c13 css-c0u6i8-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            data-blade-component="table-footer-cell"
+            data-hide="false"
+            data-resize-min-width="75"
+            data-table-library_th=""
+            role="columnfooter"
+          >
+            <div>
+              <p
+                class="c4"
+                data-blade-component="text"
+              >
+                -
+              </p>
+            </div>
+          </th>
+          <th
+            class="th c13 css-c0u6i8-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            data-blade-component="table-footer-cell"
+            data-hide="false"
+            data-resize-min-width="75"
+            data-table-library_th=""
+            role="columnfooter"
+          >
+            <div>
+              <p
+                class="c4"
+                data-blade-component="text"
+              >
+                -
+              </p>
+            </div>
+          </th>
+          <th
+            class="th c13 css-c0u6i8-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            data-blade-component="table-footer-cell"
+            data-hide="false"
+            data-resize-min-width="75"
+            data-table-library_th=""
+            role="columnfooter"
+          >
+            <div>
+              <p
+                class="c4"
+                data-blade-component="text"
+              >
+                -
+              </p>
+            </div>
+          </th>
+          <th
+            class="th c13 css-c0u6i8-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            data-blade-component="table-footer-cell"
+            data-hide="false"
+            data-resize-min-width="75"
+            data-table-library_th=""
+            role="columnfooter"
+          >
+            <div>
+              <p
+                class="c4"
+                data-blade-component="text"
+              >
+                -
+              </p>
+            </div>
+          </th>
+          <th
+            class="th c13 css-c0u6i8-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            data-blade-component="table-footer-cell"
+            data-hide="false"
+            data-resize-min-width="75"
+            data-table-library_th=""
+            role="columnfooter"
+          >
+            <div>
+              <p
+                class="c4"
+                data-blade-component="text"
+              >
+                -
+              </p>
+            </div>
+          </th>
+          <th
+            class="th c13 css-c0u6i8-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            data-blade-component="table-footer-cell"
+            data-hide="false"
+            data-resize-min-width="75"
+            data-table-library_th=""
+            role="columnfooter"
+          >
+            <div>
+              <p
+                class="c4"
+                data-blade-component="text"
+              >
+                -
+              </p>
+            </div>
+          </th>
+        </tr>
+      </tfoot>
+    </table>
+  </div>
+</div>
+`;
+
+exports[`<Table /> should render table with surfaceLevel 1`] = `
+.c0 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  position: relative;
+}
+
+.c7 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  height: 100%;
+}
+
+.c8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  pointer-events: auto;
+}
+
+.c3 {
+  color: hsla(217,56%,17%,1);
+  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-size: 0.875rem;
+  font-weight: 700;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 1.25rem;
+  margin: 0;
+  padding: 0;
+}
+
+.c10 {
+  color: hsla(217,56%,17%,1);
+  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-size: 0.875rem;
+  font-weight: 400;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 1.25rem;
+  margin: 0;
+  padding: 0;
+}
+
+.c4.c4.c4 {
+  border: none;
+  -webkit-transition: background-color 150ms cubic-bezier(0.3,0,0.2,1);
+  transition: background-color 150ms cubic-bezier(0.3,0,0.2,1);
+}
+
+.c4.c4.c4 tr:last-child .cell-wrapper {
+  border-bottom: none;
+}
+
+.c4.c4.c4 .row-select-single-selected .cell-wrapper-base,
+.c4.c4.c4 .row-select-selected .cell-wrapper-base {
+  background-color: hsla(218,89%,51%,0.09);
+}
+
+.c4.c4.c4 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base,
+.c4.c4.c4 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base {
+  background-color: hsla(218,89%,51%,0.18);
+}
+
+.c4.c4.c4 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base,
+.c4.c4.c4 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base {
+  background-color: hsla(218,89%,51%,0.09);
+}
+
+.c4.c4.c4 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base,
+.c4.c4.c4 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base {
+  background-color: hsla(218,89%,51%,0.18);
+}
+
+.c6.c6.c6 {
+  height: 100%;
+  background-color: hsla(220,27%,98%,1);
+}
+
+.c6.c6.c6 > div:first-child {
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c6.c6.c6:focus-visible {
+  outline: none;
+  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18) inset;
+}
+
+.c9.c9.c9 {
+  -webkit-transition: background-color 150ms cubic-bezier(0.3,0,0.2,1);
+  transition: background-color 150ms cubic-bezier(0.3,0,0.2,1);
+  background-color: transparent;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  padding-left: 12px;
+  padding-right: 12px;
+  height: 100%;
+  border-bottom-width: 1px;
+  border-bottom-color: hsla(216,15%,54%,0.18);
+  border-bottom-style: solid;
+}
+
+.c5.c5.c5 {
+  background-color: transparent;
+}
+
+.c5.c5.c5:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px hsla(218,89%,51%,0.09);
+}
+
+.c11.c11.c11 {
+  background-color: hsla(216,15%,54%,0.09);
+}
+
+.c11.c11.c11 tr:last-child th {
+  border-bottom: none;
+}
+
+.c12.c12.c12 {
+  height: 100%;
+  background-color: hsla(220,27%,98%,1);
+  border-bottom-width: 1px;
+  border-top-width: 1px;
+  border-bottom-color: hsla(216,15%,54%,0.18);
+  border-top-color: hsla(216,15%,54%,0.18);
+  border-bottom-style: solid;
+  border-top-style: solid;
+}
+
+.c12.c12.c12 > div {
+  background-color: hsla(216,15%,54%,0.09);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  height: 100%;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.c1.c1.c1 tr:first-child th {
+  border-top: none;
+}
+
+.c2.c2.c2 {
+  background-color: hsla(220,27%,98%,1);
+  height: 100%;
+  border-bottom-width: 1px;
+  border-top-width: 1px;
+  border-bottom-color: hsla(216,15%,54%,0.18);
+  border-top-color: hsla(216,15%,54%,0.18);
+  border-bottom-style: solid;
+  border-top-style: solid;
+  cursor: auto;
+}
+
+.c2.c2.c2 > div {
+  background-color: hsla(216,15%,54%,0.09);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  height: 100%;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.c2.c2.c2:focus-visible {
+  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18) inset;
+  outline: none;
+}
+
+@media screen and (min-width:320px) {
+  .c8 {
+    pointer-events: auto;
+  }
+}
+
+@media screen and (min-width:480px) {
+  .c8 {
+    pointer-events: auto;
+  }
+}
+
+@media screen and (min-width:768px) {
+  .c8 {
+    pointer-events: auto;
+  }
+}
+
+@media screen and (min-width:1024px) {
+  .c8 {
+    pointer-events: auto;
+  }
+}
+
+@media screen and (min-width:1200px) {
+  .c8 {
+    pointer-events: auto;
+  }
+}
+
+<div>
+  <div
+    class="c0"
+    data-blade-component="table"
+  >
+    <table
+      class="css-1fddph5-Table"
+      data-blade-component="table"
+      data-table-library_table=""
+      role="table"
+      style="--data-table-library_grid-template-columns: 150px 150px 150px 150px 150px 150px;"
+    >
+      <thead
+        class="c1 css-1a28xfp-Header"
+        data-blade-component="table-header"
+        role="rowgroup"
+      >
         <tr
-          class="tr tr-body c6 css-1rzx1gz-getRowContainerStyle-Row"
-          data-blade-component="table-row"
-          data-table-library_tr-body=""
-          role="row"
+          class="tr tr-header css-19bs4cg-getHeaderRowContainerStyle-HeaderRow"
+          data-blade-component="table-header-row"
+          data-table-library_tr-header=""
+          role="rowheader"
         >
-          <td
-            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
-            data-blade-component="table-cell"
-            data-table-library_td=""
-            role="cell"
+          <th
+            class="th c2 css-96zqc6-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            data-blade-component="table-header-cell"
+            data-hide="false"
+            data-resize-min-width="75"
+            data-table-library_th=""
+            role="columnheader"
             tabindex="0"
           >
             <div>
-              <div
-                class="c8 cell-wrapper-base"
-                data-blade-component="base-box"
+              <p
+                class="c3"
+                data-blade-component="text"
               >
-                <div
-                  class="c9 c10 cell-wrapper"
-                  data-blade-component="base-box"
-                  pointer-events="auto"
-                >
-                  <p
-                    class="c11"
-                    data-blade-component="text"
-                  >
-                    rzp08
-                  </p>
-                </div>
-              </div>
+                Payment ID
+              </p>
             </div>
-          </td>
-          <td
-            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
-            data-blade-component="table-cell"
-            data-table-library_td=""
-            role="cell"
+          </th>
+          <th
+            class="th c2 css-96zqc6-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            data-blade-component="table-header-cell"
+            data-hide="false"
+            data-resize-min-width="75"
+            data-table-library_th=""
+            role="columnheader"
             tabindex="0"
           >
             <div>
-              <div
-                class="c8 cell-wrapper-base"
-                data-blade-component="base-box"
+              <p
+                class="c3"
+                data-blade-component="text"
               >
-                <div
-                  class="c9 c10 cell-wrapper"
-                  data-blade-component="base-box"
-                  pointer-events="auto"
-                >
-                  300
-                </div>
-              </div>
+                Amount
+              </p>
             </div>
-          </td>
-          <td
-            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
-            data-blade-component="table-cell"
-            data-table-library_td=""
-            role="cell"
-            tabindex="0"
-          >
-            <div>
-              <div
-                class="c8 cell-wrapper-base"
-                data-blade-component="base-box"
-              >
-                <div
-                  class="c9 c10 cell-wrapper"
-                  data-blade-component="base-box"
-                  pointer-events="auto"
-                >
-                  <p
-                    class="c11"
-                    data-blade-component="text"
-                  >
-                    completed
-                  </p>
-                </div>
-              </div>
+          </th>
+          <th
+            class="th c2 css-96zqc6-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            data-blade-component="table-header-cell"
+            data-hide="false"
+            data-resize-min-width="75"
+            data-table-library_th=""
+            role="columnheader"
+            tabindex="0"
+          >
+            <div>
+              <p
+                class="c3"
+                data-blade-component="text"
+              >
+                Status
+              </p>
             </div>
-          </td>
-          <td
-            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
-            data-blade-component="table-cell"
-            data-table-library_td=""
-            role="cell"
+          </th>
+          <th
+            class="th c2 css-96zqc6-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            data-blade-component="table-header-cell"
+            data-hide="false"
+            data-resize-min-width="75"
+            data-table-library_th=""
+            role="columnheader"
             tabindex="0"
           >
             <div>
-              <div
-                class="c8 cell-wrapper-base"
-                data-blade-component="base-box"
+              <p
+                class="c3"
+                data-blade-component="text"
               >
-                <div
-                  class="c9 c10 cell-wrapper"
-                  data-blade-component="base-box"
-                  pointer-events="auto"
-                >
-                  <p
-                    class="c11"
-                    data-blade-component="text"
-                  >
-                    credit
-                  </p>
-                </div>
-              </div>
+                Type
+              </p>
             </div>
-          </td>
-          <td
-            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
-            data-blade-component="table-cell"
-            data-table-library_td=""
-            role="cell"
+          </th>
+          <th
+            class="th c2 css-96zqc6-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            data-blade-component="table-header-cell"
+            data-hide="false"
+            data-resize-min-width="75"
+            data-table-library_th=""
+            role="columnheader"
             tabindex="0"
           >
             <div>
-              <div
-                class="c8 cell-wrapper-base"
-                data-blade-component="base-box"
+              <p
+                class="c3"
+                data-blade-component="text"
               >
-                <div
-                  class="c9 c10 cell-wrapper"
-                  data-blade-component="base-box"
-                  pointer-events="auto"
-                >
-                  <p
-                    class="c11"
-                    data-blade-component="text"
-                  >
-                    Credit Card
-                  </p>
-                </div>
-              </div>
+                Method
+              </p>
             </div>
-          </td>
-          <td
-            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
-            data-blade-component="table-cell"
-            data-table-library_td=""
-            role="cell"
+          </th>
+          <th
+            class="th c2 css-96zqc6-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            data-blade-component="table-header-cell"
+            data-hide="false"
+            data-resize-min-width="75"
+            data-table-library_th=""
+            role="columnheader"
             tabindex="0"
           >
             <div>
-              <div
-                class="c8 cell-wrapper-base"
-                data-blade-component="base-box"
+              <p
+                class="c3"
+                data-blade-component="text"
               >
-                <div
-                  class="c9 c10 cell-wrapper"
-                  data-blade-component="base-box"
-                  pointer-events="auto"
-                >
-                  <p
-                    class="c11"
-                    data-blade-component="text"
-                  >
-                    Bob Smith
-                  </p>
-                </div>
-              </div>
+                Name
+              </p>
             </div>
-          </td>
+          </th>
         </tr>
+      </thead>
+      <tbody
+        class="c4 css-8eb0m3-Body"
+        data-blade-component="table-body"
+        data-table-library_body=""
+      >
         <tr
-          class="tr tr-body c6 css-1rzx1gz-getRowContainerStyle-Row"
+          class="tr tr-body c5 css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
           data-table-library_tr-body=""
           role="row"
         >
           <td
-            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -4752,26 +6605,26 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c7 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c8 c9 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c10"
                     data-blade-component="text"
                   >
-                    rzp09
+                    rzp01
                   </p>
                 </div>
               </div>
             </div>
           </td>
           <td
-            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -4779,21 +6632,21 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c7 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c8 c9 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
-                  200
+                  100
                 </div>
               </div>
             </div>
           </td>
           <td
-            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -4801,26 +6654,26 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c7 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c8 c9 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c10"
                     data-blade-component="text"
                   >
-                    completed
+                    pending
                   </p>
                 </div>
               </div>
             </div>
           </td>
           <td
-            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -4828,16 +6681,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c7 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c8 c9 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c10"
                     data-blade-component="text"
                   >
                     credit
@@ -4847,7 +6700,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -4855,16 +6708,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c7 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c8 c9 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c10"
                     data-blade-component="text"
                   >
                     Netbanking
@@ -4874,7 +6727,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -4882,16 +6735,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c7 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c8 c9 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c10"
                     data-blade-component="text"
                   >
                     John Doe
@@ -4902,13 +6755,13 @@ exports[`<Table /> should render table with sticky header, footer & first column
           </td>
         </tr>
         <tr
-          class="tr tr-body c6 css-1rzx1gz-getRowContainerStyle-Row"
+          class="tr tr-body c5 css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
           data-table-library_tr-body=""
           role="row"
         >
           <td
-            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -4916,26 +6769,26 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c7 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c8 c9 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c10"
                     data-blade-component="text"
                   >
-                    rzp10
+                    rzp02
                   </p>
                 </div>
               </div>
             </div>
           </td>
           <td
-            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -4943,11 +6796,11 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c7 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c8 c9 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
@@ -4957,7 +6810,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -4965,16 +6818,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c7 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c8 c9 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c10"
                     data-blade-component="text"
                   >
                     pending
@@ -4984,7 +6837,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -4992,16 +6845,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c7 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c8 c9 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c10"
                     data-blade-component="text"
                   >
                     credit
@@ -5011,7 +6864,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -5019,16 +6872,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c7 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c8 c9 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c10"
                     data-blade-component="text"
                   >
                     UPI
@@ -5038,7 +6891,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </td>
           <td
-            class="td c7 css-w02rke-CELL_CONTAINER_STYLE-Cell"
+            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -5046,16 +6899,16 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <div
-                class="c8 cell-wrapper-base"
+                class="c7 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9 c10 cell-wrapper"
+                  class="c8 c9 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c11"
+                    class="c10"
                     data-blade-component="text"
                   >
                     Jane Doe
@@ -5067,7 +6920,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
         </tr>
       </tbody>
       <tfoot
-        class="c12 css-1a28xfp-Header"
+        class="c11 css-1a28xfp-Header"
         data-blade-component="table-footer"
         role="rowgroup"
       >
@@ -5078,7 +6931,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
           role="rowfooter"
         >
           <th
-            class="th c13 css-c0u6i8-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c12 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -5087,7 +6940,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <p
-                class="c4"
+                class="c3"
                 data-blade-component="text"
               >
                 -
@@ -5095,7 +6948,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </th>
           <th
-            class="th c13 css-c0u6i8-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c12 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -5104,7 +6957,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <p
-                class="c4"
+                class="c3"
                 data-blade-component="text"
               >
                 -
@@ -5112,7 +6965,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </th>
           <th
-            class="th c13 css-c0u6i8-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c12 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -5121,7 +6974,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <p
-                class="c4"
+                class="c3"
                 data-blade-component="text"
               >
                 -
@@ -5129,7 +6982,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </th>
           <th
-            class="th c13 css-c0u6i8-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c12 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -5138,7 +6991,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <p
-                class="c4"
+                class="c3"
                 data-blade-component="text"
               >
                 -
@@ -5146,7 +6999,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </th>
           <th
-            class="th c13 css-c0u6i8-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c12 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -5155,7 +7008,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <p
-                class="c4"
+                class="c3"
                 data-blade-component="text"
               >
                 -
@@ -5163,7 +7016,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
             </div>
           </th>
           <th
-            class="th c13 css-c0u6i8-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c12 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -5172,7 +7025,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
           >
             <div>
               <p
-                class="c4"
+                class="c3"
                 data-blade-component="text"
               >
                 -