Skip to content

TableSorts

This is a row container with sort buttons that contains:

  • checkbox;
  • sorting column slot;
  • column with sort reset button.

Koncept

Creating a table is based on three columns, the two outermost of which are always present, and the middle one is filled with the appropriate table columns. This is important for adapting to the needs of the mobile view, where the user should have immediate access to specific actions within a single row.

ts
interface Column {
  title: string
  name: string
  show: boolean
}

WARNING

Currently, columns are not hidden, and only a sort reset button appears when dropdown with columns is activated. Ultimately, the interface should be developed to a form in which the table setting is taken from localstorage and this should apply to filtering and sorting. The board should have its own unique id.

Props

indeterminate
Whether the checkbox is marked as indeterminate.
type:Boolean
default:false
forceindeterminate
Forces setting as indeterminate even if the type for the list checkbox does not match.
type:Boolean
default:false
type
Type for checkbox
type:String
default:chosen
checked
Are all records marked
type:String
default:table-checkbox
sort
required
An array of sort values where each element is the string `name.desc` or `name.asc` (name is the name of the field followed by the sort)
type:Array

Slots

default
The main slot of the row
reset
Slot with a sorting reset button

Events

toggle
Selecting all rows
reset-sorts
Sorting reset

Examples

Standard without sorting
Task
Title
html
<table-sorts :sort="getSort()" >
    <div class="flex-none w-[80px]">Task</div>
    <div class="grow">Title</div>
</table-sorts>
Standard with sorting
Task
Date added
Status
html
<table-sorts :sort="getSort()" forceindeterminate indeterminate>
    <div class="flex-none w-[80px]">Task</div>
    <table-sort name="date" label="Date added" sorting :sort="getSort()" @set-sort="setSort($event)" />
    <table-sort name="status" label="Status" :sort="getSort()" @set-sort="setSort($event)" />
</table-sorts>
ts
const { setClearSort, query, loadQuery, getSort, setSort } = useQuery()
 const { toggleAll, getType } = useCheckboxes()
const readAllItems = async () => {
  return []
}
loadQuery(readAllItems)