Prime Community Forum

Posted: **03 Oct 2019, 14:02**

I'm trying to use PrimeVue DataTable and stuck in the following: how to set background color for whole single table cell ? if i use a style inside slots, then the style is applied to nested div(for example) and background doesn't fully fill the cell (since there is padding in td style) and

Code: Select all

 
 <Column field="field" header="Field">
 	<template #body="slotProps">
		<div :class="{ 'am-warn-cell': slotProps.data.field == '0'}">
			{{slotProps.data.field}}
		</div>
	</template>
</Column>

is not what is required.
So how can one set specific class with 'background-color' on whole 'td' tag depending on the cell content ?
Any help will be appreciated

Posted: **24 Oct 2019, 09:34**

I'd remove the padding so that your div covers the whole cell.

Code: Select all

<Column field="field" header="Field" bodyStyle="padding: 0">
 	<template #body="slotProps">
		<div :class="{ 'am-warn-cell': slotProps.data.field == '0'}" style="padding: 0.429em 0.857em">
			{{slotProps.data.field}}
		</div>
	</template>
</Column>

As this is a common case, we'll put up a sample at PrimeVue like we did for NG and React;

https://www.primefaces.org/primeng/#/table/style
https://www.primefaces.org/primereact/#/datatable/style

Prime Community Forum

Dynamic background color on single cell of DataTable

Dynamic background color on single cell of DataTable

Re: Dynamic background color on single cell of DataTable