react-table-with-custom-filter v1.0.4

react-table-with-custom-filter

react table with custom filter

Demo

Demo Here

Install

npm install --save react-table-with-custom-filter

Usage

import React, { Component } from 'react'
import { Table } from 'react-table-with-custom-filter'
import 'react-table-with-custom-filter/dist/index.css'

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    isSort: true,
    render: (text) => <a>{text}</a>
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
    isSort: true
  },
  {
    title: 'Tags',
    dataIndex: 'tags',
    key: 'tags',
    render: (tags) => {
      return (
        <ul>
          {tags.map((t) => (
            <li key={t}>{t} </li>
          ))}
        </ul>
      )
    }
  },
  {
    title: 'Date',
    dataIndex: 'date',
    key: 'date',
    isSort: true,
    render: (date) => {
      return new Date(date).toDateString()
    }
  }
]
const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    tags: ['first', 'second'],
    date: '05-05-2021'
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    tags: ['first', 'second'],
    date: '05-05-2021'
  },
  {
    key: '3',
    name: 'Jim Green',
    age: 42,
    tags: ['first', 'second'],
    date: '05-05-2021'
  }
]
class Example extends Component {
  render() {
    return (
      <Table
        columns={columns}
        data={data}
        rowSelection={true}
        onRowSelection={(data) => console.log(data)}
        onSortingChange={(key, order) => console.log(key, order)}
        wrapperClass={{
          tableClass: 'main-table',
          tableHead: 'table-head',
          tableBody: 'table-body',
          tableRow: 'table-row'
        }}
        showPagination={true}
        paginationLabels={{
          previousLabel: '<<',
          nextLabel: '>>',
          breakLabel: '...'
        }}
        paginationClass={{
          containerClassName: 'pagination',
          breakClassName: 'break-class'
        }}
        onPageChange={(page) => console.log(page)}
        pageCount={5}
      />
    )
  }
}