Vue3-datatables
  • Dependencies & Compatability
  • Getting Started
  • Client Table
    • Asynchronous Loading
    • Grouping
    • Filtering Algorithm
    • Editable Cells
  • Server Table
    • Implementations
    • Custom Request Function
    • Setting Multiple Request Parameters
    • Error Message
    • Draw Counter
  • Dependencies & Compatability
  • Getting Started
  • Virtual Pagination
  • Column Templates
  • Nested Data Structures
  • Selectable Rows
  • List Filters
  • Custom Template
  • Custom Filters
  • Multiple Sorting
  • Date Columns
  • Custom Sorting
  • Conditional Cell Styling
  • Columns Visibility
  • Child Rows
  • Properties
  • Slots
  • Methods
  • Events
Powered by GitBook
On this page

Conditional Cell Styling

The `cellClasses` option allows you to conditionally add class(es) to the `td` element based on predefined conditions.

For example, say you want to add a `low-balance` class to cells in a `balance` column that has a value of less than 100:

cellClasses:{

balance: [

{

class:'low-balance',

condition: row => row.balance < 100

}

]

}

​

​

​

PreviousCustom SortingNextColumns Visibility