adjust style and default value, and add docs

docs/components/table.md

@@ -364,7 +364,7 @@ const options = useTable({
 Below are the complete list of options you may pass to the text type cell.
 
 ```ts
-export interface TableCellNumber {
+export interface TableCellText {
   // Type of the cell. Must be `text`.
   type: 'text'
 
@@ -467,6 +467,61 @@ export type TableCellValueColor =
   | 'danger'
 ```
 
+### Actions cell
+
+Actions type cell displays any number of actions as a clickable button in the cell by defining `type: 'actions'`. Usually, place actions at the end of the column.
+
+```ts
+import IconNotePencil from '@iconify-icons/ph/note-pencil'
+import IconTrash from '@iconify-icons/ph/trash'
+
+const options = useTable({
+  orders: ['actions'],
+  columns: {
+    age: {
+      cell: {
+        type: 'actions',
+        actions: [
+          { icon: IconNotePencil, onClick: () => {} },
+          { icon: IconTrash, onClick: () => {} }
+        ]
+      }
+    }
+  }
+})
+```
+
+Below are the complete list of options you may pass to the actions type cell. Each action is a `<SButton :type="text">` instances. You may pass options such as `mode` or `label` to them. 
+
+```ts
+import { type IconifyIcon } from '@iconify/vue/dist/offline'
+
+interface TableCellActions {
+  // Type of the cell. Must be `actions`.
+  type: 'number'
+
+  // Options for button stylings. Refer to `<SButton>` docs
+  // for more details. Note that for actions, `type` is fixed
+  // to `text`, and `mode` defaults to `mute`.
+  mode?: ColorModes
+  icon?: IconifyIcon
+  iconMode?: ColorModes
+  label?: string
+  labelMode?: ColorModes
+
+  // Callback function when the button is clicked.
+  onClick(value: any, record: any): void
+}
+
+type ColorModes =
+  | 'neutral'
+  | 'mute'
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'danger'
+```
+
 ### Summary row
 
 You may define `summary` option to display a summary row at the bottom of the table. It's useful to display information such as the total of each column.

lib/components/STableCellActions.vue

@@ -16,7 +16,7 @@ defineProps<{
       :key="i"
       size="mini"
       type="text"
-      :mode="action.mode"
+      :mode="action.mode ?? 'mute'"
       :icon="action.icon"
       :icon-mode="action.iconMode"
       :label="action.label"
@@ -34,6 +34,5 @@ defineProps<{
   justify-content: center;
   flex-wrap: nowrap;
   flex-direction: row;
-  gap: 2px;
 }
 </style>

stories/components/STable.01_Playground.story.vue

@@ -271,18 +271,15 @@ const table = useTable({
         actions: [
           {
             icon: markRaw(IconCheck),
-            onClick: () => { alert('Publish') },
-            mode: 'success'
+            onClick: () => { alert('Publish') }
           },
           {
             icon: markRaw(IconNotePencil),
-            onClick: () => { alert('Edit') },
-            labelMode: 'neutral'
+            onClick: () => { alert('Edit') }
           },
           {
             icon: markRaw(IconTrash),
-            onClick: () => { alert('Delete') },
-            mode: 'danger'
+            onClick: () => { alert('Delete') }
           }
         ]
         /* eslint-enable */
@@ -373,7 +370,7 @@ function updateTagsFilter(value: string) {
 .table :deep(.col-width)     { --table-col-width: 128px; }
 .table :deep(.col-tags)      { --table-col-width: 192px; }
 .table :deep(.col-createdAt) { --table-col-width: 192px; }
-.table :deep(.col-actions)   { --table-col-width: 128px; }
+.table :deep(.col-actions)   { --table-col-width: 100px; }
 
 .table {
   margin-bottom: 16px;