From 874447cb41a77868513459eee5d3301fe8b8e9a1 Mon Sep 17 00:00:00 2001
From: "Haytham A. Salama" <haythamasalama@gmail.com>
Date: Thu, 28 Sep 2023 13:11:26 +0300
Subject: [PATCH] feat(Table): add ability to custom style for  `td` and  `tr`
 (#741)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 .../content/examples/TableExampleStyle.vue    | 40 +++++++++++++
 docs/content/4.data/1.table.md                | 59 +++++++++++++++++++
 src/runtime/components/data/Table.vue         |  4 +-
 3 files changed, 101 insertions(+), 2 deletions(-)
 create mode 100644 docs/components/content/examples/TableExampleStyle.vue

diff --git a/docs/components/content/examples/TableExampleStyle.vue b/docs/components/content/examples/TableExampleStyle.vue
new file mode 100644
index 0000000000..905f92880d
--- /dev/null
+++ b/docs/components/content/examples/TableExampleStyle.vue
@@ -0,0 +1,40 @@
+<script setup>
+const columns = [{
+  key: 'id',
+  label: '#'
+}, {
+  key: 'quantity',
+  label: 'Quantity',
+  class: 'italic'
+}, {
+  key: 'name',
+  label: 'Name'
+}]
+
+const items = [{
+  id: 1,
+  name: 'Apple',
+  quantity: { value: 100, class: 'bg-green-500/50 dark:bg-green-400/50' }
+}, {
+  id: 2,
+  name: 'Orange',
+  quantity: { value: 0 },
+  class: 'bg-red-500/50 dark:bg-red-400/50 animate-pulse'
+}, {
+  id: 3,
+  name: 'Banana',
+  quantity: { value: 30, class: 'bg-green-500/50 dark:bg-green-400/50' }
+}, {
+  id: 4,
+  name: 'Mango',
+  quantity: { value: 5, class: 'bg-green-500/50 dark:bg-green-400/50' }
+}]
+</script>
+
+<template>
+  <UTable :rows="items" :columns="columns">
+    <template #quantity-data="{ row }">
+      {{ row.quantity.value }}
+    </template>
+  </UTable>
+</template>
diff --git a/docs/content/4.data/1.table.md b/docs/content/4.data/1.table.md
index 05d8ba2079..cb2f369d69 100644
--- a/docs/content/4.data/1.table.md
+++ b/docs/content/4.data/1.table.md
@@ -524,6 +524,65 @@ excludedProps:
 ---
 ::
 
+## Styling
+
+You can apply styles to `tr` and `td` elements by passing a `class` to rows.
+
+Also, you can apply styles to `th` elements by passing a `class` to columns.
+
+::component-example
+---
+padding: false
+---
+
+#default
+:table-example-style{class="w-full"}
+
+#code
+```vue
+<script setup>
+const columns = [{
+  key: 'id',
+  label: '#'
+}, {
+  key: 'quantity',
+  label: 'Quantity',
+  class: 'italic' // Apply style to column header
+}, {
+  key: 'name',
+  label: 'Name'
+}]
+
+const items = [{
+  id: 1,
+  name: 'Apple',
+  quantity: { value: 100, class: 'bg-green-500/50 dark:bg-green-400/50' } // Apply style to td
+}, {
+  id: 2,
+  name: 'Orange',
+  quantity: { value: 0 },
+  class: 'bg-red-500/50 dark:bg-red-400/50 animate-pulse' // Apply style to tr
+}, {
+  id: 3,
+  name: 'Banana',
+  quantity: { value: 30, class: 'bg-green-500/50 dark:bg-green-400/50' }
+}, {
+  id: 4,
+  name: 'Mango',
+  quantity: { value: 5, class: 'bg-green-500/50 dark:bg-green-400/50' }
+}]
+</script>
+
+<template>
+  <UTable :rows="items" :columns="columns">
+    <template #quantity-data="{ row }">
+      {{ row.quantity.value }}
+    </template>
+  </UTable>
+</template>
+```
+::
+
 ## Slots
 
 You can use slots to customize the header and data cells of the table.
diff --git a/src/runtime/components/data/Table.vue b/src/runtime/components/data/Table.vue
index da229a969d..2500d7c58b 100644
--- a/src/runtime/components/data/Table.vue
+++ b/src/runtime/components/data/Table.vue
@@ -49,12 +49,12 @@
         </tr>
 
         <template v-else>
-          <tr v-for="(row, index) in rows" :key="index" :class="[ui.tr.base, isSelected(row) && ui.tr.selected, $attrs.onSelect && ui.tr.active]" @click="() => onSelect(row)">
+          <tr v-for="(row, index) in rows" :key="index" :class="[ui.tr.base, isSelected(row) && ui.tr.selected, $attrs.onSelect && ui.tr.active, row?.class]" @click="() => onSelect(row)">
             <td v-if="modelValue" :class="ui.checkbox.padding">
               <UCheckbox v-model="selected" :value="row" aria-label="Select row" @click.stop />
             </td>
 
-            <td v-for="(column, subIndex) in columns" :key="subIndex" :class="[ui.td.base, ui.td.padding, ui.td.color, ui.td.font, ui.td.size]">
+            <td v-for="(column, subIndex) in columns" :key="subIndex" :class="[ui.td.base, ui.td.padding, ui.td.color, ui.td.font, ui.td.size, row[column.key]?.class]">
               <slot :name="`${column.key}-data`" :column="column" :row="row" :index="index" :get-row-data="(defaultValue) => getRowData(row, column.key, defaultValue)">
                 {{ getRowData(row, column.key) }}
               </slot>