arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 20:19:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs: migrate to @nuxthq/ui-kit (#405)

Browse Source 
Co-authored-by: Sébastien Chopin <seb@nuxt.com>
This commit is contained in:
Benjamin Canac
2023-07-17 14:49:50 +02:00
committed by GitHub
parent 2ec28e7cbd
commit 31d571abb5
71 changed files with 2155 additions and 2638 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
docs/content/4.data/1.table.md
View File

@@ -1,6 +1,9 @@
---
github: true
description: 'Display data in a table.'
links:
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/data/Table.vue
---
## Usage
@@ -210,7 +213,7 @@ You can specify a default sort for the table through the `sort` prop. It's an ob
- `column` - The column to sort by.
- `direction` - The sort direction. Can be either `asc` or `desc` and defaults to `asc`.
::alert{icon="i-heroicons-light-bulb"}
::callout{icon="i-heroicons-light-bulb"}
This will set the default sort and will work even if no column is set as `sortable`.
::
@@ -289,7 +292,7 @@ Use the `sort-asc-icon` prop to set a different icon or change it globally in `u
Use the `sort-desc-icon` prop to set a different icon or change it globally in `ui.table.default.sortDescIcon`. Defaults to `i-heroicons-bars-arrow-down-20-solid`.
::alert{icon="i-heroicons-light-bulb"}
::callout{icon="i-heroicons-light-bulb"}
You can also customize the entire header cell, read more in the [Slots](#slots) section.
::
@@ -320,7 +323,7 @@ const selected = ref([people[1]])
```
::
::alert{icon="i-heroicons-light-bulb"}
::callout{icon="i-heroicons-light-bulb"}
You can use the `by` prop to compare objects by a field instead of comparing object instances. We've replicated the behavior of Headless UI [Combobox](https://headlessui.com/vue/combobox#binding-objects-as-values).
::
@@ -500,7 +503,7 @@ The `sort` property is an object with the following properties:
The `on-sort` property is a function that you can call to sort the table and accepts the column as parameter.
::alert{icon="i-heroicons-light-bulb"}
::callout{icon="i-heroicons-light-bulb"}
Even though you can customize the sort button as mentioned in the [Sortable](#sortable) section, you can use this slot to completely override its behavior, with a custom dropdown for example.
::