TreeTable: Rows are not aligned when frozen

[Tvck3r]

Describe the bug

Similar issue to #5508.

Reproducer

https://stackblitz-starters-omir5r.stackblitz.io

System Information

Not sure how to access terminal via stackblitz:

{
  "name": "stackblitz-starters-66bhze",
  "version": "0.0.0",
  "private": true,
  "dependencies": {
    "@types/react": "18.2.37",
    "@types/react-dom": "18.2.15",
    "primereact": "^10.8.4",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "react-scripts": "latest"
  }
}

Steps to reproduce the behavior

1. Navigate: https://primereact.org/playground/
2. Copy code from: https://primereact.org/treetable/#frozen_columns
3. Observe misalignment:
   

Expected behavior

Rows to be aligned while frozen and scrollable

[Tvck3r]

Code for easier copy paste:

import { ChangeEvent, FC, useState } from 'react';
import { InputText } from 'primereact/inputtext';

import './style.css';
import 'primereact/resources/themes/bootstrap4-dark-blue/theme.css';
import { TreeTable } from 'primereact/treetable';
import { Column } from 'primereact/column';
import { TreeNode } from 'primereact/treenode';

export const App: FC = () => {
  const [nodes, setNodes] = useState<TreeNode[]>([
    {
      key: '0',
      data: {
        name: 'Applications',
        size: '100kb',
        type: 'Folder',
      },
      children: [
        {
          key: '0-0',
          data: {
            name: 'React',
            size: '25kb',
            type: 'Folder',
          },
          children: [
            {
              key: '0-0-0',
              data: {
                name: 'react.app',
                size: '10kb',
                type: 'Application',
              },
            },
            {
              key: '0-0-1',
              data: {
                name: 'native.app',
                size: '10kb',
                type: 'Application',
              },
            },
            {
              key: '0-0-2',
              data: {
                name: 'mobile.app',
                size: '5kb',
                type: 'Application',
              },
            },
          ],
        },
        {
          key: '0-1',
          data: {
            name: 'editor.app',
            size: '25kb',
            type: 'Application',
          },
        },
        {
          key: '0-2',
          data: {
            name: 'settings.app',
            size: '50kb',
            type: 'Application',
          },
        },
      ],
    },
    {
      key: '1',
      data: {
        name: 'Cloud',
        size: '20kb',
        type: 'Folder',
      },
      children: [
        {
          key: '1-0',
          data: {
            name: 'backup-1.zip',
            size: '10kb',
            type: 'Zip',
          },
        },
        {
          key: '1-1',
          data: {
            name: 'backup-2.zip',
            size: '10kb',
            type: 'Zip',
          },
        },
      ],
    },
    {
      key: '2',
      data: {
        name: 'Desktop',
        size: '150kb',
        type: 'Folder',
      },
      children: [
        {
          key: '2-0',
          data: {
            name: 'note-meeting.txt',
            size: '50kb',
            type: 'Text',
          },
        },
        {
          key: '2-1',
          data: {
            name: 'note-todo.txt',
            size: '100kb',
            type: 'Text',
          },
        },
      ],
    },
    {
      key: '3',
      data: {
        name: 'Documents',
        size: '75kb',
        type: 'Folder',
      },
      children: [
        {
          key: '3-0',
          data: {
            name: 'Work',
            size: '55kb',
            type: 'Folder',
          },
          children: [
            {
              key: '3-0-0',
              data: {
                name: 'Expenses.doc',
                size: '30kb',
                type: 'Document',
              },
            },
            {
              key: '3-0-1',
              data: {
                name: 'Resume.doc',
                size: '25kb',
                type: 'Resume',
              },
            },
          ],
        },
        {
          key: '3-1',
          data: {
            name: 'Home',
            size: '20kb',
            type: 'Folder',
          },
          children: [
            {
              key: '3-1-0',
              data: {
                name: 'Invoices',
                size: '20kb',
                type: 'Text',
              },
            },
          ],
        },
      ],
    },
    {
      key: '4',
      data: {
        name: 'Downloads',
        size: '25kb',
        type: 'Folder',
      },
      children: [
        {
          key: '4-0',
          data: {
            name: 'Spanish',
            size: '10kb',
            type: 'Folder',
          },
          children: [
            {
              key: '4-0-0',
              data: {
                name: 'tutorial-a1.txt',
                size: '5kb',
                type: 'Text',
              },
            },
            {
              key: '4-0-1',
              data: {
                name: 'tutorial-a2.txt',
                size: '5kb',
                type: 'Text',
              },
            },
          ],
        },
        {
          key: '4-1',
          data: {
            name: 'Travel',
            size: '15kb',
            type: 'Text',
          },
          children: [
            {
              key: '4-1-0',
              data: {
                name: 'Hotel.pdf',
                size: '10kb',
                type: 'PDF',
              },
            },
            {
              key: '4-1-1',
              data: {
                name: 'Flight.pdf',
                size: '5kb',
                type: 'PDF',
              },
            },
          ],
        },
      ],
    },
    {
      key: '5',
      data: {
        name: 'Main',
        size: '50kb',
        type: 'Folder',
      },
      children: [
        {
          key: '5-0',
          data: {
            name: 'bin',
            size: '50kb',
            type: 'Link',
          },
        },
        {
          key: '5-1',
          data: {
            name: 'etc',
            size: '100kb',
            type: 'Link',
          },
        },
        {
          key: '5-2',
          data: {
            name: 'var',
            size: '100kb',
            type: 'Link',
          },
        },
      ],
    },
    {
      key: '6',
      data: {
        name: 'Other',
        size: '5kb',
        type: 'Folder',
      },
      children: [
        {
          key: '6-0',
          data: {
            name: 'todo.txt',
            size: '3kb',
            type: 'Text',
          },
        },
        {
          key: '6-1',
          data: {
            name: 'logo.png',
            size: '2kb',
            type: 'Picture',
          },
        },
      ],
    },
    {
      key: '7',
      data: {
        name: 'Pictures',
        size: '150kb',
        type: 'Folder',
      },
      children: [
        {
          key: '7-0',
          data: {
            name: 'barcelona.jpg',
            size: '90kb',
            type: 'Picture',
          },
        },
        {
          key: '7-1',
          data: {
            name: 'primeng.png',
            size: '30kb',
            type: 'Picture',
          },
        },
        {
          key: '7-2',
          data: {
            name: 'prime.jpg',
            size: '30kb',
            type: 'Picture',
          },
        },
      ],
    },
    {
      key: '8',
      data: {
        name: 'Videos',
        size: '1500kb',
        type: 'Folder',
      },
      children: [
        {
          key: '8-0',
          data: {
            name: 'primefaces.mkv',
            size: '1000kb',
            type: 'Video',
          },
        },
        {
          key: '8-1',
          data: {
            name: 'intro.avi',
            size: '500kb',
            type: 'Video',
          },
        },
      ],
    },
  ]);
  return (
    <main>
      <h1>Playground</h1>

      <div className="card">
        <TreeTable
          value={nodes}
          scrollable
          frozenWidth="200px"
          scrollHeight="250px"
        >
          <Column
            field="name"
            header="Name"
            expander
            frozen
            style={{ width: '250px', height: '57px' }}
          ></Column>
          <Column
            field="size"
            header="Size"
            style={{ width: '250px', height: '57px' }}
            columnKey="size_0"
          ></Column>
          <Column
            field="type"
            header="Type"
            style={{ width: '250px', height: '57px' }}
            columnKey="type_0"
          ></Column>
          <Column
            field="size"
            header="Size"
            style={{ width: '250px', height: '57px' }}
            columnKey="size_1"
          ></Column>
          <Column
            field="type"
            header="Type"
            style={{ width: '250px', height: '57px' }}
            columnKey="type_1"
          ></Column>
          <Column
            field="size"
            header="Size"
            style={{ width: '250px', height: '57px' }}
            columnKey="size_2"
          ></Column>
          <Column
            field="type"
            header="Type"
            style={{ width: '250px', height: '57px' }}
            columnKey="type_2"
          ></Column>
        </TreeTable>
      </div>
    </main>
  );
};

[github-actions]

Please fork the Stackblitz project and create a case demonstrating your bug report. This issue will be closed if no activities in 20 days.

[melloware]

@Tvck3r you can't use frozen and expanded together. That makes no sense from a UI/UX perspective. Those two features are not designed to work together.

[Tvck3r]

Hi @melloware. Thanks for your reply. This functionality is demonstrated with the desired outcome in the documentation here:

https://primereact.org/treetable/#frozen_columns

Furthermore, it does 'function' in the stackblitz I included, it's just that the styling is off. Am I missing something?

[melloware]

Oh i see but here is a StackBlitz showing it works fine: https://stackblitz.com/edit/e7k5r9?file=src%2FApp.jsx

all rows are aligned...

[Tvck3r]

Did some more testing and it looks like this gets 'corrected' only if you include html {
font-size: 14px;
} in the CSS.

not sure that's a good solution, but it does allow me to continue moving forward. Up to you if this would be considered a bug or not.