給你個眼神

寫這篇文章的原因是,自己在遇到FixedDataTable時候,上網(wǎng)搜了一些文章,總沒有盡人意的,或者都是英文版本,對閱讀能力有要求.因此我做了對FDT的總結(jié).

很多人可能還沒有聽過這個js插件,簡單點,它就是一個table.那么它的強大之處在哪里?
我們先看看官網(wǎng)的解釋:

A React table component designed to allow presenting millions of rows of data.

解讀

這個插件是配合React的,它的主要優(yōu)勢是處理百萬級數(shù)據(jù),并且不卡頓非常流暢.并且它的滑動是不犧牲性能的.因此,一個項目追求的是完美,用戶量大的時候,這個插件必定是你的左膀右臂.

你可以先看一下它的demo

demo地址
是吧,真的不卡頓且流程.并且偷偷告訴你,維護它的人是Schr?dinger，Inc。是facebook公司的分支.

入門

fixed-data-table-2使用npm 安裝。

npm install fixed-data-table-2

它的樣式在

dist/fixed-data-table.css

主要的三種組件類型<Table/><Column/><Cell/>。

Table包含Column
Column包含Table
這里的Cell就是一個單元格.

<Table /> contains configuration information for the entire table

Table 包含了主要的配置信息.

• rowHeight={50} //行高
• rowsCount={100} //行數(shù)
• width={5000} //table寬度
• height={5050} //table的高度
• headerHeight={50} //header的高度
• data={rows}> //數(shù)據(jù)源

<Column />定義表中一列顯示數(shù)據(jù)的方式

• header = { < Cell > Col 1 < / Cell > } //列的標(biāo)題
• cell = { < Cell > Column 1 < / Cell > } //列內(nèi)每一行的數(shù)據(jù)
• width = { 2000 } //列的寬度

可以重寫Cell組件

const MyCustomCell = ({ isSpecial }) =>
      <Cell>
        {isSpecial ? "I'm Special" : "I'm Not Special"}
      </Cell>;


    <Column
      header={<Cell>Col 3</Cell>} //列的名稱
      cell={<MyCustomCell isSpecial/>} //相當(dāng)于封裝了Cell組件
      width={2000} //列的寬度
    />

如果你要開始一個React項目,我建議你使用facebook出的一款腳手架工具,
create-react-app.前提這個腳手架比較簡單,網(wǎng)上也很多講解.在里面使用fixed-data-table也是比較簡單的.
引入:

import React from 'react';
import ReactDOM from 'react-dom';
import {Table, Column, Cell} from 'fixed-data-table-2';
import 'fixed-data-table-2/dist/fixed-data-table.css';

如果table的高度小于 rowHeight * rowsCount + headerHeight 時候,會自動出現(xiàn)滾動條.

上菜

基本介紹完了,如果你對文字理解不透徹,那么直接上菜吧.還等什么?

基本表格

demo1

render() { 
  const data = [ 
      {a : '9.1',b : 'bin1', c : '吃'},
      {a : '9.2',b : 'bin2', c : '喝'},
      {a : '9.3',b : 'bin3', c : '玩'},
    ];
return (
    <div> 
            <Table
            rowHeight={50}  //行高
            rowsCount={data.length} //行數(shù)
            width={500} //table寬度
            height={200} //table的高度s
            headerHeight={50} //header的高度
        >
          <Column 
            header = {<Cell>班級</Cell>}
            width = {100}
            cell = {({rowIndex,...props}) => (
              <Cell {...props}>
                {data[rowIndex]['a']}
              </Cell>
            )}
          >
          </Column>
          <Column 
            width = {100}
            header = {<Cell>姓名</Cell>}
             cell = {({rowIndex,...props}) => (
              <Cell {...props}>
                {data[rowIndex]['b']}
              </Cell>
            )}
          >
          </Column>
          <Column 
            width = {300}
            header = {<Cell>愛好</Cell>}
             cell = {({rowIndex,...props}) => (
              <Cell {...props}>
                {data[rowIndex]['c']}
              </Cell>
            )}
          >
          </Column>
        </Table>
    </div>
        )
    }

還有的功能:

固定列.

固定列

實現(xiàn):只需要在對應(yīng)的Column增加屬性 fixed={true}
注意:將哪一列固定了,會自動排在第一列.假如我們給姓名的列增加了fixed,那么姓名就是第一列.

          <Column 
            fixed={true}
            header = {<Cell>班級</Cell>}
            width = {100}
            cell = {({rowIndex,...props}) => (
              <Cell {...props}>
                {data[rowIndex]['a']}
              </Cell>
            )}
          > 

如果想這樣樣式,需要用到ColumnGroup
引入:import {Table, Column, Cell,ColumnGroup} from 'fixed-data-table-2';
注意點: 需要在Table上設(shè)置:groupHeaderHeight,在Column外層包圍:ColumnGroup

image.png

 <Table
            groupHeaderHeight={50}
            rowHeight={50}  //行高
            rowsCount={data.length} //行數(shù)
            width={400} //table寬度
            height={200} //table的高度s
            headerHeight={50} //header的高度
             {...this.props}
        >
       <ColumnGroup
          fixed={true}
          header={<Cell>Name</Cell>}>
          <Column 
            // fixed={true}
            header = {<Cell>班級</Cell>}
            width = {100}
            cell = {({rowIndex,...props}) => (
              <Cell {...props}>
                {data[rowIndex]['a']}
              </Cell>
            )}
          > 

          </Column>
          <Column
            width = {100} 
            header = {<Cell>姓名</Cell>}
             cell = {({rowIndex,...props}) => (
              <Cell {...props}>
                {data[rowIndex]['b']}
              </Cell>
            )}
          >
          </Column>
        </ColumnGroup >
        <ColumnGroup
                  fixed={true}
                  >
          <Column
            width = {300}
            header = {<Cell>愛好</Cell>}
             cell = {({rowIndex,...props}) => (
              <Cell {...props}>
                {data[rowIndex]['c']}
              </Cell>
            )}
          >
          </Column>
                  </ColumnGroup >
        </Table>

此刻,我想你已經(jīng)開始上手了.自己開始思考挖掘吧~加油.