Vue Screener

Easily search and filter data in Vue3


Documentation

Install

``bash
npm install vue-screener


or

`vue



`

Remote Control

Control the state externally using the useVueScreener hook:

`vue



`

Component Props

You can also configure options directly through VueScreener component props:

`vue

`

Custom Styling

You can customize the appearance and layout by composing your own table using individual components. Here's an example:

`vue



`

Configuration Options

$3

* contentHeight: String - CSS height value for fixed height with scroll (optional)
* defaultCurrentPage: Number (default: 1)
* defaultRowsPerPage: Number (default: 10)
* defaultSortField: String
* defaultSortDirection: 'asc' | 'desc'
* columns: Column configuration object
* disableSearchHighlight: Boolean (default: false)
* loading: Boolean (default: false)

$3

* data: Array of data (optional)
* screener: VueScreener state from useVueScreener (optional)
* class: String (optional)
* contentHeight: String - CSS height value for fixed height with scroll (optional)
* defaultCurrentPage: Number (default: 1)
* defaultRowsPerPage: Number (default: 10)
* defaultSortField: String
* defaultSortDirection: 'asc' | 'desc'
* columns: Column configuration object
* disableSearchHighlight: Boolean (default: false)
* loading: Boolean (default: false)
* title: String (optional)

$3

`ts
interface Column {
width?: string | number
label?: string
order?: number
isPinned?: boolean
isSortable?: boolean
hidden?: boolean
format?: (value: any, row: Row) => string
}
`

$3

You can update options after initialization via the props or using the setOptions action:

`ts
screener.actions.setOptions({
contentHeight: '600px',
disableSearchHighlight: true,
loading: true
})
``

License

MIT