Typescript, Tailwind and PrimeReactPTOptions #545

BottomleyIan · 2023-11-24T16:14:43Z

BottomleyIan
Nov 24, 2023

Does anyone have a repo using the PrimeReactPTOptions with typescript. I am finding it really slow going trying to get the correct types for the various components when working of the examples given in the docs (which are just in JS)

And when I do get the correct type it often shows that a something like context?.disabled should actually be props.disabled

Answered by Dalorzo

Nov 24, 2023

@BottomleyIan are you looking for something like the code below, which is a Tailwind version for each component Typescript specific? :

import { classNames } from 'primereact/utils'
import { DataTableProps } from 'primereact/datatable'
import { ColumnProps } from 'primereact/column'

type DataTablePropsExt = DataTableProps<never> & { frozenRow: boolean }

interface TailwindDataTable {
  root: (props: { props: DataTableProps<never> }) => {
    className: string | undefined
  }

  loadingoverlay: {
    className: string | undefined
  }
  loadingicon: string
  wrapper: (props: { props: DataTableProps<never> }) => {
    className: string | undefined
  }
  header: (props: { props: DataTableProps<…

View full answer

melloware · 2023-11-24T18:16:48Z

melloware
Nov 24, 2023
Collaborator

cc @Dalorzo has been helping correct a lot of the TypeScript issues with PT and Tailwind. he may be of some assistance here.

0 replies

Dalorzo · 2023-11-24T21:12:00Z

Dalorzo
Nov 24, 2023

@BottomleyIan are you looking for something like the code below, which is a Tailwind version for each component Typescript specific? :

import { classNames } from 'primereact/utils'
import { DataTableProps } from 'primereact/datatable'
import { ColumnProps } from 'primereact/column'

type DataTablePropsExt = DataTableProps<never> & { frozenRow: boolean }

interface TailwindDataTable {
  root: (props: { props: DataTableProps<never> }) => {
    className: string | undefined
  }

  loadingoverlay: {
    className: string | undefined
  }
  loadingicon: string
  wrapper: (props: { props: DataTableProps<never> }) => {
    className: string | undefined
  }
  header: (props: { props: DataTableProps<never> }) => {
    className: string | undefined
  }
  table: string
  thead: ({ props }: { props: DataTableProps<never>; context: { scrollable: boolean } }) => {
    className: string | undefined
  }
  tbody: (props: { props: DataTablePropsExt; context: { scrollable: boolean } }) => {
    className: string | undefined
  }
  tfoot: (props: { context: { scrollable: boolean } }) => {
    className: string | undefined
  }
  footer: {
    className: string | undefined
  }
  column: {
    headercell: ({
      props,
      context,
    }: {
      context: { size?: 'small' | 'large'; showGridlines?: boolean; resizable?: boolean; sorted?: boolean }
      props: ColumnProps
    }) => {
      className: string | undefined
    }
    headercontent: string
    bodycell: ({
      props,
      context,
    }: {
      props: ColumnProps
      context: { size?: 'small' | 'large'; showGridlines?: boolean }
    }) => {
      className: string | undefined
    }
    footercell: ({
      props,
      context,
    }: {
      context: { size?: 'small' | 'large'; showGridlines: boolean }
      props: ColumnProps
    }) => {
      className: string | undefined
    }
    sorticon: ({ context }: { context: { sorted?: boolean } }) => {
      className: string | undefined
    }
    sortbadge: {
      className: string | undefined
    }
    columnfilter: string
    filteroverlay: {
      className: string | undefined
    }
    filtermatchmodedropdown: {
      root: string
    }
    filterrowitems: string
    filterrowitem: ({ context }: { context: { highlighted?: boolean } }) => {
      className: string | undefined
    }
    filteroperator: {
      className: string | undefined
    }
    filteroperatordropdown: {
      root: string
    }
    filterconstraint: string
    filteraddrule: string
    filteraddrulebutton: {
      root: string
      label: string
      icon: string
    }
    filterremovebutton: {
      root: string
      label: string
    }
    filterbuttonbar: string
    filterclearbutton: {
      root: string
    }
    filterapplybutton: {
      root: string
    }
    filtermenubutton: ({ context }: { context: { active: boolean } }) => {
      className: string | undefined
    }
    headerfilterclearbutton: ({ context }: { context: { hidden: boolean } }) => {
      className: string | undefined
    }
    columnresizer: string
    rowreordericon: string
    roweditorinitbutton: {
      className: string | undefined
    }
    roweditorsavebutton: {
      className: string | undefined
    }
    roweditorcancelbutton: {
      className: string | undefined
    }
    radiobuttonwrapper: {
      className: string | undefined
    }
    radiobutton: ({ context }: { context: { checked: boolean; disabled: boolean } }) => {
      className: string | undefined
    }
    radiobuttonicon: ({ context }: { context: { checked: boolean } }) => {
      className: string | undefined
    }
    headercheckboxwrapper: {
      className: string | undefined
    }
    headercheckbox: ({ context }: { context: { checked: boolean; disabled: boolean } }) => {
      className: string | undefined
    }
    headercheckboxicon: string
    checkboxwrapper: {
      className: string | undefined
    }
    checkbox: ({ context }: { context: { checked: boolean; disabled: boolean } }) => {
      className: string | undefined
    }
    checkboxicon: string
    transition: typeof TRANSITIONS.overlay
  }
  bodyrow: ({
    context,
  }: {
    context: { selected: boolean; stripedRows: boolean; index: number; selectable: boolean }
  }) => {
    className: string | undefined
  }
  rowexpansion: string
  rowgroupheader: {
    className: string | undefined
  }
  rowgroupfooter: {
    className: string | undefined
  }
  rowgrouptoggler: {
    className: string | undefined
  }
  rowgrouptogglericon: string
  resizehelper: string
}

const TRANSITIONS = {
  overlay: {
    enterFromClass: 'opacity-0 scale-75',
    enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
    leaveActiveClass: 'transition-opacity duration-150 ease-linear',
    leaveToClass: 'opacity-0',
  },
}

export const TailwindDataTable: TailwindDataTable = {
  root: ({ props }) => ({
    className: classNames('relative', {
      'flex flex-col h-full': props.scrollable && props.scrollHeight === 'flex',
    }),
  }),
  loadingoverlay: {
    className: classNames(
      'fixed w-full h-full t-0 l-0 bg-gray-100/40',
      'transition duration-200',
      'absolute flex items-center justify-center z-2',
      'dark:bg-gray-950/40',
    ),
  },
  loadingicon: 'w-8 h-8',
  wrapper: ({ props }) => ({
    className: classNames({
      relative: props.scrollable,
      'flex flex-col grow h-full': props.scrollable && props.scrollHeight === 'flex',
    }),
  }),
  header: ({ props }) => ({
    className: classNames(
      'text-sm font-medium text-left rtl:text-right text-secondary-500',
      'dark:border-blue-900/40 dark:text-white/80 dark:text-gray-400 bg-gray-50 dark:bg-gray-800',
      props.showGridlines ? 'border-x border-t border-b-0' : 'border-b border-x-0',
    ),
  }),
  table: 'w-full border-spacing-0',
  thead: ({ context }) => ({
    className: classNames({
      'bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700': !context.scrollable,
      'bg-slate-50 top-0 z-[1]': context.scrollable,
    }),
  }),
  tbody: ({ props, context }) => ({
    className: classNames({
      'sticky z-[1]': props.frozenRow && context.scrollable,
    }),
  }),
  tfoot: ({ context }) => ({
    className: classNames({
      'bg-slate-50 bottom-0 z-[1]': context.scrollable,
    }),
  }),
  footer: {
    className: classNames(
      'bg-slate-50 text-slate-700 border-t-0 border-b border-x-0 border-gray-300 font-bold p-4',
      'dark:border-blue-900/40 dark:text-white/80 dark:bg-gray-900',
    ),
  },
  column: {
    headercell: ({ context, props }) => ({
      className: classNames(
        'text-sm font-semibold text-left rtl:text-right text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-800',
        'transition duration-200',
        context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-2',
        context.sorted ? 'cursor-pointer text-primary-700' : 'cursor-pointer bg-slate-50 text-slate-700',
        context.sorted ? 'dark:text-white/80 dark:bg-primary-300' : 'dark:text-white/80 dark:bg-primary-900',
        {
          'sticky z-[1]': props.frozen, // Frozen Columns,
          'border-x border-y': context?.showGridlines,
          'overflow-hidden space-nowrap border-y relative bg-clip-padding': context.resizable,
        },
      ),
    }),
    headercontent: 'py-3.5 px-3 text-sm font-normal',
    bodycell: ({ props, context }) => ({
      className: classNames(
        'px-4 py-3.5 text-sm font-normal text-gray-600 dark:text-gray-400',
        {
          'p-2': context?.size === 'small',
          'p-5': context?.size === 'large',
          'p-4': !context.size,
        },
        'dark:text-white/80 dark:border-blue-900/40',
        {
          'sticky bg-inherit': props?.frozen, // Frozen Columns
          'border-x border-y': context?.showGridlines,
        },
      ),
    }),
    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',
        {
          'p-2': context?.size === 'small',
          'p-5': context?.size === 'large',
          'p-4': !context.size,
        },
        'dark:text-white/80 dark:bg-gray-900 dark:border-blue-900/40',
        {
          'border-x border-y': context?.showGridlines,
        },
      ),
    }),
    sorticon: ({ context }) => ({
      className: classNames(
        'ml-2',
        context.sorted ? 'text-primary-700 dark:text-white/80' : 'text-slate-700 dark:text-white/70',
      ),
    }),
    sortbadge: {
      className: classNames(
        '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',
      ),
    },
    columnfilter: 'inline-flex items-center ml-auto',
    filteroverlay: {
      className: classNames(
        'tw-bg-white text-gray-600 border-0 rounded-md min-w-[12.5rem]',
        'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80',
      ),
    },
    filtermatchmodedropdown: {
      root: 'min-[0px]:flex mb-2',
    },
    filterrowitems: 'm-0 p-0 py-3 list-none',
    filterrowitem: ({ context }) => ({
      className: classNames(
        'm-0 py-3 px-5 bg-transparent',
        'transition duration-200',
        context?.highlighted
          ? 'text-blue-700 bg-primary-100 dark:text-white/80 dark:bg-blue-300'
          : 'text-gray-600 bg-transparent dark:text-white/80 dark:bg-transparent',
      ),
    }),
    filteroperator: {
      className: classNames(
        'px-5 py-3 border-b border-solid border-gray-300 text-slate-700 bg-slate-50 rounded-t-md',
        'dark:border-blue-900/40 dark:text-white/80 dark:bg-gray-900',
      ),
    },
    filteroperatordropdown: {
      root: 'min-[0px]:flex',
    },
    filterconstraint: 'p-5 border-b border-solid border-gray-300 dark:border-blue-900/40',
    filteraddrule: 'py-3 px-5',
    filteraddrulebutton: {
      root: 'justify-center w-full min-[0px]:text-sm',
      label: 'flex-auto grow-0',
      icon: 'mr-2',
    },
    filterremovebutton: {
      root: 'ml-2',
      label: 'grow-0',
    },
    filterbuttonbar: 'flex items-center justify-between p-5',
    filterclearbutton: {
      root: 'w-auto min-[0px]:text-sm border-primary-500 text-primary-500 px-4 py-3',
    },
    filterapplybutton: {
      root: 'w-auto min-[0px]:text-sm px-4 py-3',
    },
    filtermenubutton: ({ context }: { context: { active: boolean } }) => ({
      className: classNames(
        '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-primary-50 text-primary-700': context.active,
        },
      ),
    }),
    headerfilterclearbutton: ({ context }: { context: { hidden: boolean } }) => ({
      className: classNames(
        '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: 'block absolute top-0 right-0 m-0 w-2 h-full p-0 cursor-col-resize border border-transparent',
    rowreordericon: 'cursor-move',
    roweditorinitbutton: {
      className: classNames(
        '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: {
      className: classNames(
        '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: {
      className: classNames(
        '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: {
      className: classNames('relative inline-flex cursor-pointer select-none align-bottom', 'w-6 h-6'),
    },
    radiobutton: ({ context }: { context: { checked: boolean; disabled: boolean } }) => ({
      className: classNames(
        '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-primary-500 bg-primary-500 dark:border-primary-400 dark:bg-primary-400'
          : 'border-gray-300 tw-bg-white dark:border-primary-900/40 dark:bg-gray-900',
        {
          'hover:border-primary-500 dark:hover:border-primary-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: ({ context }: { context: { checked: boolean } }) => ({
      className: classNames(
        'transform rounded-full',
        'block w-3 h-3 transition duration-200 tw-bg-white dark:bg-gray-900',
        {
          'backface-hidden scale-10 invisible': !context.checked,
          'transform scale-100 visible': context.checked,
        },
      ),
    }),
    headercheckboxwrapper: {
      className: classNames('cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6'),
    },
    headercheckbox: ({ context }: { context: { checked: boolean; disabled: boolean } }) => ({
      className: classNames(
        'flex items-center justify-center',
        'border-2 w-6 h-6 text-gray-600 rounded-lg transition-colors duration-200',
        context.checked
          ? 'border-primary-500 bg-primary-500 dark:border-primary-400 dark:bg-primary-400'
          : 'border-gray-300 tw-bg-white dark:border-primary-900/40 dark:bg-gray-900',
        {
          'hover:border-primary-500 dark:hover:border-primary-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: 'w-4 h-4 transition-all duration-200 text-white text-base dark:text-gray-900',
    checkboxwrapper: {
      className: classNames('cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6'),
    },
    checkbox: ({ context }: { context: { checked: boolean; disabled: boolean } }) => ({
      className: classNames(
        'flex items-center justify-center',
        'border-2 w-6 h-6 text-gray-600 rounded-lg transition-colors duration-200',
        context.checked
          ? 'border-primary-500 bg-primary-500 dark:border-primary-400 dark:bg-primary-400'
          : 'border-gray-300 tw-bg-white dark:border-primary-900/40 dark:bg-gray-900',
        {
          'hover:border-primary-500 dark:hover:border-primary-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: 'w-4 h-4 transition-all duration-200 text-white text-base dark:text-gray-900',
    transition: TRANSITIONS.overlay,
  },
  bodyrow: ({ context }) => ({
    className: classNames(
      context.selected
        ? 'bg-primary-50 text-primary-700 dark:bg-blue-300 overflow-hidden'
        : 'bg-white text-secondary-600 dark:bg-gray-900 overflow-hidden',
      context.stripedRows
        ? context.index % 2 === 0
          ? 'tw-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
      },
    ),
  }),
  rowexpansion: 'tw-bg-white text-gray-600 dark:bg-gray-900 dark:text-white/80',
  rowgroupheader: {
    className: classNames('sticky z-[1]', 'tw-bg-white text-gray-600', 'transition duration-200'),
  },
  rowgroupfooter: {
    className: classNames('sticky z-[1]', 'tw-bg-white text-gray-600', 'transition duration-200'),
  },
  rowgrouptoggler: {
    className: classNames(
      'text-left m-0 p-0 cursor-pointer select-none',
      'inline-flex items-center justify-center overflow-hidden relative',
      'w-8 h-8 text-gray-500 border-0 bg-transparent rounded-[50%]',
      'transition duration-200',
      'dark:text-white/70', // Dark Mode
    ),
  },
  rowgrouptogglericon: 'inline-block w-4 h-4',
  resizehelper: 'absolute hidden w-px z-10 bg-blue-500 dark:bg-blue-300',
}

2 replies

BottomleyIan Nov 25, 2023
Author

Yes thanks, something like that, I will try on it on Monday. I am trying to build up the whole pass through in the wrapper
<PrimeReactProvider value={{ unstyled: true, pt: {} }}> <App /> </PrimeReactProvider>

Dalorzo Nov 25, 2023

@BottomleyIan allow me to make a Repo to share them all, the one above is a bit customized to an app I was working on.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

PrimeTek

Typescript, Tailwind and PrimeReactPTOptions #545

{{title}}

Replies: 2 comments 2 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

PrimeTek

Typescript, Tailwind and PrimeReactPTOptions #545

BottomleyIan Nov 24, 2023

Replies: 2 comments · 2 replies

melloware Nov 24, 2023 Collaborator

Dalorzo Nov 24, 2023

BottomleyIan Nov 25, 2023 Author

Dalorzo Nov 25, 2023

BottomleyIan
Nov 24, 2023

Replies: 2 comments 2 replies

melloware
Nov 24, 2023
Collaborator

Dalorzo
Nov 24, 2023

BottomleyIan Nov 25, 2023
Author