From 3d1fd6391d458ac5d17aa147e525dca79e81d709 Mon Sep 17 00:00:00 2001 From: Larry Williamson Date: Mon, 23 Sep 2024 04:58:15 -0400 Subject: [PATCH] docs(table): add additional custom sort details (#2234) --- docs/content/2.components/table.md | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/docs/content/2.components/table.md b/docs/content/2.components/table.md index fa1702bb40..e2991ca84a 100644 --- a/docs/content/2.components/table.md +++ b/docs/content/2.components/table.md @@ -30,7 +30,19 @@ Use the `columns` prop to configure which columns to display. It's an array of o - `direction` - The sort direction to use on first click. Defaults to `asc`. - `class` - The class to apply to the column cells. - `rowClass` - The class to apply to the data column cells. :u-badge{label="New" class="!rounded-full" variant="subtle"} -- `sort` - Pass your own `sort` function. Defaults to a simple _greater than_ / _less than_ comparison. +- `sort` - Pass your own `sort` function. Defaults to a simple _greater than_ / _less than_ comparison. + +Arguments for the `sort` function are: Value A, Value B, Direction - 'asc' or 'desc' + +Example `sort` function: +``` +(a, b, direction) => { + if (!a || !b) return 0 + const aPrice = parseInt(a.replace(/[,$]/g, "")) + const bPrice = parseInt(b.replace(/[,$]/g, "")) + return direction === "asc" ? aPrice - bPrice : bPrice - aPrice +} +``` ::component-example{class="grid"} ---