Tailwind: Datatable Issues

[artonio]

Describe the bug

Tailwind Theming documentation for datatable is very outdated, is it possible to update the docs for the Tailwind theming of the datable please. Thanks.

Reproducer

No response

PrimeReact version

10.2.1

React version

17.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[melloware]

See my PR. Not too much changed?

When you say its way out of date this doesn't look too far out of date?

[artonio]

things like loadingicon is now loadingIcon, bodyrow is now bodyRow, and many more.
@melloware

[artonio]

other components are also outdate, and it's really not that big of a deal to fix the other ones, but datatable is so huge that it takes time to fix all the props

[melloware]

cc @Dalorzo can you confirm this?

Are these case sensitive loadingicon doesn't work if its loadingIcon and vice versa?

[artonio]

rowgrouptoggler does not exist under DataTablePassThroughOptions but is now under ColumnPassThroughOptions

@melloware @Dalorzo

[melloware]

@artonio interested in submitting a PR?

[artonio]

@artonio interested in submitting a PR?
@melloware
sure, I have a member of my team fixing it now, and then I will submit a PR once we have it working in our app

[Dalorzo]

rowgrouptoggler does not exist under DataTablePassThroughOptions but is now under ColumnPassThroughOptions

@melloware @Dalorzo

#5501

[melloware]

@Dalorzo please enter all your research here on this ticket.

[Dalorzo]

-camelCase

• missing properties on column: frozen, showGridlines and resizeable are missing

