1+ <!doctype html> < html data-reactid =".1eq468235ds " data-react-checksum ="1894984930 "> < head data-reactid =".1eq468235ds.0 "> < meta charset ="utf-8 " data-reactid =".1eq468235ds.0.0 "/> < title data-reactid =".1eq468235ds.0.1 "> FixedDataTable</ title > < meta name ="viewport " content ="width=device-width, initial-scale=1.0, maximum-scale=1.0 " data-reactid =".1eq468235ds.0.2 "/> < link rel ="stylesheet " href ="//code.cdn.mozilla.net/fonts/fira.css " data-reactid =".1eq468235ds.0.3 "/> < link rel ="stylesheet " type ="text/css " href ="main-cfa8aa338396d9a24a38.css " data-reactid =".1eq468235ds.0.4 "/> < link rel ="shortcut icon " type ="image/png " href ="images/favicon-b4fca2450cb5aa407a2e106f42a92838.png " data-reactid =".1eq468235ds.0.5 "/> < base target ="_blank " data-reactid =".1eq468235ds.0.6 "/> </ head > < body data-reactid =".1eq468235ds.1 "> < div class ="docsPage " data-reactid =".1eq468235ds.1.0 "> < div class ="header " data-reactid =".1eq468235ds.1.0.0 "> < div class ="miniHeader " data-reactid =".1eq468235ds.1.0.0.0 "> < div class ="miniHeaderContents " data-reactid =".1eq468235ds.1.0.0.0.0 "> < a href ="./ " target ="_self " class ="miniLogo " data-reactid =".1eq468235ds.1.0.0.0.0.0 "> </ a > < a class ="homeLink " href ="./ " target ="_self " data-reactid =".1eq468235ds.1.0.0.0.0.1 "> Home</ a > < a href ="api-table.html " target ="_self " data-reactid =".1eq468235ds.1.0.0.0.0.2 "> Docs</ a > < a href ="example-object-data.html " target ="_self " data-reactid =".1eq468235ds.1.0.0.0.0.3 "> Examples</ a > < a href ="https://github.com/facebook/fixed-data-table " data-reactid =".1eq468235ds.1.0.0.0.0.4 "> Github</ a > </ div > </ div > </ div > < div class ="pageBody " id ="body " data-reactid =".1eq468235ds.1.0.1 "> < div class ="contents " data-reactid =".1eq468235ds.1.0.1.0 "> < div class ="sideBar " data-reactid =".1eq468235ds.1.0.1.0.0 "> < div class ="scrollContent " data-reactid =".1eq468235ds.1.0.1.0.0.0 "> < h4 class ="groupTitle " data-reactid =".1eq468235ds.1.0.1.0.0.0.0 "> API</ h4 > < h2 data-reactid =".1eq468235ds.1.0.1.0.0.0.1:$Table "> < a href ="api-table.html " target ="_self " class ="sideItem " data-reactid =".1eq468235ds.1.0.1.0.0.0.1:$Table.0 "> < span class ="sidebarItemText " data-reactid =".1eq468235ds.1.0.1.0.0.0.1:$Table.0.0 "> Table</ span > < span class ="arrowBullet " data-reactid =".1eq468235ds.1.0.1.0.0.0.1:$Table.0.1 "> </ span > </ a > </ h2 > < h2 data-reactid =".1eq468235ds.1.0.1.0.0.0.1:$Column "> < a href ="api-column.html " target ="_self " class ="sideItem curSideItem " data-reactid =".1eq468235ds.1.0.1.0.0.0.1:$Column.0 "> < span class ="sidebarItemText " data-reactid =".1eq468235ds.1.0.1.0.0.0.1:$Column.0.0 "> Column</ span > < span class ="arrowBullet " data-reactid =".1eq468235ds.1.0.1.0.0.0.1:$Column.0.1 "> </ span > </ a > </ h2 > < h2 data-reactid =".1eq468235ds.1.0.1.0.0.0.1:$Column Group "> < a href ="api-columngroup.html " target ="_self " class ="sideItem " data-reactid =".1eq468235ds.1.0.1.0.0.0.1:$Column Group.0 "> < span class ="sidebarItemText " data-reactid =".1eq468235ds.1.0.1.0.0.0.1:$Column Group.0.0 "> Column Group</ span > < span class ="arrowBullet " data-reactid =".1eq468235ds.1.0.1.0.0.0.1:$Column Group.0.1 "> </ span > </ a > </ h2 > </ div > </ div > < div class ="docContents " data-reactid =".1eq468235ds.1.0.1.0.1 "> <!-- File generated from "src/FixedDataTableColumn.react.js" -->
2+ < h1 id ="-column-component- "> < code > Column</ code > (component)</ h1 >
3+ < p > Component that defines the attributes of table column.</ p >
4+ < h2 id ="props "> Props</ h2 >
5+ < h3 id ="-align- "> < code > align</ code > </ h3 >
6+ < p > The horizontal alignment of the table cell content.</ p >
7+ < p > type: < code > enum('left'|'center'|'right')</ code > </ p >
8+ < h3 id ="-headerclassname- "> < code > headerClassName</ code > </ h3 >
9+ < p > className for this column's header cell.</ p >
10+ < p > type: < code > string</ code > </ p >
11+ < h3 id ="-footerclassname- "> < code > footerClassName</ code > </ h3 >
12+ < p > className for this column's footer cell.</ p >
13+ < p > type: < code > string</ code > </ p >
14+ < h3 id ="-cellclassname- "> < code > cellClassName</ code > </ h3 >
15+ < p > className for each of this column's data cells.</ p >
16+ < p > type: < code > string</ code > </ p >
17+ < h3 id ="-cellrenderer- "> < code > cellRenderer</ code > </ h3 >
18+ < p > The cell renderer that returns React-renderable content for table cell.</ p >
19+ < code class ="codeBlock "> < span class ="token block-keyword " > function</ span > < span class ="token punctuation " > (</ span >
20+ cellData< span class ="token punctuation " > :</ span > any< span class ="token punctuation " > ,</ span >
21+ cellDataKey< span class ="token punctuation " > :</ span > string< span class ="token punctuation " > ,</ span >
22+ rowData< span class ="token punctuation " > :</ span > object< span class ="token punctuation " > ,</ span >
23+ rowIndex< span class ="token punctuation " > :</ span > number< span class ="token punctuation " > ,</ span >
24+ columnData< span class ="token punctuation " > :</ span > any< span class ="token punctuation " > ,</ span >
25+ width< span class ="token punctuation " > :</ span > number
26+ < span class ="token punctuation " > )</ span > < span class ="token punctuation " > :</ span > < span class ="token operator " > ?</ span > $jsx</ code > < p > type: < code > func</ code > </ p >
27+ < h3 id ="-celldatagetter- "> < code > cellDataGetter</ code > </ h3 >
28+ < p > The getter < code > function(string_cellDataKey, object_rowData)</ code > that returns
29+ the cell data for the < code > cellRenderer</ code > .
30+ If not provided, the cell data will be collected from
31+ < code > rowData[cellDataKey]</ code > instead. The value that < code > cellDataGetter</ code > returns
32+ will be used to determine whether the cell should re-render.</ p >
33+ < p > type: < code > func</ code > </ p >
34+ < h3 id ="-datakey-required- "> < code > dataKey</ code > (required)</ h3 >
35+ < p > The key to retrieve the cell data from the data row. Provided key type
36+ must be either < code > string</ code > or < code > number</ code > . Since we use this
37+ for keys, it must be specified for each column.</ p >
38+ < p > type: < code > union(string|number)</ code > </ p >
39+ < h3 id ="-fixed- "> < code > fixed</ code > </ h3 >
40+ < p > Controls if the column is fixed when scrolling in the X axis.</ p >
41+ < p > type: < code > bool</ code >
42+ defaultValue: < code > false</ code > </ p >
43+ < h3 id ="-headerrenderer- "> < code > headerRenderer</ code > </ h3 >
44+ < p > The cell renderer that returns React-renderable content for table column
45+ header.</ p >
46+ < code class ="codeBlock "> < span class ="token block-keyword " > function</ span > < span class ="token punctuation " > (</ span >
47+ label< span class ="token punctuation " > :</ span > < span class ="token operator " > ?</ span > string< span class ="token punctuation " > ,</ span >
48+ cellDataKey< span class ="token punctuation " > :</ span > string< span class ="token punctuation " > ,</ span >
49+ columnData< span class ="token punctuation " > :</ span > any< span class ="token punctuation " > ,</ span >
50+ rowData< span class ="token punctuation " > :</ span > array< span class ="token operator " > <</ span > < span class ="token operator " > ?</ span > object< span class ="token operator " > > </ span > < span class ="token punctuation " > ,</ span >
51+ width< span class ="token punctuation " > :</ span > number
52+ < span class ="token punctuation " > )</ span > < span class ="token punctuation " > :</ span > < span class ="token operator " > ?</ span > $jsx</ code > < p > type: < code > func</ code > </ p >
53+ < h3 id ="-footerrenderer- "> < code > footerRenderer</ code > </ h3 >
54+ < p > The cell renderer that returns React-renderable content for table column
55+ footer.</ p >
56+ < code class ="codeBlock "> < span class ="token block-keyword " > function</ span > < span class ="token punctuation " > (</ span >
57+ label< span class ="token punctuation " > :</ span > < span class ="token operator " > ?</ span > string< span class ="token punctuation " > ,</ span >
58+ cellDataKey< span class ="token punctuation " > :</ span > string< span class ="token punctuation " > ,</ span >
59+ columnData< span class ="token punctuation " > :</ span > any< span class ="token punctuation " > ,</ span >
60+ rowData< span class ="token punctuation " > :</ span > array< span class ="token operator " > <</ span > < span class ="token operator " > ?</ span > object< span class ="token operator " > > </ span > < span class ="token punctuation " > ,</ span >
61+ width< span class ="token punctuation " > :</ span > number
62+ < span class ="token punctuation " > )</ span > < span class ="token punctuation " > :</ span > < span class ="token operator " > ?</ span > $jsx</ code > < p > type: < code > func</ code > </ p >
63+ < h3 id ="-columndata- "> < code > columnData</ code > </ h3 >
64+ < p > Bucket for any data to be passed into column renderer functions.</ p >
65+ < p > type: < code > object</ code > </ p >
66+ < h3 id ="-label- "> < code > label</ code > </ h3 >
67+ < p > The column's header label.</ p >
68+ < p > type: < code > string</ code > </ p >
69+ < h3 id ="-width-required- "> < code > width</ code > (required)</ h3 >
70+ < p > The pixel width of the column.</ p >
71+ < p > type: < code > number</ code > </ p >
72+ < h3 id ="-minwidth- "> < code > minWidth</ code > </ h3 >
73+ < p > If this is a resizable column this is its minimum pixel width.</ p >
74+ < p > type: < code > number</ code > </ p >
75+ < h3 id ="-maxwidth- "> < code > maxWidth</ code > </ h3 >
76+ < p > If this is a resizable column this is its maximum pixel width.</ p >
77+ < p > type: < code > number</ code > </ p >
78+ < h3 id ="-flexgrow- "> < code > flexGrow</ code > </ h3 >
79+ < p > The grow factor relative to other columns. Same as the flex-grow API
80+ from < a href ="http://www.w3.org/TR/css3-flexbox/ "> http://www.w3.org/TR/css3-flexbox/</ a > . Basically, take any available
81+ extra width and distribute it proportionally according to all columns'
82+ flexGrow values. Defaults to zero (no-flexing).</ p >
83+ < p > type: < code > number</ code > </ p >
84+ < h3 id ="-isresizable- "> < code > isResizable</ code > </ h3 >
85+ < p > Whether the column can be resized with the
86+ FixedDataTableColumnResizeHandle. Please note that if a column
87+ has a flex grow, once you resize the column this will be set to 0.</ p >
88+ < p > This property only provides the UI for the column resizing. If this
89+ is set to true, you will need ot se the onColumnResizeEndCallback table
90+ property and render your columns appropriately.</ p >
91+ < p > type: < code > bool</ code > </ p >
92+ < h3 id ="-allowcellsrecycling- "> < code > allowCellsRecycling</ code > </ h3 >
93+ < p > Experimental feature
94+ Whether cells in this column can be removed from document when outside
95+ of viewport as a result of horizontal scrolling.
96+ Setting this property to true allows the table to not render cells in
97+ particular column that are outside of viewport for visible rows. This
98+ allows to create table with many columns and not have vertical scrolling
99+ performance drop.
100+ Setting the property to false will keep previous behaviour and keep
101+ cell rendered if the row it belongs to is visible.</ p >
102+ < p > type: < code > bool</ code >
103+ defaultValue: < code > false</ code > </ p >
104+ < h3 id ="-purecellrendering- "> < code > pureCellRendering</ code > </ h3 >
105+ < p > Whether to render cells in this column using cellData only (no rowData
106+ or columnData)</ p >
107+ < p > type: < code > bool</ code >
108+ defaultValue: < code > false</ code > </ p >
109+ </ div > </ div > </ div > </ div > < script data-reactid =".1eq468235ds.1.1 "> window . INITIAL_PROPS = { "location" :"api-column.html" , "devMode" :false , "files" :{ "main.css" :"main-cfa8aa338396d9a24a38.css" , "main.js" :"main-cfa8aa338396d9a24a38.js" } } ;
110+ </ script > < script src ="https://cdn.rawgit.com/zynga/scroller/master/src/Animate.js " data-reactid =".1eq468235ds.1.2 "> </ script > < script src ="https://cdn.rawgit.com/zynga/scroller/master/src/Scroller.js " data-reactid =".1eq468235ds.1.3 "> </ script > < script src ="main-cfa8aa338396d9a24a38.js " data-reactid =".1eq468235ds.1.4 "> </ script > </ body > </ html >
0 commit comments