8000 storybook: add example custom filter datatable · rabrowne85/coreui-vue@f6898b2 · GitHub
[go: up one dir, main page]
Skip to content

Commit f6898b2

Browse files
rakieta2015rakieta2015
committed
storybook: add example custom filter datatable
1 parent 6f32aa4 commit f6898b2

File tree

1 file changed

+89
-1
lines changed

1 file changed

+89
-1
lines changed

‎stories/CDataTable.stories.js

Lines changed: 89 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import CCol from '../src/components/grid/CCol'
1515

1616
storiesOf('CDataTable', module)
1717
.addDecorator(withKnobs)
18-
.add('single', () => {
18+
.add('Standard example', () => {
1919

2020
const items = [
2121
{ username: 'Samppa Nori', registered: '2012/01/01', role: 'Member', status: 'Active'},
@@ -241,4 +241,92 @@ storiesOf('CDataTable', module)
241241
</CCol>
242242
`
243243
}
244+
}).add('Custom example', () => {
245+
return {
246+
components: { CCol, CCard, CCardBody, CDataTable, CIcon },
247+
data: function(){
248+
return {
249+
items: [
250+
{ username: 'Samppa Nori', registered: { date: '2012/01/01', timestamp: 1325376000000 }, role: 'Member', status: 'Active'},
251+
{ username: 'Estavan Lykos', registered: { date: '2012/02/01', timestamp: 1328054400000 }, role: 'Staff', status: 'Banned'},
252+
{ username: 'Chetan Mohamed', registered: { date: '2012/02/01', timestamp: 1328054400000 }, role: 'Admin', status: 'Inactive'},
253+
{ username: 'Derick Maximinus', registered: { date: '2012/03/01', timestamp: 1330560000000 }, role: 'Member', status: 'Pending'},
254+
{ username: 'Friderik Dávid', registered: { date: '2012/01/21', timestamp: 1327104000000 }, role: 'Staff', status: 'Active'},
255+
],
256+
fields: [
257+
'username',
258+
{ key: 'registeredTimestamp', label: 'Registered' },
259+
'role',
260+
'status'
261+
],
262+
startDate: 1325376000000,
263+
endDate: 1330560000000
264+
}
265+
},
266+
computed: {
267+
computedItems () {
268+
return this.items.map(item => {
269+
return {
270+
...item,
271+
registeredTimestamp: item.registered.timestamp,
272+
registeredDate: item.registered.date
273+
}
274+
})
275+
},
276+
dateFilteredItems() {
277+
return this.computedItems.filter(item => {
278+
const date = item.registeredTimestamp
279+
return date >= this.startDate && date <= this.endDate
280+
})
281+
}
282+
},
283+
methods: {
284+
setDateFilter (e, end) {
285+
if (end) {
286+
this.endDate = new Date(e.target.value).getTime()
287+
} else {
288+
this.startDate = new Date(e.target.value).getTime()
289+
}
290+
}
291+
},
292+
template:`
293+
<CCol lg="12" xs="12">
294+
<CCard>
295+
<CCardBody>
296+
<CCardBody>
297+
<CDataTable
298+
:items="dateFilteredItems"
299+
:fields="fields"
300+
sorter
301+
column-filter
302+
hover
303+
>
304+
<template #registeredTimestamp-filter="{item}">
305+
From:
306+
<input
307+
type="date"
308+
:value="new Date(startDate).toISOString().substr(0, 10)"
309+
@change="setDateFilter"
310+
class="mr-2"
311+
/>
312+
To:
313+
<input
314+
type="date"
315+
:value="new Date(endDate).toISOString().substr(0, 10)"
316+
@change="e => setDateFilter(e, 'end')"
317+
/>
318+
</template>
319+
<template #registeredTimestamp="{item}">
320+
<td>
321+
{{ item.registeredDate }}
322+
</td>
323+
</template>
324+
</CDataTable>
325+
</CCardBody>
326+
327+
</CCardBody>
328+
</CCard>
329+
</CCol>
330+
`
331+
}
244332
})

0 commit comments

Comments
 (0)
0