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

feat(Table): add custom sort function to columns (#1075)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Ragura
2024-01-08 12:28:19 +01:00
committed by GitHub
parent 893b2466ff
commit 4f3af6cfdb
2 changed files with 17 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -28,6 +28,7 @@ Use the `columns` prop to configure which columns to display. It's an array of o
- `sortable` - Whether the column is sortable. Defaults to `false`.
- `direction` - The sort direction to use on first click. Defaults to `asc`.
- `class` - The class to apply to the column cells.
- `sortFn` - A function that is used to sort the column, comparable to what would be passed to the Javascript `sort` function. Defaults to a simple _greater than_ / _less than_ comparison.
::component-example{class="grid"}
---

27
src/runtime/components/data/Table.vue
View File

@@ -108,7 +108,7 @@ export default defineComponent({
default: () => []
},
columns: {
type: Array as PropType<{ key: string, sortable?: boolean, direction?: 'asc' | 'desc', class?: string, [key: string]: any }[]>,
type: Array as PropType<{ key: string, sortable?: boolean, sortFn?: (a: any, b: any, direction: 'asc' | 'desc') => number, direction?: 'asc' | 'desc', class?: string, [key: string]: any }[]>,
default: null
},
columnAttribute: {
@@ -156,12 +156,24 @@ export default defineComponent({
setup (props, { emit, attrs: $attrs }) {
const { ui, attrs } = useUI('table', toRef(props, 'ui'), config, toRef(props, 'class'))
const columns = computed(() => props.columns ?? Object.keys(props.rows[0] ?? {}).map((key) => ({ key, label: upperFirst(key), sortable: false, class: undefined })))
const columns = computed(() => props.columns ?? Object.keys(props.rows[0] ?? {}).map((key) => ({ key, label: upperFirst(key), sortable: false, class: undefined, sortFn: defaultSortFn })))
const sort = ref(defu({}, props.sort, { column: null, direction: 'asc' }))
const defaultSort = { column: sort.value.column, direction: null }
function defaultSortFn (a: any, b: any, direction: 'asc' | 'desc') {
if (a === b) {
return 0
}
if (direction === 'asc') {
return a < b ? -1 : 1
} else {
return a > b ? -1 : 1
}
}
const rows = computed(() => {
if (!sort.value?.column) {
return props.rows
@@ -173,15 +185,8 @@ export default defineComponent({
const aValue = get(a, column)
const bValue = get(b, column)
if (aValue === bValue) {
return 0
}
if (direction === 'asc') {
return aValue < bValue ? -1 : 1
} else {
return aValue > bValue ? -1 : 1
}
const sortFn = columns.value.find((col) => col.key === column)?.sortFn ?? defaultSortFn
return sortFn(aValue, bValue, direction)
})
})