npm i git+https://github.com/iColabora/quasar-table-filter.git#semver:^0.1.0Create a file in boot with content:
import QTableFilter from 'quasar-table-filter/src/components/QTableFilter'
export default ({ Vue }) => {
Vue.component('QTableFilter', QTableFilter)
Vue.component('q-table-filter', QTableFilter)
}This compoent use <q-table> base from Quasar.
Like quasar default with follow properties:
| Property | Type | Default | Values | Description |
|---|---|---|---|---|
| filter_type | String | text | text, select | Filter header type |
| disableFilter | Boolean | false | true, false | Hide filter column |
IMPORTANT: Property name must be equal field property, except field of type function, where property name must be equal first key in function. Example:
[
{ name: 'protocol', required: true, label: 'Protocol', align: 'center', field: 'protocol' },
{ name: 'my_company', align: 'center', label: 'Company', field: row => row.my_company ? row.my_company.fantasyName : '', filter_type: 'select' }
]| Name | Type | Default | Description |
|---|---|---|---|
| data | Array | null | Rows of data to display |
| columns | Array | null | The column definitions (Array of Objects) |
| visible-columns | Array | null | Array of Strings defining column names ('name' property of each column from 'columns' prop definitions); Columns marked as 'required' are not affected by this property |
| classes | String | Classes in table | |
| separator | String | horizontal | Use a separator/border between rows, columns or all cells |
| header-filter | Boolean | false | Show after column name, a button to show a filter column |
| columns-filter | Boolean | false | Show on header a line with filter each column |
| dense | Boolean | false | Dense mode; Connect with $q.screen for responsive behavior |
| dark | Boolean | false | Notify the component that the background is a dark color |
| flat | Boolean | false | Applies a 'flat' design (no default shadow) |
| bordered | Boolean | false | Applies a default border to the component |
| square | Boolean | false | Removes border-radius so borders are squared |
| loading | Boolean | false | Put Table into 'loading' state; Notify the user something is happening behind the covers |
| no-data-label | String | Override default text to display when no data is available | |
| selection | String | Selection type | |
| table-header-class | String | CSS classes to apply to header of native HTML |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent