Tailwind: DataTable issues

[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 rowgroupTogglerIcon seems those needs to be removed

[Dalorzo]

@melloware my aplogies for not respnding earlier to your question around the data table. Here are all the elements I found that are breaking the tailwind.

[Dalorzo]

Regarding loading icon, I type requires this format:

 loadingIcon: {
    className: 'w-8 h-8',
  },

[melloware]

@Dalorzo can you move all this info over to the other ticket since they were already working on that? No need to have two tickets