react-virtualized-search-table

Table powered by react-virtualized table with search and sort.

demo: https://flyingpath.github.io/react-virtualized-search-table

npm i react-virtualize-search-table

Prop Types

Property	Type	Required?	Description
title	element or string		table title
columns	array	Y	Array of data object with dataKey, width and label Example
data	array	Y	Array of data object with element, searchKey and orderKey. Example
rowHeight	number	N	Height of row, default: 60
onRowClick	function	N
rowClassName	string	N
headerClassName	string	N
rowHeitableClassNameght	string	N

columns

[
    { 
        dataKey: 'name',
        width: 100,
        label: 'name' 
    },
    { 
        dataKey: 'description', 
        width: 100,
        label: 'description' 
    },
    { 
        dataKey: 'danger', 
        width: 200,     
        label: '危機值危機值危機值危' 
    }
]

data

The keys in the object is linked to the dataKeys in columns.

SearchKey is used for search. OrderKey is used for sort.

[
    { 
        name  : {
            element     : ( <div>Brian Vaughn</div> ),
            searchKey   : 'Brian Vaughn',
            orderKey    : 'Brian Vaughn'
        }, 
        description: {
            element     : ( <div>xxxxx</div> ),
            searchKey   : 'Software engineer',
            orderKey    : 'Software engineer'
        },
        danger: {
            element     : ( <div>0</div> ),
            searchKey   : false,
            orderKey    : 0
        }
    },
    { 
        name  : {
            element     : ( <div></div> ),
            searchKey   : 'Brian Vaughn2',
            orderKey    : 'Brian Vaughn2'
        }, 
        description: {
            element     : ( <div>xxxxx</div> ),
            searchKey   : 'Software engineer3',
            orderKey    : 'Software engineer3'
        },
        danger: {
            element     : ( <div></div> ),
            searchKey   : false,
            orderKey    : 0
        }
    }, ...
]

Example

import React from 'react'
import ReactVirtulizeSearchTable from './components/index'

class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            columns: [],
            data: []
        }
    }

    render() {
        const demo =     {
            title: '門診紀錄列表',
            columns:  [
                { dataKey: 'name',        label: 'name' },
                { dataKey: 'description', label: 'description' },
                { dataKey: 'danger',      label: '危機值危機值危機值危' },
            ],
            data: [
                { 
                    name  : {
                        element     : ( <div>1234</div> ),
                        searchKey   : '12343',
                        orderKey    : 'Brian Vaughn1'
                    }, 
                    description: {
                        element     : ( <div>1234</div> ),
                        searchKey   : '12343',
                        orderKey    : 'Software engineer'
                    },
                    danger: {
                        element     : ( <div>o</div> ),
                        searchKey   : true,
                        orderKey    : 1
                    }
                }
            ]
        }

        return (
            <div style={{ height: '100%' }}>
                <ReactVirtulizeSearchTable {...demo} />
            </div>
        )
    }

}

export default App