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