Dynamic background color on single cell of DataTable

UI Components for Vue
Post Reply
alexk88
Posts: 1
Joined: 03 Oct 2019, 13:42

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

cagatay.civici
Prime
Posts: 18126
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

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

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest