项目作者: flyingpath

项目描述 :
Table powered by react-virtualized table with search and sort.
高级语言: JavaScript
项目地址: git://github.com/flyingpath/react-virtualized-search-table.git
创建时间: 2019-11-06T08:18:49Z
项目社区:https://github.com/flyingpath/react-virtualized-search-table

开源协议:MIT License

下载


react-virtualized-search-table

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

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

  1. 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" class="reference-link">columns

  1. [
  2. {
  3. dataKey: 'name',
  4. width: 100,
  5. label: 'name'
  6. },
  7. {
  8. dataKey: 'description',
  9. width: 100,
  10. label: 'description'
  11. },
  12. {
  13. dataKey: 'danger',
  14. width: 200,
  15. label: '危機值危機值危機值危'
  16. }
  17. ]

data" class="reference-link">data

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

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

  1. [
  2. {
  3. name : {
  4. element : ( <div>Brian Vaughn</div> ),
  5. searchKey : 'Brian Vaughn',
  6. orderKey : 'Brian Vaughn'
  7. },
  8. description: {
  9. element : ( <div>xxxxx</div> ),
  10. searchKey : 'Software engineer',
  11. orderKey : 'Software engineer'
  12. },
  13. danger: {
  14. element : ( <div>0</div> ),
  15. searchKey : false,
  16. orderKey : 0
  17. }
  18. },
  19. {
  20. name : {
  21. element : ( <div></div> ),
  22. searchKey : 'Brian Vaughn2',
  23. orderKey : 'Brian Vaughn2'
  24. },
  25. description: {
  26. element : ( <div>xxxxx</div> ),
  27. searchKey : 'Software engineer3',
  28. orderKey : 'Software engineer3'
  29. },
  30. danger: {
  31. element : ( <div></div> ),
  32. searchKey : false,
  33. orderKey : 0
  34. }
  35. }, ...
  36. ]

Example

  1. import React from 'react'
  2. import ReactVirtulizeSearchTable from './components/index'
  3. class App extends React.Component {
  4. constructor(props) {
  5. super(props)
  6. this.state = {
  7. columns: [],
  8. data: []
  9. }
  10. }
  11. render() {
  12. const demo = {
  13. title: '門診紀錄列表',
  14. columns: [
  15. { dataKey: 'name', label: 'name' },
  16. { dataKey: 'description', label: 'description' },
  17. { dataKey: 'danger', label: '危機值危機值危機值危' },
  18. ],
  19. data: [
  20. {
  21. name : {
  22. element : ( <div>1234</div> ),
  23. searchKey : '12343',
  24. orderKey : 'Brian Vaughn1'
  25. },
  26. description: {
  27. element : ( <div>1234</div> ),
  28. searchKey : '12343',
  29. orderKey : 'Software engineer'
  30. },
  31. danger: {
  32. element : ( <div>o</div> ),
  33. searchKey : true,
  34. orderKey : 1
  35. }
  36. }
  37. ]
  38. }
  39. return (
  40. <div style={{ height: '100%' }}>
  41. <ReactVirtulizeSearchTable {...demo} ></ReactVirtulizeSearchTable>
  42. </div>
  43. )
  44. }
  45. }
  46. export default App