From 20e270ab6bff36043c82c93bb460d1ed4fb43545 Mon Sep 17 00:00:00 2001
From: "artur.filippovskii" <arturfilippovskij@gmail.com>
Date: Mon, 15 Dec 2025 16:31:08 +0200
Subject: [PATCH 1/2] fix: fix error with hidden content for data table

---
 src/DataTable/README.md               | 118 ++++++++++++++++++++++++++
 src/DataTable/TableCell.tsx           |  16 +++-
 src/DataTable/tests/TableRow.test.jsx |   3 +-
 3 files changed, 133 insertions(+), 4 deletions(-)

diff --git a/src/DataTable/README.md b/src/DataTable/README.md
index fc40cac0dd..eafd09a718 100644
--- a/src/DataTable/README.md
+++ b/src/DataTable/README.md
@@ -1690,3 +1690,121 @@ After selecting the maximum possible number of rows, you can display an error me
   );
 }
 ```
+
+##  ASDASDASDASDASDASDASD
+
+Some text for id
+
+```jsx live
+() => {
+  const TableAction = ({ tableInstance }) => (
+    // Here is access to the tableInstance
+    <Button onClick={() => console.log('TableAction', tableInstance)}>
+      Enroll
+    </Button>
+  );
+
+  const EnrollAction = ({ selectedFlatRows, ...rest }) => (
+    // Here is access to the selectedFlatRows, isEntireTableSelected, tableInstance
+    <Button variant="danger" onClick={() => console.log('Enroll', selectedFlatRows, rest)}>
+      Enroll
+    </Button>
+  );
+
+  const AssignAction = (props) => (
+    <Button onClick={() => console.log('Assign', props)}>
+      Assign
+    </Button>
+  );
+
+  const ExtraAction = ({ text, selectedFlatRows, ...rest }) => (
+    <Button onClick={() => console.log(`Extra Action ${text}`, selectedFlatRows, rest)}>
+      {`Extra Action ${text}`}
+    </Button>
+  );
+
+  return (
+    <DataTable
+      isSelectable
+      itemCount={7}
+      tableActions={[
+        <TableAction />,
+      ]}
+      bulkActions={[
+        <EnrollAction />,
+        <AssignAction />,
+        <ExtraAction text="1" />,
+        <ExtraAction text="2" />,
+      ]}
+      additionalColumns={[
+        {
+          id: 'action',
+          Header: 'Action',
+          Cell: ({ row }) => <DropdownButton id="dropdown-basic-button" title="Dropdown button">
+															<Dropdown.Item href="#/action-1">Action</Dropdown.Item>
+															<Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
+															<Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
+														</DropdownButton>,
+        }
+      ]}
+      data={[
+        {
+          name: 'Lil Bub',
+          color: 'brown tabby',
+          famous_for: 'weird tongue',
+        },
+        {
+          name: 'Grumpy Cat',
+          color: 'siamese',
+          famous_for: 'serving moods',
+        },
+        {
+          name: 'Smoothie',
+          color: 'orange tabby',
+          famous_for: 'modeling',
+        },
+        {
+          name: 'Maru',
+          color: 'brown tabby',
+          famous_for: 'being a lovable oaf',
+        },
+        {
+          name: 'Keyboard Cat',
+          color: 'orange tabby',
+          famous_for: 'piano virtuoso',
+        },
+        {
+          name: 'Long Cat',
+          color: 'russian white',
+          famous_for:
+            'being loooooooooooooooooooooooooooooooooooooooooooooooooooooong',
+        },
+        {
+          name: 'Zeno',
+          color: 'brown tabby',
+          famous_for: 'getting halfway there'
+        },
+      ]}
+      columns={[
+        {
+          Header: 'Name',
+          accessor: 'name',
+        },
+        {
+          Header: 'Famous For',
+          accessor: 'famous_for',
+        },
+        {
+          Header: 'Coat Color',
+          accessor: 'color',
+        },
+      ]}
+    >
+      <DataTable.TableControlBar />
+      <DataTable.Table />
+      <DataTable.EmptyTable content="No results found" />
+      <DataTable.TableFooter />
+    </DataTable>
+  )
+}
+```
diff --git a/src/DataTable/TableCell.tsx b/src/DataTable/TableCell.tsx
index 7498578545..f2b6bd9902 100644
--- a/src/DataTable/TableCell.tsx
+++ b/src/DataTable/TableCell.tsx
@@ -10,13 +10,25 @@ interface TableCellProps {
   column: {
     /** Class(es) to be applied to the cells in the given column */
     cellClassName?: string;
+    /** Uniq ID of the column  */
+    id?: string;
   };
 }
 function TableCell({ getCellProps, render, column }: TableCellProps) {
   const { className, ...rest } = getCellProps();
+
+  const isActionColumn = column.id === 'action';
+  const cellClasses = classNames(className, column.cellClassName);
+
   return (
-    <td {...rest} className={classNames('pgn__data-table-cell-wrap', className, column.cellClassName)}>
-      {render('Cell')}
+    <td {...rest} className={cellClasses}>
+      {!isActionColumn ? (
+        <div className="pgn__data-table-cell-wrap">
+          {render('Cell')}
+        </div>
+      ) : (
+        render('Cell')
+      )}
     </td>
   );
 }
diff --git a/src/DataTable/tests/TableRow.test.jsx b/src/DataTable/tests/TableRow.test.jsx
index 17a46e7c03..3989d95695 100644
--- a/src/DataTable/tests/TableRow.test.jsx
+++ b/src/DataTable/tests/TableRow.test.jsx
@@ -82,9 +82,8 @@ describe('<TableRow />', () => {
   });
 
   it('does not render subcomponent if row is in expanded state and does not have renderRowSubComponent function defined', () => {
-    const { container } = render(<TableRowWrapper value={{}} row={{ ...props, isExpanded: true }} />);
+    render(<TableRowWrapper value={{}} row={{ ...props, isExpanded: true }} />);
     const rows = screen.getAllByRole('row');
     expect(rows.length).toEqual(1);
-    expect(container.querySelector('div')).not.toBeInTheDocument();
   });
 });

From d4a706d7f3266887cb9d8e9c8c7e11e4b6368687 Mon Sep 17 00:00:00 2001
From: "artur.filippovskii" <arturfilippovskij@gmail.com>
Date: Tue, 16 Dec 2025 17:31:54 +0200
Subject: [PATCH 2/2] fix: remove extra code lines

---
 src/DataTable/README.md | 120 +---------------------------------------
 1 file changed, 1 insertion(+), 119 deletions(-)

diff --git a/src/DataTable/README.md b/src/DataTable/README.md
index eafd09a718..8f256b90a2 100644
--- a/src/DataTable/README.md
+++ b/src/DataTable/README.md
@@ -1689,122 +1689,4 @@ After selecting the maximum possible number of rows, you can display an error me
     </DataTable>
   );
 }
-```
-
-##  ASDASDASDASDASDASDASD
-
-Some text for id
-
-```jsx live
-() => {
-  const TableAction = ({ tableInstance }) => (
-    // Here is access to the tableInstance
-    <Button onClick={() => console.log('TableAction', tableInstance)}>
-      Enroll
-    </Button>
-  );
-
-  const EnrollAction = ({ selectedFlatRows, ...rest }) => (
-    // Here is access to the selectedFlatRows, isEntireTableSelected, tableInstance
-    <Button variant="danger" onClick={() => console.log('Enroll', selectedFlatRows, rest)}>
-      Enroll
-    </Button>
-  );
-
-  const AssignAction = (props) => (
-    <Button onClick={() => console.log('Assign', props)}>
-      Assign
-    </Button>
-  );
-
-  const ExtraAction = ({ text, selectedFlatRows, ...rest }) => (
-    <Button onClick={() => console.log(`Extra Action ${text}`, selectedFlatRows, rest)}>
-      {`Extra Action ${text}`}
-    </Button>
-  );
-
-  return (
-    <DataTable
-      isSelectable
-      itemCount={7}
-      tableActions={[
-        <TableAction />,
-      ]}
-      bulkActions={[
-        <EnrollAction />,
-        <AssignAction />,
-        <ExtraAction text="1" />,
-        <ExtraAction text="2" />,
-      ]}
-      additionalColumns={[
-        {
-          id: 'action',
-          Header: 'Action',
-          Cell: ({ row }) => <DropdownButton id="dropdown-basic-button" title="Dropdown button">
-															<Dropdown.Item href="#/action-1">Action</Dropdown.Item>
-															<Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
-															<Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
-														</DropdownButton>,
-        }
-      ]}
-      data={[
-        {
-          name: 'Lil Bub',
-          color: 'brown tabby',
-          famous_for: 'weird tongue',
-        },
-        {
-          name: 'Grumpy Cat',
-          color: 'siamese',
-          famous_for: 'serving moods',
-        },
-        {
-          name: 'Smoothie',
-          color: 'orange tabby',
-          famous_for: 'modeling',
-        },
-        {
-          name: 'Maru',
-          color: 'brown tabby',
-          famous_for: 'being a lovable oaf',
-        },
-        {
-          name: 'Keyboard Cat',
-          color: 'orange tabby',
-          famous_for: 'piano virtuoso',
-        },
-        {
-          name: 'Long Cat',
-          color: 'russian white',
-          famous_for:
-            'being loooooooooooooooooooooooooooooooooooooooooooooooooooooong',
-        },
-        {
-          name: 'Zeno',
-          color: 'brown tabby',
-          famous_for: 'getting halfway there'
-        },
-      ]}
-      columns={[
-        {
-          Header: 'Name',
-          accessor: 'name',
-        },
-        {
-          Header: 'Famous For',
-          accessor: 'famous_for',
-        },
-        {
-          Header: 'Coat Color',
-          accessor: 'color',
-        },
-      ]}
-    >
-      <DataTable.TableControlBar />
-      <DataTable.Table />
-      <DataTable.EmptyTable content="No results found" />
-      <DataTable.TableFooter />
-    </DataTable>
-  )
-}
-```
+```
\ No newline at end of file