vhad/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/gosticks/DefinitelyTyped.git synced 2026-08-12 13:00:19 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Updated fixed-data-table to version 0.6.0

Browse Source
This commit is contained in:
stephenjelfs
2015-12-08 13:31:05 +01:00
parent c091812456
commit 3aa59c162f
4 changed files with 1038 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files
fixed-data-table/fixed-data-table-0.4.7-tests.tsx
+39
View File
@@ -0,0 +1,39 @@
///<reference path="./fixed-data-table.d.ts"" />
/// <reference path="../react/react.d.ts"/>
/// <reference path="../react/react-dom.d.ts"/>
import * as React from "react";
import * as ReactDOM from "react-dom";
import * as FixedDataTable from "fixed-data-table";
var rows = [
['a1', 'b1', 'c1'],
['a2', 'b2', 'c2'],
['a3', 'b3', 'c3'],
// .... and more
];
function rowGetter(rowIndex: number) {
return rows[rowIndex];
}
var table = <FixedDataTable.Table
rowHeight={50}
rowGetter={rowGetter}
rowsCount={rows.length}
width={5000}
height={5000}
headerHeight={50}>
<FixedDataTable.Column
label="Col 1"
width={3000}
dataKey={0}
/>
<FixedDataTable.Column
label="Col 2"
width={2000}
dataKey={1}
/>
</FixedDataTable.Table>
ReactDOM.render(table, document.body);
fixed-data-table/fixed-data-table-0.4.7.d.ts
Vendored
+402
View File
@@ -0,0 +1,402 @@
// Type definitions for fixed-data-table 0.4.7
// Project: https://github.com/facebook/fixed-data-table
// Definitions by: Petar Paar <https://github.com/pepaar>
// Definitions: https://github.com/borisyankov/DefinitelyTyped
/// <reference path="../react/react.d.ts"/>
declare module FixedDataTable {
export var version: string;
export interface TableProps extends __React.Props<Table> {
/**
* Pixel width of table. If all columns do not fit,
* a horizontal scrollbar will appear.
*/
width: number;
/**
* Pixel height of table. If all rows do not fit,
* a vertical scrollbar will appear.
*
* Either `height` or `maxHeight` must be specified.
*/
height?: number;
/**
* Maximum pixel height of table. If all rows do not fit,
* a vertical scrollbar will appear.
*
* Either `height` or `maxHeight` must be specified.
*/
maxHeight?: number;
/**
* Pixel height of table's owner, this is used in a managed scrolling
* situation when you want to slide the table up from below the fold
* without having to constantly update the height on every scroll tick.
* Instead, vary this property on scroll. By using `ownerHeight`, we
* over-render the table while making sure the footer and horizontal
* scrollbar of the table are visible when the current space for the table
* in view is smaller than the final, over-flowing height of table. It
* allows us to avoid resizing and reflowing table when it is moving in the
* view.
*
* This is used if `ownerHeight < height` (or `maxHeight`).
*/
ownerHeight?: number;
/**
* hidden or auto
*/
overflowX?: string;
overflowY?: string;
/**
* Number of rows in the table.
*/
rowsCount: number;
/**
* Pixel height of rows unless `rowHeightGetter` is specified and returns
* different value.
*/
rowHeight: number;
/**
* If specified, `rowHeightGetter(index)` is called for each row and the
* returned value overrides `rowHeight` for particular row.
*/
rowHeightGetter?: Function;
/**
* To get rows to display in table, `rowGetter(index)`
* is called. `rowGetter` should be smart enough to handle async
* fetching of data and return temporary objects
* while data is being fetched.
*/
rowGetter: Function;
/**
* To get any additional CSS classes that should be added to a row,
* `rowClassNameGetter(index)` is called.
*/
rowClassNameGetter?: Function;
/**
* Pixel height of the column group header.
*/
groupHeaderHeight?: number;
/**
* Pixel height of header.
*/
headerHeight: number;
/**
* Function that is called to get the data for the header row.
* If the function returns null, the header will be set to the
* Column's label property.
*/
headerDataGetter?: Function;
/**
* Pixel height of footer.
*/
footerHeight?: number;
/**
* DEPRECATED - use footerDataGetter instead.
* Data that will be passed to footer cell renderers.
*/
footerData?: any;
/**
* Function that is called to get the data for the footer row.
*/
footerDataGetter?: Function;
/**
* Value of horizontal scroll.
*/
scrollLeft?: number;
/**
* Index of column to scroll to.
*/
scrollToColumn?: number;
/**
* Value of vertical scroll.
*/
scrollTop?: number;
/**
* Index of row to scroll to.
*/
scrollToRow?: number;
/**
* Callback that is called when scrolling starts with current horizontal
* and vertical scroll values.
*/
onScrollStart?: Function;
/**
* Callback that is called when scrolling ends or stops with new horizontal
* and vertical scroll values.
*/
onScrollEnd?: Function;
/**
* Callback that is called when `rowHeightGetter` returns a different height
* for a row than the `rowHeight` prop. This is necessary because initially
* table estimates heights of some parts of the content.
*/
onContentHeightChange?: Function;
/**
* Callback that is called when a row is clicked.
*/
onRowClick?: Function;
/**
* Callback that is called when a row is double clicked.
*/
onRowDoubleClick?: Function;
/**
* Callback that is called when a mouse-down event happens on a row.
*/
onRowMouseDown?: Function;
/**
* Callback that is called when a mouse-enter event happens on a row.
*/
onRowMouseEnter?: Function;
/**
* Callback that is called when a mouse-leave event happens on a row.
*/
onRowMouseLeave?: Function;
/**
* Callback that is called when resizer has been released
* and column needs to be updated.
*
* Required if the isResizable property is true on any column.
*
* ```
* function(
* newColumnWidth: number,
* dataKey: string,
* )
* ```
*/
onColumnResizeEndCallback?: Function;
/**
* Whether a column is currently being resized.
*/
isColumnResizing?: boolean
}
interface ColumnProps {
/**
* The horizontal alignment of the table cell content.
* 'left', 'center', 'right'
*/
align?: string;
/**
* className for this column's header cell.
*/
headerClassName?: string;
/**
* className for this column's footer cell.
*/
footerClassName?: string;
/**
* className for each of this column's data cells.
*/
cellClassName?: string;
/**
* The cell renderer that returns React-renderable content for table cell.
* ```
* function(
* cellData: any,
* cellDataKey: string,
* rowData: object,
* rowIndex: number,
* columnData: any,
* width: number
* ): ?$jsx
* ```
*/
cellRenderer?: Function;
/**
* The getter `function(string_cellDataKey, object_rowData)` that returns
* the cell data for the `cellRenderer`.
* If not provided, the cell data will be collected from
* `rowData[cellDataKey]` instead. The value that `cellDataGetter` returns
* will be used to determine whether the cell should re-render.
*/
cellDataGetter?: Function;
/**
* The key to retrieve the cell data from the data row. Provided key type
* must be either `string` or `number`. Since we use this
* for keys, it must be specified for each column.
*/
dataKey: string|number;
/**
* Controls if the column is fixed when scrolling in the X axis.
*/
fixed?: boolean;
/**
* The cell renderer that returns React-renderable content for table column
* header.
* ```
* function(
* label: ?string,
* cellDataKey: string,
* columnData: any,
* rowData: array<?object>,
* width: number
* ): ?$jsx
* ```
*/
headerRenderer?: Function;
/**
* The cell renderer that returns React-renderable content for table column
* footer.
* ```
* function(
* label: ?string,
* cellDataKey: string,
* columnData: any,
* rowData: array<?object>,
* width: number
* ): ?$jsx
* ```
*/
footerRenderer?: Function;
/**
* Bucket for any data to be passed into column renderer functions.
*/
columnData?: any;
/**
* The column's header label.
*/
label: string;
/**
* The pixel width of the column.
*/
width: number;
/**
* If this is a resizable column this is its minimum pixel width.
*/
minWidth?: number;
/**
* If this is a resizable column this is its maximum pixel width.
*/
maxWidth?: number;
/**
* The grow factor relative to other columns. Same as the flex-grow API
* from http://www.w3.org/TR/css3-flexbox/. Basically, take any available
* extra width and distribute it proportionally according to all columns'
* flexGrow values. Defaults to zero (no-flexing).
*/
flexGrow?: number;
/**
* Whether the column can be resized with the
* FixedDataTableColumnResizeHandle. Please note that if a column
* has a flex grow, once you resize the column this will be set to 0.
*
* This property only provides the UI for the column resizing. If this
* is set to true, you will need ot se the onColumnResizeEndCallback table
* property and render your columns appropriately.
*/
isResizable?: boolean;
/**
* Experimental feature
* Whether cells in this column can be removed from document when outside
* of viewport as a result of horizontal scrolling.
* Setting this property to true allows the table to not render cells in
* particular column that are outside of viewport for visible rows. This
* allows to create table with many columns and not have vertical scrolling
* performance drop.
* Setting the property to false will keep previous behaviour and keep
* cell rendered if the row it belongs to is visible.
*/
allowCellsRecycling?: boolean;
}
export interface ColumnGroupProps {
/**
* The horizontal alignment of the table cell content.
* 'left', 'center', 'right'
*/
align?: string;
/**
* Controls if the column group is fixed when scrolling in the X axis.
*/
fixed?: boolean;
/**
* Bucket for any data to be passed into column group renderer functions.
*/
columnGroupData?: any;
/**
* The column group's header label.
*/
label?: string;
/**
* The cell renderer that returns React-renderable content for a table
* column group header. If it's not specified, the label from props will
* be rendered as header content.
* ```
* function(
* label: ?string,
* cellDataKey: string,
* columnGroupData: any,
* rowData: array<?object>, // array of labels of all columnGroups
* width: number
* ): ?$jsx
* ```
*/
groupHeaderRenderer?: Function;
}
export class Table extends __React.Component<TableProps, {}> {
render(): __React.DOMElement<any>
}
export class Column extends __React.Component<ColumnProps, {}> {
render(): __React.DOMElement<any>
}
export class ColumnGroup extends __React.Component<ColumnGroupProps, {}> {
render(): __React.DOMElement<any>
}
}
declare module "fixed-data-table" {
export = FixedDataTable;
}
fixed-data-table/fixed-data-table-tests.tsx
+161 -31
View File
@@ -1,39 +1,169 @@
///<reference path="./fixed-data-table.d.ts"" />
/// <reference path="./fixed-data-table.d.ts"" />
/// <reference path="../react/react.d.ts"/>
/// <reference path="../react/react-dom.d.ts"/>
import * as React from "react";
import * as ReactDOM from "react-dom";
import * as FixedDataTable from "fixed-data-table";
import {Table, Cell, Column} from "fixed-data-table";
var rows = [
['a1', 'b1', 'c1'],
['a2', 'b2', 'c2'],
['a3', 'b3', 'c3'],
// .... and more
];
function rowGetter(rowIndex: number) {
return rows[rowIndex];
// create your Table
class MyTable1 extends React.Component<{}, {}> {
render(): React.ReactElement<any> {
return (
<Table
rowsCount={100}
rowHeight={50}
width={1000}
height={500}>
// add columns
</Table>
);
}
}
var table = <FixedDataTable.Table
// create your Columns
class MyTable2 extends React.Component<{}, {}> {
render(): React.ReactElement<any> {
return (
<Table
rowsCount={100}
rowHeight={50}
rowGetter={rowGetter}
rowsCount={rows.length}
width={5000}
height={5000}
headerHeight={50}>
<FixedDataTable.Column
label="Col 1"
width={3000}
dataKey={0}
/>
<FixedDataTable.Column
label="Col 2"
width={2000}
dataKey={1}
/>
</FixedDataTable.Table>
width={1000}
height={500}>
<Column
cell={<Cell>Basic content</Cell>}
width={200}
/>
</Table>
);
}
}
ReactDOM.render(table, document.body);
// provide Custom Data
interface MyTable3State {
myTableData: [{name: string}];
}
class MyTable3 extends React.Component<{}, MyTable3State> {
constructor(props: {}) {
super(props);
this.state = {
myTableData: [
{name: "Rylan"},
{name: "Amelia"},
{name: "Estevan"},
{name: "Florence"},
{name: "Tressa"},
]
};
}
render(): React.ReactElement<any> {
return (
<Table
rowsCount={this.state.myTableData.length}
rowHeight={50}
headerHeight={50}
width={1000}
height={500}>
<Column
header={<Cell>Name</Cell>}
cell={(props: any) => (
<Cell {...props}>
{this.state.myTableData[props.rowIndex].name}
</Cell>
)}
width={200}
/>
</Table>
);
}
}
// Create Reusable Cells
interface RowData {
[field: string]: string;
}
interface MyCellProps {
rowIndex?: number;
field: string;
data: RowData[];
}
class MyTextCell extends React.Component<MyCellProps, {}> {
render(): React.ReactElement<any> {
const {rowIndex, field, data} = this.props;
return (
<Cell {...this.props}>
{data[rowIndex][field]}
</Cell>
);
}
}
class MyLinkCell extends React.Component<MyCellProps, {}> {
render(): React.ReactElement<any> {
const {rowIndex, field, data} = this.props;
const link: string = data[rowIndex][field];
return (
<Cell {...this.props}>
<a href={link}>{link}</a>
</Cell>
);
}
}
interface MyTable4State {
tableData: RowData[];
}
class MyTable4 extends React.Component<{}, MyTable4State> {
constructor(props: {}) {
super(props);
this.state = {
tableData: [
{name: "Rylan", email: "Angelita_Weimann42@gmail.com"},
{name: "Amelia", email: "Dexter.Trantow57@hotmail.com"},
{name: "Estevan", email: "Aimee7@hotmail.com"},
{name: "Florence", email: "Jarrod.Bernier13@yahoo.com"},
{name: "Tressa", email: "Yadira1@hotmail.com"}
]
};
}
render(): React.ReactElement<any> {
return (
<Table
rowsCount={this.state.tableData.length}
rowHeight={50}
headerHeight={50}
width={1000}
height={500}>
<Column
header={<Cell>Name</Cell>}
cell={
<MyTextCell
data={this.state.tableData}
field="name"
/>
}
width={200}/>
<Column
header={<Cell>Email</Cell>}
cell={
<MyLinkCell
data={this.state.tableData}
field="email"
/>
}
width={200}
/>
</Table>
);
}
}
fixed-data-table/fixed-data-table.d.ts
Vendored
+436 -342
View File
@@ -1,6 +1,6 @@
// Type definitions for fixed-data-table 0.4.7
// Type definitions for fixed-data-table 0.6.0
// Project: https://github.com/facebook/fixed-data-table
// Definitions by: Petar Paar <https://github.com/pepaar>
// Definitions by: Petar Paar <https://github.com/pepaar>, Stephen Jelfs <https://github.com/stephenjelfs>
// Definitions: https://github.com/borisyankov/DefinitelyTyped
/// <reference path="../react/react.d.ts"/>
@@ -8,345 +8,396 @@
declare module FixedDataTable {
export var version: string;
/**
* Data grid component with fixed or scrollable header and columns.
*
* The layout of the data table is as follows:
*
*
* +---------------------------------------------------+
* | Fixed Column Group | Scrollable Column Group |
* | Header | Header |
* | | |
* +---------------------------------------------------+
* | | |
* | Fixed Header Columns | Scrollable Header Columns |
* | | |
* +-----------------------+---------------------------+
* | | |
* | Fixed Body Columns | Scrollable Body Columns |
* | | |
* +-----------------------+---------------------------+
* | | |
* | Fixed Footer Columns | Scrollable Footer Columns |
* | | |
* +-----------------------+---------------------------+
*
* Fixed Column Group Header:
*
* These are the headers for a group of columns if included in
* the table that do not scroll vertically or horizontally.
*
* Scrollable Column Group Header:
*
* The header for a group of columns that do not move while
* scrolling vertically, but move horizontally with the
* horizontal scrolling.
*
* Fixed Header Columns:
*
* The header columns that do not move while scrolling
* vertically or horizontally.
*
* Scrollable Header Columns:
*
* The header columns that do not move while scrolling
* vertically, but move horizontally with the horizontal scrolling.
*
* Fixed Body Columns:
*
* The body columns that do not move while scrolling
* horizontally, but move vertically with the vertical scrolling.
*
* Scrollable Body Columns:
*
* The body columns that move while scrolling vertically or
* horizontally.
*
*/
export interface TableProps extends __React.Props<Table> {
/**
* Pixel width of table. If all columns do not fit,
* a horizontal scrollbar will appear.
*/
width: number;
/**
* Pixel height of table. If all rows do not fit,
* a vertical scrollbar will appear.
*
* Either `height` or `maxHeight` must be specified.
*/
height?: number;
/**
* Maximum pixel height of table. If all rows do not fit,
* a vertical scrollbar will appear.
*
* Either `height` or `maxHeight` must be specified.
*/
maxHeight?: number;
/**
* Pixel height of table's owner, this is used in a managed scrolling
* situation when you want to slide the table up from below the fold
* without having to constantly update the height on every scroll tick.
* Instead, vary this property on scroll. By using `ownerHeight`, we
* over-render the table while making sure the footer and horizontal
* scrollbar of the table are visible when the current space for the table
* in view is smaller than the final, over-flowing height of table. It
* allows us to avoid resizing and reflowing table when it is moving in the
* view.
*
* This is used if `ownerHeight < height` (or `maxHeight`).
*/
ownerHeight?: number;
/**
* Pixel width of table. If all columns do not fit, a
* horizontal scrollbar will appear.
*/
width: number;
/**
* Pixel height of table. If all rows do not fit, a
* vertical scrollbar will appear.
*
* Either height or maxHeight must be specified.
*/
height?: number;
/**
* hidden or auto
*/
overflowX?: string;
overflowY?: string;
* Maximum pixel height of table. If all rows do not fit,
* a vertical scrollbar will appear.
*
* Either height or maxHeight must be specified.
*/
maxHeight?: number;
/**
* Pixel height of table's owner, this is used in a managed
* scrolling situation when you want to slide the table up
* from below the fold without having to constantly update
* the height on every scroll tick. Instead, vary this
* property on scroll. By using ownerHeight, we over-render
* the table while making sure the footer and horizontal
* scrollbar of the table are visible when the current space
* for the table in view is smaller than the final,
* over-flowing height of table. It allows us to avoid
* resizing and reflowing table when it is moving in the
* view.
*
* This is used if ownerHeight < height (or maxHeight).
*/
ownerHeight?: number;
/**
* Number of rows in the table.
*/
rowsCount: number;
/**
* 'hidden'|'auto'
*/
overflowX?: string;
/**
* 'hidden'|'auto'
*/
overflowY?: string;
/**
* Pixel height of rows unless `rowHeightGetter` is specified and returns
* different value.
*/
rowHeight: number;
/**
* Number of rows in the table.
*/
rowsCount: number;
/**
* If specified, `rowHeightGetter(index)` is called for each row and the
* returned value overrides `rowHeight` for particular row.
*/
rowHeightGetter?: Function;
/**
* Pixel height of rows unless rowHeightGetter is specified
* and returns different value.
*/
rowHeight: number;
/**
* If specified, rowHeightGetter(index) is called for each
* row and the returned value overrides rowHeight for
* particular row.
*/
rowHeightGetter?: (index: number) => number;
/**
* To get any additional CSS classes that should be added to
* a row, rowClassNameGetter(index) is called.
*/
rowClassNameGetter?: (index: number) => string;
/**
* To get rows to display in table, `rowGetter(index)`
* is called. `rowGetter` should be smart enough to handle async
* fetching of data and return temporary objects
* while data is being fetched.
*/
rowGetter: Function;
/**
* Pixel height of the column group header.
*
* defaultValue: 0
*/
groupHeaderHeight?: number;
/**
* To get any additional CSS classes that should be added to a row,
* `rowClassNameGetter(index)` is called.
*/
rowClassNameGetter?: Function;
/**
* Pixel height of the header.
*
* defaultValue: 0
*/
headerHeight?: number;
/**
* Pixel height of the column group header.
*/
groupHeaderHeight?: number;
/**
* Pixel height of header.
*/
headerHeight: number;
/**
* Function that is called to get the data for the header row.
* If the function returns null, the header will be set to the
* Column's label property.
*/
headerDataGetter?: Function;
/**
* Pixel height of footer.
*/
footerHeight?: number;
/**
* DEPRECATED - use footerDataGetter instead.
* Data that will be passed to footer cell renderers.
*/
footerData?: any;
/**
* Function that is called to get the data for the footer row.
*/
footerDataGetter?: Function;
/**
* Value of horizontal scroll.
*/
scrollLeft?: number;
/**
* Index of column to scroll to.
*/
scrollToColumn?: number;
/**
* Value of vertical scroll.
*/
scrollTop?: number;
/**
* Index of row to scroll to.
*/
scrollToRow?: number;
/**
* Callback that is called when scrolling starts with current horizontal
* and vertical scroll values.
*/
onScrollStart?: Function;
/**
* Callback that is called when scrolling ends or stops with new horizontal
* and vertical scroll values.
*/
onScrollEnd?: Function;
/**
* Callback that is called when `rowHeightGetter` returns a different height
* for a row than the `rowHeight` prop. This is necessary because initially
* table estimates heights of some parts of the content.
*/
onContentHeightChange?: Function;
/**
* Callback that is called when a row is clicked.
*/
onRowClick?: Function;
/**
* Callback that is called when a row is double clicked.
*/
onRowDoubleClick?: Function;
/**
* Callback that is called when a mouse-down event happens on a row.
*/
onRowMouseDown?: Function;
/**
* Callback that is called when a mouse-enter event happens on a row.
*/
onRowMouseEnter?: Function;
/**
* Callback that is called when a mouse-leave event happens on a row.
*/
onRowMouseLeave?: Function;
/**
* Callback that is called when resizer has been released
* and column needs to be updated.
*
* Required if the isResizable property is true on any column.
*
* ```
* function(
* newColumnWidth: number,
* dataKey: string,
* )
* ```
*/
onColumnResizeEndCallback?: Function;
/**
* Whether a column is currently being resized.
*/
isColumnResizing?: boolean
/**
* Pixel height of the footer.
*
* defaultValue: 0
*/
footerHeight?: number;
/**
* Value of horizontal scroll.
*
* defaultValue: 0
*/
scrollLeft?: number;
/**
* Index of column to scroll to.
*/
scrollToColumn?: number;
/**
* Value of vertical scroll.
*
* defaultValue: 0
*/
scrollTop?: number;
/**
* Index of row to scroll to.
*/
scrollToRow?: number;
/**
* Callback that is called when scrolling starts with
* current horizontal and vertical scroll values.
*/
onScrollStart?: (horizontalScroll: number, verticalScroll: number) => void;
/**
* Callback that is called when scrolling ends or stops with
* new horizontal and vertical scroll values.
*/
onScrollEnd?: (horizontalScroll: number, verticalScroll: number) => void;
/**
* Callback that is called when rowHeightGetter returns a
* different height for a row than the rowHeight prop. This
* is necessary because initially table estimates heights
* of some parts of the content.
*/
onContentHeightChange?: (height: number) => void;
/**
* Callback that is called when a row is clicked.
*/
onRowClick?: (index: number) => void;
/**
* Callback that is called when a row is double clicked.
*/
onRowDoubleClick?: (index: number) => void;
/**
* Callback that is called when a mouse-down event happens
* on a row.
*/
onRowMouseDown?: (index: number) => void;
/**
* Callback that is called when a mouse-enter event happens
* on a row.
*/
onRowMouseEnter?: (index: number) => void;
/**
* Callback that is called when a mouse-leave event happens
* on a row.
*/
onRowMouseLeave?: (index: number) => void;
/**
* Callback that is called when resizer has been released
* and column needs to be updated.
*
* Required if the isResizable property is true on any
* column.
*/
onColumnResizeEndCallback?: (newColumnWidth: number, columnKey: string) => void;
/**
* Whether a column is currently being resized.
*/
isColumnResizing?: boolean;
}
/**
* Component that defines the attributes of table column.
*/
interface ColumnProps {
/**
* The horizontal alignment of the table cell content.
* 'left', 'center', 'right'
*/
align?: string;
* The horizontal alignment of the table cell content.
*
* 'left'|'center'|'right'
*/
align?: string;
/**
* className for this column's header cell.
*/
headerClassName?: string;
/**
* Controls if the column is fixed when scrolling in the X
* axis.
*
* defaultValue: false
*/
fixed?: boolean;
/**
* className for this column's footer cell.
*/
footerClassName?: string;
/**
* The header cell for this column. This can either be a
* string. a React element, or a function that generates a
* React Element. Passing in a string will render a default
* header cell with that string. By default, the React
* element passed in can expect to receive the following
* props:
*
* props: {
* columnKey: string // (of the column, if given)
* height: number // (supplied from the Table or rowHeightGetter)
* width: number // (supplied from the Column)
* }
*
* Because you are passing in your own React element, you
* can feel free to pass in whatever props you may want or need.
*
* If you pass in a function, you will receive the same props object as the first argument.
*/
header?: any;
/**
* This is the body cell that will be cloned for this
* column. This can either be a string a React element,
* or a function that generates a React Element. Passing
* in a string will render a default header cell with that
* string. By default, the React element passed in can
* expect to receive the following props:
*
* props: {
* rowIndex; number // (the row index of the cell)
* columnKey: string // (of the column, if given)
* height: number // (supplied from the Table or rowHeightGetter)
* width: number // (supplied from the Column)
* }
*
* Because you are passing in your own React element, you
* can feel free to pass in whatever props you may want or
* need.
*
* If you pass in a function, you will receive the same
* props object as the first argument.
*/
cell?: any;
/**
* The footer cell for this column. This can either be a
* string. a React element, or a function that generates a
* React Element. Passing in a string will render a default
* header cell with that string. By default, the React
* element passed in can expect to receive the following
* props:
*
* props: {
* columnKey: string // (of the column, if given)
* height: number // (supplied from the Table or rowHeightGetter)
* width: number // (supplied from the Column)
* }
*
* Because you are passing in your own React element, you
* can feel free to pass in whatever props you may want or
* need.
*
* If you pass in a function, you will receive the same
* props object as the first argument.
*/
footer?: any;
/**
* className for each of this column's data cells.
*/
cellClassName?: string;
/**
* This is used to uniquely identify the column, and is not
* required unless you a resizing columns. This will be the
* key given in the onColumnResizeEndCallback on the Table.
*/
columnKey?: string | number;
/**
* The cell renderer that returns React-renderable content for table cell.
* ```
* function(
* cellData: any,
* cellDataKey: string,
* rowData: object,
* rowIndex: number,
* columnData: any,
* width: number
* ): ?$jsx
* ```
*/
cellRenderer?: Function;
/**
* The pixel width of the column.
*/
width: number;
/**
* The getter `function(string_cellDataKey, object_rowData)` that returns
* the cell data for the `cellRenderer`.
* If not provided, the cell data will be collected from
* `rowData[cellDataKey]` instead. The value that `cellDataGetter` returns
* will be used to determine whether the cell should re-render.
*/
cellDataGetter?: Function;
/**
* If this is a resizable column this is its minimum pixel
* width.
*/
minWidth?: number;
/**
* The key to retrieve the cell data from the data row. Provided key type
* must be either `string` or `number`. Since we use this
* for keys, it must be specified for each column.
*/
dataKey: string|number;
/**
* If this is a resizable column this is its maximum pixel
* width.
*/
maxWidth?: number;
/**
* Controls if the column is fixed when scrolling in the X axis.
*/
fixed?: boolean;
/**
* The grow factor relative to other columns. Same as the
* flex-grow API from http://www.w3.org/TR/css3-flexbox/.
* Basically, take any available extra width and distribute
* it proportionally according to all columns' flexGrow
* values. Defaults to zero (no-flexing).
*/
flexGrow?: number;
/**
* The cell renderer that returns React-renderable content for table column
* header.
* ```
* function(
* label: ?string,
* cellDataKey: string,
* columnData: any,
* rowData: array<?object>,
* width: number
* ): ?$jsx
* ```
*/
headerRenderer?: Function;
/**
* Whether the column can be resized with the
* FixedDataTableColumnResizeHandle. Please note that if a
* column has a flex grow, once you resize the column this
* will be set to 0.
*
* This property only provides the UI for the column
* resizing. If this is set to true, you will need to set the
* onColumnResizeEndCallback table property and render your
* columns appropriately.
*/
isResizable?: boolean;
/**
* The cell renderer that returns React-renderable content for table column
* footer.
* ```
* function(
* label: ?string,
* cellDataKey: string,
* columnData: any,
* rowData: array<?object>,
* width: number
* ): ?$jsx
* ```
*/
footerRenderer?: Function;
/**
* Bucket for any data to be passed into column renderer functions.
*/
columnData?: any;
/**
* The column's header label.
*/
label: string;
/**
* The pixel width of the column.
*/
width: number;
/**
* If this is a resizable column this is its minimum pixel width.
*/
minWidth?: number;
/**
* If this is a resizable column this is its maximum pixel width.
*/
maxWidth?: number;
/**
* The grow factor relative to other columns. Same as the flex-grow API
* from http://www.w3.org/TR/css3-flexbox/. Basically, take any available
* extra width and distribute it proportionally according to all columns'
* flexGrow values. Defaults to zero (no-flexing).
*/
flexGrow?: number;
/**
* Whether the column can be resized with the
* FixedDataTableColumnResizeHandle. Please note that if a column
* has a flex grow, once you resize the column this will be set to 0.
*
* This property only provides the UI for the column resizing. If this
* is set to true, you will need ot se the onColumnResizeEndCallback table
* property and render your columns appropriately.
*/
isResizable?: boolean;
/**
* Experimental feature
* Whether cells in this column can be removed from document when outside
* of viewport as a result of horizontal scrolling.
* Setting this property to true allows the table to not render cells in
* particular column that are outside of viewport for visible rows. This
* allows to create table with many columns and not have vertical scrolling
* performance drop.
* Setting the property to false will keep previous behaviour and keep
* cell rendered if the row it belongs to is visible.
*/
allowCellsRecycling?: boolean;
/**
* Whether cells in this column can be removed from document
* when outside of viewport as a result of horizontal
* scrolling. Setting this property to true allows the table
* to not render cells in particular column that are outside
* of viewport for visible rows. This allows to create table
* with many columns and not have vertical scrolling
* performance drop. Setting the property to false will keep
* previous behaviour and keep cell rendered if the row it
* belongs to is visible.
*
* defaultValue: false
*/
allowCellsRecycling?: boolean;
}
/**
* Component that defines the attributes of a table column group.
*/
export interface ColumnGroupProps {
/**
* The horizontal alignment of the table cell content.
@@ -355,35 +406,75 @@ declare module FixedDataTable {
align?: string;
/**
* Controls if the column group is fixed when scrolling in the X axis.
* Controls if the column group is fixed when scrolling in the X
* axis.
*
* defaultValue: false
*/
fixed?: boolean;
/**
* Bucket for any data to be passed into column group renderer functions.
*/
columnGroupData?: any;
/**
* The header cell for this column group. This can either be
* a string. a React element, or a function that generates a
* React Element. Passing in a string will render a default
* header cell with that string. By default, the React
* element passed in can expect to receive the following
* props:
*
* props: {
* height: number // (supplied from the groupHeaderHeight)
* width: number // (supplied from the Column)
* }
*
* Because you are passing in your own React element, you
* can feel free to pass in whatever props you may want or
* need.
*
* If you pass in a function, you will receive the same props
* object as the first argument.
*/
header: any;
}
/**
* Component that handles default cell layout and styling.
*
* All props unless specified below will be set onto the top
* level div rendered by the cell.
*
* Example usage via from a Column:
*
* const MyColumn = (
* <Column
* cell={({rowIndex, width, height}) => (
* <Cell
* width={width}
* height={height}
* className="my-class">
* Cell number: <span>{rowIndex}</span>
* </Cell>
* )}
* width={100}
* />
* );
*/
export interface CellProps {
/**
* Outer height of the cell.
*/
height?: number;
/**
* The column group's header label.
*/
label?: string;
/**
* Outer width of the cell.
*/
width?: number;
/**
* The cell renderer that returns React-renderable content for a table
* column group header. If it's not specified, the label from props will
* be rendered as header content.
* ```
* function(
* label: ?string,
* cellDataKey: string,
* columnGroupData: any,
* rowData: array<?object>, // array of labels of all columnGroups
* width: number
* ): ?$jsx
* ```
*/
groupHeaderRenderer?: Function;
/**
* Optional prop that if specified on the Column will be
* passed to the cell. It can be used to uniquely identify
* which column is the cell is in.
*/
columnKey?: string | number;
}
export class Table extends __React.Component<TableProps, {}> {
@@ -395,6 +486,9 @@ declare module FixedDataTable {
export class ColumnGroup extends __React.Component<ColumnGroupProps, {}> {
render(): __React.DOMElement<any>
}
export class Cell extends __React.Component<CellProps, {}> {
render(): __React.DOMElement<any>
}
}
declare module "fixed-data-table" {