Skip to content

A React Component to create a "custom table" very similar to the known Jquery DataTable plugin

Notifications You must be signed in to change notification settings

witalobenicio/react-custom-datatable

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

48 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-custom-datatable

A React Component to create a custom 'table' similar to the very known jquery datatable.

Features of react-datatable

  • Default theme
  • Hide and show columns
  • Hide row
  • Order ascending and descending
  • Set initial order
  • Customize headers
  • Customize items
  • Endline render
  • Row Click
  • Row Expand
  • Select rows
  • Set selected row (e.g.: for keyboard navigation feature)
  • Endless scroll
  • Sticky header

Getting started

npm install react-custom-datatable --save

CSS

To use the default theme you have to import the .less in your main .less file

Or

Use the generated .css file

Props

  • columns: an array that contains the info needed by the component to build the table
  • items: array of items used to fill the table
  • endlineRenders: an array of renders to be printed at the end of the row
  • rowActive: set the row active (index)
  • initialSortProp: property to initially sort items
  • pageStart: value of items rendered on each scroll that reaches bottom
  • useWindow: used when using endless scroll, to tell if the scroll is relative to window (default: true)
  • topOffset: int to indicate distance of header to top (in px) when sticky
  • disableSticky: disable Sticky header (default: false)
  • useShowHideColumns: enable show/hide columns (defaul: false)
  • searchProps: properties to be used by the search (setting it enables the search box)
  • renderRowExpand: it enables to click in a row and show the provided render
  • onClickRow: method to be called when user clicks on a row (if renderRowExpand is not defined)
  • enableCheck: enable select rows
  • onSelectedItemsChange: callback when user selects a row
  • hiddenRow: a method to return a boolean indicating if a row needs to be hidden
  • withoutSorting: a method to disable column sort

Examples

Basic Example

This is the basic usage of react-custom-datatable

export default class Products extends Component {

  constructor() {
    super();

    this.state = {
      products: [
      {
        reference: '3144141',
        name: 'ball'
      },
      {
        reference: '3144123',
        name: 'watch'
      },
      ],
      columns: [
        {
          name: 'REF.',
          property: 'reference',
          style: {
            width: '50%'
          }
        },
        {
          name: 'PRODUCT',
          property: 'name',
          style: {
            width: '50%'
          }
        }
      ]
    }
  }

render () {
 return (
  <Table
    id="table-products"
    ref="table-products"
    columns={this.state.columns}
    items={this.state.products}
    pageStart={30}
    useWindow={true}
  />
 ); 
}
}

Render items, headers and endlineRenders

You can render custom headers and items by following:

export default class Products extends Component {

  constructor() {
    super();

    this.state = {
      products: [
      {
        reference: '3144141',
        name: 'ball'
      },
      {
        reference: '3144123',
        name: 'watch'
      },
      ],
      columns: [
        {
          name: 'REF.',
          property: 'reference',
          style: {
            width: '50%'
          },
          renderItem: (item, index) => {
          
            let row = group[item.reference] || {};

            return (
              <div>
                <Image url={ImageUtil.formatUrl(item.name)} classes={'product-img'} />
                {item.reference}
            </div>
            );
          }
        },
        {
          name: 'PRODUCT',
          property: 'name',
          style: {
            width: '50%'
          },
          renderHeader:(column, index) => {
            return (
              <div style={{display: 'inline-block'}}>
                PRODUCT - FROM
                STORE {StoreUtil.getStoreNameFromCode(column.store)}
              </div>
            );
          },
        }
      ],
      endlineRenders: [
        {
          render: (item, index) => {
            let store = this.state.distribution.calculo[index];
            return (
              store.movimenta_estoque ? null :
                <div
                  key={index}
                  className="check-badge"
                  data-toggle="popover" data-placement="top" data-trigger="hover" title=""
                  data-original-title="Sem pedido de movimentação"
                  style={{background: 'transparent', fontSize: 16}}>
                  <i className="mdi mdi-alert-triangle c-orange"></i>
                </div>
            );
          },
        },
      ],
    }
  }

render () {
 return (
  <Table
    id="table-products"
    ref="table-products"
    columns={this.state.columns}
    items={this.state.products}
    pageStart={30}
    endlineRenders={this.state.endlineRenders}
    useWindow={true}
  />
 ); 
}
}

Using props

Here you can get an example of some props used by react-custom-datatable

render () {
 return (
  <Table
    id="table-products"
    ref="table-products"
    columns={this.state.columns}
    items={this.state.products}
    pageStart={30}
    endlineRenders={this.state.endlineRenders}
    useWindow={true}
    rowActive={2}
    initialSortProp={'source_store'}
    useShowHideColumns={true}
    searchProps={['name', 'reference']}
    enableCheck={true}
    topOffset={60}
    disableSticky={true}
  />
 ); 
}

Expanding a row

You can define a render that will be printed below a row when user clicks on it by doing the following:

renderExpand() {
    return (
      <div> Some text </div>
    )
  }

render () {
 return (
  <Table
    id="table-products"
    ref="table-products"
    columns={this.state.columns}
    items={this.state.products}
    pageStart={30}
    useWindow={true}
    renderRowExpand={this.renderRowExpand.bind(this)}
  />
 ); 
}

Enabling row click

Define a method that will called when user clicks on a row

openModal() {
    this.setState({showModal: true});
  }

render () {
 return (
  <Table
    id="table-products"
    ref="table-products"
    columns={this.state.columns}
    items={this.state.products}
    pageStart={30}
    useWindow={true}
    onClickRow={this.openModal.bind(this)}
  />
 ); 
}

Selected items

When enabling check on items, you can get an array of the items selected:

onSelectedProductsChange(items) {
    this.setState({selectedProducts: items});
}

render () {
 return (
  <Table
    id="table-products"
    ref="table-products"
    columns={this.state.columns}
    items={this.state.products}
    pageStart={30}
    useWindow={true}
    onSelectedItemsChange={this.onSelectedProductsChange.bind(this)}
  />
 ); 
}

About

A React Component to create a "custom table" very similar to the known Jquery DataTable plugin

Resources

Stars

Watchers

Forks

Packages

No packages published