0.0.25 • Published 5 years ago
pkui-designs v0.0.25
pkui-designs
Data grid with virtualization and lazy loading Autocomplete/typeahead Input Fields Checkboxes RadioButton Switches
Install
npm install --save pkui-designs
yarn add pkui-designs
Usage
import React, { Component } from 'react'
import { Grid, AutoComplete, Select, Input, CheckBox, RadioButton, Switch } from 'pkui-designs'
class App extends Component {
render () {
return (
<Grid
data={[]} // actual row data
headers={[]} // columns
id={'pkgrid'} // unique identifier
height={540} // height of the container
hasMore={hasMore} // if grid has more data to load -- boolean
loadMore={() => {}} // lazy loading function
showLazyLoader={showLazyLoader} // show rows loader -- boolean
loading={loading} // show grid loader -- boolean
serverSorting={true} // enable api call
serverFiltering={true} // enable api call
onFilter={filters => {}} // filter function
onSort={sort => {}} // sort function
onRowClick={row => {}} // on row click function
rowHeight={34} // default 34
autoFitColumn={true} // if columns to be fit into the provided width
/>
<AutoComplete
dataSource={[]}
multiple={false}
id={'single'}
onRemove={() => {}}
onChange={selected => {}}
onSelect={(value, selected) => {}}
onInputChange={(e, value) => {}}
placeholder={'Select country...'}
defaultFirstOptionSelected={true}
openDropDownOnFocus={false}
isAsync={true}
loading={false}
value={''}
open={true}
selectOnBlur={false}
animate={true||false}
/>
<Select
dataSource={[]}
placeHolder={''}
selected={anyof('', {})}
onSelect={selected => {}}
id={'id'}
animate={true||false}
/>
<Input
placeholder='Enter user name'
label='Enter user name'
showClear={true}
onChange={e => {}}
value={''}
/>
<CheckBox
label={'label text'}
checked={true||false}
disabled={true||false}
onChange={checked => {}}
name={'checkboxname'}
/>
<RadioButton
options={[{ label: 'Label', value: 'label' }]}
selected={selectedValue}
onChange={selected => {}}
/>
<Switch
checked={true||false}
disabled={true||false}
onChange={checked => {}}
/>
)
}
}
License
MIT © PrabhuKathiresan
0.0.25
5 years ago
0.0.24
5 years ago
0.0.23
5 years ago
0.0.22
5 years ago
0.0.21
5 years ago
0.0.20
5 years ago
0.0.19
5 years ago
0.0.18
5 years ago
0.0.17
5 years ago
0.0.16
5 years ago
0.0.15
5 years ago
0.0.14
5 years ago
0.0.13
5 years ago
0.0.12
5 years ago
0.0.11
5 years ago
0.0.10
5 years ago
0.0.9
5 years ago
0.0.8
5 years ago
0.0.7
5 years ago
0.0.6
5 years ago
0.0.5
5 years ago
0.0.4
5 years ago
0.0.3
5 years ago
0.0.2
5 years ago
0.0.1
5 years ago
0.0.0
5 years ago