Datatable size doesn't work with unstyled mode + tailwind

[anchan42]

I try this example code from the doc but it won't work. The padding for the table would not change.

<SelectButton v-model="size" :options="sizeOptions" optionLabel="label" dataKey="label" />
<DataTable :value="products" :class="`p-datatable-${size.class}`" tableStyle="min-width: 50rem">
    <Column field="code" header="Code"></Column>
    <Column field="name" header="Name"></Column>
    <Column field="category" header="Category"></Column>
    <Column field="quantity" header="Quantity"></Column>
</DataTable>

In the theming, tailwind section I can see that the padding is controlled by context?.size but I'm not sure how to use it.
How do I set the context?.size from datatable components?

 headercell: ({ context, props }) => ({
                class: [
                    '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
                    }
                ]
            }),

[tugcekucukoglu]

As I can see you're trying to add size functionality using classes. The best way to use Tailwind with the DataTable size example is using size property. https://primevue.org/datatable/#api.datatable.props.size

[anchan42]

That works like a charm. Thank you 👍