File size: 1,906 Bytes
11c32ae |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
import { DataTable } from 'primereact/datatable'
import { Column } from 'primereact/column'
import { FilterMatchMode } from 'primereact/api'
import { useState } from 'react'
const DatasetTable = ({ data }) => {
const [filters, setFilters] = useState({
name: { value: null, matchMode: FilterMatchMode.CONTAINS },
author: { value: null, matchMode: FilterMatchMode.IN },
n_languages: { value: null, matchMode: FilterMatchMode.BETWEEN },
tasks: { value: null, matchMode: FilterMatchMode.IN },
parallel: { value: null, matchMode: FilterMatchMode.EQUALS },
base: { value: null, matchMode: FilterMatchMode.IN },
implemented: { value: null, matchMode: FilterMatchMode.EQUALS },
})
const table = data.dataset_table
const nameBodyTemplate = rowData => {
return <div style={{ fontWeight: 'bold' }}>{rowData.name}</div>
}
return (
<DataTable
value={table}
header={<>Datasets</>}
removableSort
filters={filters}
filterDisplay='menu'
scrollable
scrollHeight='500px'
style={{ minWidth: '200px', width: "50%" }}
>
{/* <Column
field='implemented'
header='Implemented'
filter
style={{ minWidth: '5rem' }}
/> */}
<Column
field='author'
header='Author'
filter
showFilterMatchModes={false}
style={{ minWidth: '5rem' }}
/>
<Column
field='name'
header='Name'
body={nameBodyTemplate}
filter
style={{ minWidth: '5rem' }}
frozen
/>
<Column
field='tasks'
header='Tasks'
filter
style={{ minWidth: '5rem', maxWidth: '10rem' }}
/>
<Column
field='n_languages'
header='#Languages'
filter
sortable
style={{ minWidth: '10rem' }}
/>
</DataTable>
)
}
export default DatasetTable
|