column: {
    headerCell: ({ context, props }) => ({ /*<-- DataTablePassThroughMethodOptions<DataTableValueArray>*/
      className: classNames(
        'text-left border-0 border-b border-solid border-gray-300 dark:border-blue-900/40 font-bold',
        'transition duration-200',
        context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4', // Size
        context.sorted ? 'bg-blue-50 text-blue-700' : 'bg-slate-50 text-slate-700', // Sort
        context.sorted ? 'dark:text-white/80 dark:bg-blue-300' : 'dark:text-white/80 dark:bg-gray-900', // Dark Mode
        {
          'sticky z-[1]': props.frozen || props.frozen === '', // Frozen Columns
          'border-x border-y': context?.showGridlines,
          'overflow-hidden space-nowrap border-y relative bg-clip-padding': context.resizable, // Resizable
        },
      ),
    }),

primereact/components/lib/passthrough/tailwind/index.js

Line 3168 in ad61ccf

column: {

There is no footerCell in ColumnPassthroughOptions

           footercell: ({ context }) => ({
               className: classNames(
                   'text-left border-0 border-b border-solid border-gray-300 font-bold',
                   'bg-slate-50 text-slate-700',
                   'transition duration-200',
                   context.size === 'small' ? 'p-2' : context.size === 'large' ? 'p-5' : 'p-4', // Size
                   'dark:text-white/80 dark:bg-gray-900 dark:border-blue-900/40', // Dark Mode
                   {
                       'border-x border-y': context.showGridlines
                   }
               )
           }),

There are no lable property in DropdownPassThroughOptions, and camelCase

filterremovebutton: {
       root: 'ml-2',
       label: 'grow-0',
     },

ColumnPassthroughOptions does not have a rowReorderIcon property nor transition

rowReorderIcon: {
     className: 'cursor-move',
   },
   

   transition: TRANSITIONS.overlay,

all properties are missing on bodyRow: selected, index, selectable, selected

bodyRow: ({ context }: DataTablePassThroughMethodOptions<DataTableValueArray>) => ({
   className: classNames(
     context.selected ? 'bg-blue-50 text-blue-700 dark:bg-blue-300' : 'bg-white text-gray-600 dark:bg-gray-900',
     context.stripedRows
       ? context.index % 2 === 0
         ? 'bg-white text-gray-600 dark:bg-gray-900'
         : 'bg-blue-50/50 text-gray-600 dark:bg-gray-950'
       : '',
     'transition duration-200',
     'focus:outline focus:outline-[0.15rem] focus:outline-blue-200 focus:outline-offset-[-0.15rem]', // Focus
     'dark:text-white/80 dark:focus:outline dark:focus:outline-[0.15rem] dark:focus:outline-blue-300 dark:focus:outline-offset-[-0.15rem]', // Dark Mode
     {
       'cursor-pointer': context.selectable,
       'hover:bg-gray-300/20 hover:text-gray-600': context.selectable && !context.selected, // Hover
     },
   ),
 }),

Missing: rowgrouptoggler and rowgro-camelCase

• missing properties on column: frozen, showGridlines and resizeable are missing

column: {
    headerCell: ({ context, props }) => ({ 
      className: classNames(
        'text-left border-0 border-b border-solid border-gray-300 dark:border-blue-900/40 font-bold',
        'transition duration-200',
        context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4', // Size
        context.sorted ? 'bg-blue-50 text-blue-700' : 'bg-slate-50 text-slate-700', // Sort
        context.sorted ? 'dark:text-white/80 dark:bg-blue-300' : 'dark:text-white/80 dark:bg-gray-900', // Dark Mode
        {
          'sticky z-[1]': props.frozen || props.frozen === '', // Frozen Columns
          'border-x border-y': context?.showGridlines,
          'overflow-hidden space-nowrap border-y relative bg-clip-padding': context.resizable, // Resizable
        },
      ),
    }),

primereact/components/lib/passthrough/tailwind/index.js

Line 3168 in ad61ccf

column: {

There is no footerCell in ColumnPassthroughOptions

           footercell: ({ context }) => ({
               className: classNames(
                   'text-left border-0 border-b border-solid border-gray-300 font-bold',
                   'bg-slate-50 text-slate-700',
                   'transition duration-200',
                   context.size === 'small' ? 'p-2' : context.size === 'large' ? 'p-5' : 'p-4', // Size
                   'dark:text-white/80 dark:bg-gray-900 dark:border-blue-900/40', // Dark Mode
                   {
                       'border-x border-y': context.showGridlines
                   }
               )
           }),

There are no lable property in DropdownPassThroughOptions, and camelCase

filterremovebutton: {
       root: 'ml-2',
       label: 'grow-0',
     },

ColumnPassthroughOptions does not have a rowReorderIcon property nor transition

rowReorderIcon: {
     className: 'cursor-move',
   },
   

   transition: TRANSITIONS.overlay,

all properties are missing on bodyRow: selected, index, selectable, selected

bodyRow: ({ context }: DataTablePassThroughMethodOptions<DataTableValueArray>) => ({
   className: classNames(
     context.selected ? 'bg-blue-50 text-blue-700 dark:bg-blue-300' : 'bg-white text-gray-600 dark:bg-gray-900',
     context.stripedRows
       ? context.index % 2 === 0
         ? 'bg-white text-gray-600 dark:bg-gray-900'
         : 'bg-blue-50/50 text-gray-600 dark:bg-gray-950'
       : '',
     'transition duration-200',
     'focus:outline focus:outline-[0.15rem] focus:outline-blue-200 focus:outline-offset-[-0.15rem]', // Focus
     'dark:text-white/80 dark:focus:outline dark:focus:outline-[0.15rem] dark:focus:outline-blue-300 dark:focus:outline-offset-[-0.15rem]', // Dark Mode
     {
       'cursor-pointer': context.selectable,
       'hover:bg-gray-300/20 hover:text-gray-600': context.selectable && !context.selected, // Hover
     },
   ),
 }),

Missing: rowgrouptoggler and rowgroupTogglerIcon seems those needs to be removed

upTogglerIcon seems those needs to be removed

[Dalorzo]

@melloware as per your request I shared my review above please let me know if there is anything missing or if you need me to elaborate more

[melloware]

Let's see what else @artonio and his coworker find too