VVibeFlui

Search, Filters, and Sort

Search, filters, and sorting share the table query state.

TS
table: {
  search: {
    enabled: true,
    placeholder: "Search users...",
    param: "q"
  }
}

In static mode, global search checks columns that are searchable or all columns when table search is enabled.

In server mode, search becomes a query parameter.

Filters

TS
table: {
  filters: [
    {
      key: "status",
      label: "Status",
      type: "select",
      options: [
        { label: "Active", value: "active" },
        { label: "Pending", value: "pending" }
      ]
    },
    {
      key: "createdAt",
      label: "Created date",
      type: "date"
    },
    {
      key: "isEnabled",
      label: "Enabled",
      type: "boolean",
      trueLabel: "Enabled",
      falseLabel: "Disabled"
    }
  ]
}

Supported filter types:

  • text
  • select
  • date
  • boolean
  • custom

Filter option loader

TS
table: {
  filters: [
    {
      key: "roleId",
      label: "Role",
      type: "select",
      optionLoader: "users.roles"
    }
  ]
},
registry: {
  optionLoaders: ["users.roles"]
}

Custom filter component

TS
{
  key: "status",
  label: "Status",
  type: "custom",
  component: "StatusFilter"
}

Custom filter components resolve from registry.components.

Sort

TS
table: {
  sort: {
    enabled: true,
    defaultKey: "createdAt",
    defaultDirection: "desc"
  },
  columns: [
    { key: "name", sortable: true },
    { key: "createdAt", sortable: true }
  ]
}

Only columns with sortable: true render sortable headers.