Fixed #4977 - Improve performance of row expansion feature on DataTable

[mertsincan]

No description provided.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
primevue	⬜️ Ignored (Inspect)	Visit Preview		Dec 18, 2023 2:16pm

[github-actions]

Thanks a lot for your contribution! But, PR does not seem to be linked to any issues. Please manually link to an issue or mention it in the description using #<issue_id>.

[github-actions]

Thanks a lot for your contribution! But, PR does not seem to be linked to any issues. Please manually link to an issue or mention it in the description using #<issue_id>.

[github-actions]

Thanks a lot for your contribution! But, PR does not seem to be linked to any issues. Please manually link to an issue or mention it in the description using #<issue_id>.

[juanparati]

I upgraded to 3.45 and I found the following issues using TailwindCSS:

• The frozen column is now overlapped by the scrolled columns.
• Striped rows are not working anymore.

With the previous version (3.44) everything works as expected.

I am using the following styles for the datagrid:

import {ColumnPassThroughMethodOptions} from "primevue/column";
import {Transitions} from "@/Styles/styleSettings";
import {RowPassThroughAttributes} from "primevue/row";
import {DataTablePassThroughAttributes} from "primevue/datatable";

export const DatatableStyle = {
    root: function root(_ref169: DataTablePassThroughAttributes) {
        var props = _ref169.props;
        return {
            "class": ['relative',
                {
                    'flex flex-col h-full': props.scrollable && props.scrollHeight === 'flex'
                },
            ]
        };
    },
    // @ts-ignore
    loadingoverlay: {
        "class": [
            'fixed w-full h-full t-0 l-0 bg-gray-100/40',
            'transition duration-200',
            'absolute flex items-center justify-center z-10',
        ]
    },
    loadingicon: {
        "class": 'w-14 h-14 animate-spin'
    },
    wrapper: function wrapper(_ref170: DataTablePassThroughAttributes) {
        var props = _ref170.props;
        return {
            "class": [
                'border-gray-300 border-x border-b-0',
                {
                    relative: props.scrollable,
                    'flex flex-col grow h-full': props.scrollable && props.scrollHeight === 'flex',
                }
            ]
        };
    },
    header: function header(_ref171: DataTablePassThroughAttributes) {
        return {
            "class": [
                'bg-white text-slate-700 font-bold p-4',
                'border-gray-300 border border-b-0 rounded-t-lg'
            ]
        };
    },
    table: {
        "class": 'w-full border-spacing-0 border-separate'
    },
    thead: function thead(_ref172: DataTablePassThroughAttributes) {
        const context = _ref172.context;
        return {
            "class": [{
                'bg-white top-0 z-[1] relative': (context as any).scrollable
            }]
        };
    },
    tbody: function tbody(_ref173 : DataTablePassThroughAttributes) {
        const instance = _ref173.instance,
            context = _ref173.context;
        return {
            "class": [
                'font-open',
                {
                    'sticky z-[1]': instance.frozenRow && (context as any).scrollable
                }],
        };
    },
    tfoot: function tfoot(_ref174 : DataTablePassThroughAttributes) {
        var context = _ref174.context;
        return {
            "class": [{
                'bg-slate-50 bottom-0 z-[1]': (context as any).scrollable
            }]
        };
    },
    footer: {
        "class": [
            'bg-slate-100 text-slate-700 border-x border-t border-gray-300 font-bold p-4',
        ]
    },

    column: {
        headercell: function headercell(_ref175 : ColumnPassThroughMethodOptions) {
            const context = _ref175.context,
                props = _ref175.props;
            return {
                "class": [
                    'text-left border-0 border-b border-solid border-gray-100 font-bold',
                    'transition duration-200',
                    (context === null || context === void 0 ? void 0 : context.size) === 'small' ? 'p-1 text-xs' : (context === null || context === void 0 ? void 0 : context.size) === 'large' ? 'p-3' : 'p-2 text-sm',
                    // Size
                    context.sorted ? 'bg-blue-50 text-blue-700' : 'bg-white text-slate-700',
                    {
                        // @ts-ignore
                        'sticky z-[1]': props.frozen || props.frozen === '',
                        // Frozen Columns
                        'border-x border-y': context === void 0 ? void 0 : context.showGridlines,
                        'overflow-hidden space-nowrap border-y relative bg-clip-padding': context.resizable // Resizable
                    }]
            };
        },

        headercontent: {
            "class": 'flex items-center'
        },
        bodycell: function bodycell(_ref176: ColumnPassThroughMethodOptions) {
            const props = _ref176.props,
                context = _ref176.context;

            return {
                "class": ['border-collapse text-left border-0 border-b border-solid border-gray-100', (context === null || context === void 0 ? void 0 : context.size) === 'small' ? 'p-1 text-xs' : (context === null || context === void 0 ? void 0 : context.size) === 'large' ? 'p-3' : 'p-2 text-sm',
                    {
                        // @ts-ignore
                        'sticky bg-inherit': props.frozen || props.frozen === '',
                        // Frozen Columns
                        'border-x border-y': context === null || context === void 0 ? void 0 : context.showGridlines,
                    }]
            };
        },
        footercell: function footercell(_ref177 : ColumnPassThroughMethodOptions) {
            const context = _ref177.context;
            return {
                "class": [
                    'text-left border-0 border-b border-solid border-gray-300 font-bold', 'bg-slate-50 text-slate-700',
                    'transition duration-200',
                    (context === null || context === void 0 ? void 0 : context.size) === 'small' ? 'p-2' : (context === null || context === void 0 ? void 0 : context.size) === 'large' ? 'p-5' : 'p-4',
                    {
                        'border-x border-y': context === null || context === void 0 ? void 0 : context.showGridlines
                    }]
            };
        },
        sorticon: function sorticon(_ref178: ColumnPassThroughMethodOptions) {
            var context = _ref178.context;
            return {
                "class": [
                    'cursor-pointer',
                    'ml-2', context.sorted ? 'text-blue-700' : 'text-slate-700'
                ]
            };
        },
        sortbadge: {
            "class": ['flex items-center justify-center align-middle', 'rounded-[50%] w-[1.143rem] leading-[1.143rem] ml-2', 'text-blue-700 bg-blue-50', 'dark:text-white/80 dark:bg-blue-400' // Dark Mode
            ]
        },

        columnfilter: {
            "class": 'inline-flex items-center ml-auto'
        },
        filteroverlay: {
            "class": [
                'bg-white text-gray-600 border-1 rounded-md min-w-[12.5rem] drop-shadow-lg',
            ]
        },

        filtermatchmodedropdown: {
            root: {
                "class": 'min-[0px]:flex mb-2'
            }
        },
        filterrowitems: {
            "class": 'm-0 p-0 py-3 list-none'
        },
        filterrowitem: function filterrowitem(_ref179: ColumnPassThroughMethodOptions) {
            var context = _ref179.context;
            return {
                "class": ['m-0 py-3 px-5 bg-transparent', 'transition duration-200', context !== null && context !== void 0 && context.highlighted ? 'text-blue-700 bg-blue-100 dark:text-white/80 dark:bg-blue-300' : 'text-gray-600 bg-transparent dark:text-white/80 dark:bg-transparent']
            };
        },
        filteroperator: {
            "class": ['px-2 border-b border-solid border-gray-300 text-slate-700 bg-slate-50 rounded-t-md py-2']
        },

        filteroperatordropdown: {
            root: {
                "class": 'min-[0px]:flex'
            }
        },
        filterconstraint: {
            "class": 'p-3 border-b border-solid border-gray-300'
        },
        filteraddrule: {
            "class": 'py-3 px-5'
        },
        filteraddrulebutton: {
            root: {
                "class": 'mt-2 flex flex-baseline justify-center w-full min-[0px]:text-sm text-blue-700'
            },
            label: {
                "class": 'ml-2 flex-auto grow-0'
            },
            icon: {
                "class": 'mt-1'
            }
        },
        filterremovebutton: {
            root: {
                "class": 'mt-2 flex flex-baseline justify-center w-full min-[0px]:text-sm text-red-500'
            },
            label: {
                "class": 'ml-2 flex-auto grow-0'
            },
            icon: {
                "class": 'mt-1'
            }
        },
        filterbuttonbar: {
            "class": 'flex items-center justify-between p-3'
        },
        filterclearbutton: {
            root: {
                "class": 'w-auto min-[0px]:text-sm px-4 py-1'
            }
        },
        filterapplybutton: {
            root: {
                "class": 'w-auto min-[0px]:text-sm text-blue-700 hover:text-blue-800 px-4 py-1'
            }
        },
        filtermenubutton: function filtermenubutton(_ref180: ColumnPassThroughMethodOptions) {
            const context = _ref180.context;
            return {
                "class": ['inline-flex justify-center items-center cursor-pointer no-underline overflow-hidden relative ml-2', 'w-8 h-8 rounded-[50%]', 'transition duration-200', 'hover:text-slate-700 hover:bg-gray-300/20',
                    // Hover
                    'focus:outline-0 focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]',
                    // Focus
                    'dark:text-white/70 dark:hover:text-white/80 dark:bg-gray-900',
                    // Dark Mode
                    {
                        'bg-blue-50 text-blue-700': context.active
                    }]
            };
        },
        headerfilterclearbutton: function headerfilterclearbutton(_ref181: ColumnPassThroughMethodOptions) {
            const context = _ref181.context;
            return {
                "class": ['inline-flex justify-center items-center cursor-pointer no-underline overflow-hidden relative', 'text-left bg-transparent m-0 p-0 border-none select-none ml-2', {
                    invisible: !context.hidden
                }]
            };
        },
        columnresizer: {
            "class": 'block absolute top-0 right-0 m-0 w-2 h-full p-0 cursor-col-resize border border-transparent'
        },
        rowreordericon: {
            "class": 'cursor-move'
        },
        roweditorinitbutton: {
            "class": ['inline-flex items-center justify-center overflow-hidden relative', 'text-left cursor-pointer select-none', 'w-8 h-8 border-0 rounded-[50%]', 'transition duration-200', 'text-slate-700 border-transparent', 'focus:outline-0 focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]',
                //Focus
                'hover:text-slate-700 hover:bg-gray-300/20',
                //Hover
                'dark:text-white/70' // Dark Mode
            ]
        },

        roweditorsavebutton: {
            "class": ['inline-flex items-center justify-center overflow-hidden relative', 'text-left cursor-pointer select-none', 'w-8 h-8 border-0 rounded-[50%]', 'transition duration-200', 'text-slate-700 border-transparent', 'focus:outline-0 focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]',
                //Focus
                'hover:text-slate-700 hover:bg-gray-300/20',
                //Hover
                'dark:text-white/70' // Dark Mode
            ]
        },

        roweditorcancelbutton: {
            "class": ['inline-flex items-center justify-center overflow-hidden relative', 'text-left cursor-pointer select-none', 'w-8 h-8 border-0 rounded-[50%]', 'transition duration-200', 'text-slate-700 border-transparent', 'focus:outline-0 focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]',
                //Focus
                'hover:text-slate-700 hover:bg-gray-300/20',
                //Hover
                'dark:text-white/70' // Dark Mode
            ]
        },

        radiobuttonwrapper: {
            "class": ['relative inline-flex cursor-pointer select-none align-bottom', 'w-6 h-6']
        },
        radiobutton: function radiobutton(_ref182: ColumnPassThroughMethodOptions) {
            const context = _ref182.context;
            return {
                "class": ['flex justify-center items-center', 'border-2 w-6 h-6 text-gray-700 rounded-full transition duration-200 ease-in-out', context.checked ? 'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400' : 'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900', {
                    'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !context.disabled,
                    'cursor-default opacity-60': context.disabled
                }]
            };
        },
        radiobuttonicon: function radiobuttonicon(_ref183: ColumnPassThroughMethodOptions) {
            const context = _ref183.context;
            return {
                "class": ['transform rounded-full', 'block w-3 h-3 transition duration-200 bg-white dark:bg-gray-900', {
                    'backface-hidden scale-10 invisible': !context.checked,
                    'transform scale-100 visible': context.checked
                }]
            };
        },
        headercheckboxwrapper: {
            "class": ['cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6']
        },
        headercheckbox: function headercheckbox(_ref184: ColumnPassThroughMethodOptions) {
            const context = _ref184.context;
            return {
                "class": ['flex items-center justify-center', 'border-2 w-6 h-6 text-gray-600 rounded-lg transition-colors duration-200', context.checked ? 'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400' : 'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900', {
                    'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !context.disabled,
                    'cursor-default opacity-60': context.disabled
                }]
            };
        },
        headercheckboxicon: {
            "class": 'w-4 h-4 transition-all duration-200 text-white text-base dark:text-gray-900'
        },
        checkboxwrapper: {
            "class": ['cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6']
        },
        checkbox: function checkbox(_ref185: ColumnPassThroughMethodOptions) {
            const context = _ref185.context;
            return {
                "class": ['flex items-center justify-center', 'border-2 w-6 h-6 text-gray-600 rounded-lg transition-colors duration-200', context.checked ? 'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400' : 'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900', {
                    'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !context.disabled,
                    'cursor-default opacity-60': context.disabled
                }]
            };
        },
        checkboxicon: {
            "class": 'w-4 h-4 transition-all duration-200 text-white text-base dark:text-gray-900'
        },
        transition: Transitions.overlay
    },

    // @ts-ignore
    bodyrow: function bodyrow(_ref186: RowPassThroughAttributes) {
        const context = _ref186.context;

        return {
            "class": [
                context.selected ? 'bg-blue-50 text-blue-700' : 'text-gray-600',
                context.stripedRows ? (context.index % 2 === 0) ? 'bg-white text-gray-600' : 'bg-gray-50 text-gray-600' : '',
                'transition duration-200',
                'focus:outline focus:outline-[0.15rem] focus:outline-blue-200 focus:outline-offset-[-0.15rem]',
                // Focus
                {
                    'cursor-pointer': context.selectable,
                    'hover:bg-gray-300/20 hover:text-gray-600': context.selectable && !context.selected // Hover
                }]
        };
    },
};