in seatunnel-ui/src/views/datasource/list/index.tsx [105:171]
render() {
const {
t,
showSourceModal,
columns,
list,
page,
pageSize,
itemCount,
changePage,
changePageSize,
onCreate,
handleSelectSourceType,
closeSourceModal
} = this
return (
<NSpace vertical>
<NCard title={t('datasource.datasource')}>
{{
'header-extra': () => (
<NSpace>
<NInput
v-model={[this.searchVal, 'value']}
placeholder={t('datasource.search_input_tips')}
style={{ width: '200px' }}
/>
<NButton onClick={this.handleSearch} type='primary'>
{this.t('datasource.search')}
</NButton>
<NButton
onClick={onCreate}
type='success'
>
{t('datasource.create')}
</NButton>
</NSpace>
)
}}
</NCard>
<NCard>
<NDataTable
row-class-name='data-source-items'
columns={columns}
data={list}
striped
/>
<NPagination
page={page}
page-size={pageSize}
item-count={itemCount}
show-quick-jumper
show-size-picker
page-sizes={[10, 30, 50]}
class={styles['pagination']}
on-update:page={changePage}
on-update:page-size={changePageSize}
/>
</NCard>
<SourceModal
show={showSourceModal}
onChange={handleSelectSourceType}
onCancel={closeSourceModal}
/>
</NSpace>
)
}