diff --git a/fixed-data-table/fixed-data-table-0.4.7-tests.tsx b/fixed-data-table/fixed-data-table-0.4.7-tests.tsx new file mode 100644 index 0000000000..28dae2890f --- /dev/null +++ b/fixed-data-table/fixed-data-table-0.4.7-tests.tsx @@ -0,0 +1,39 @@ +/// +/// +/// + +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 = + + + + +ReactDOM.render(table, document.body); diff --git a/fixed-data-table/fixed-data-table-0.4.7.d.ts b/fixed-data-table/fixed-data-table-0.4.7.d.ts new file mode 100644 index 0000000000..1dc22dc3de --- /dev/null +++ b/fixed-data-table/fixed-data-table-0.4.7.d.ts @@ -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 +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +/// + +declare module FixedDataTable { + export var version: string; + + export interface TableProps extends __React.Props { + /** + * 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, + * 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, + * 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, // array of labels of all columnGroups + * width: number + * ): ?$jsx + * ``` + */ + groupHeaderRenderer?: Function; + } + + export class Table extends __React.Component { + render(): __React.DOMElement + } + export class Column extends __React.Component { + render(): __React.DOMElement + } + export class ColumnGroup extends __React.Component { + render(): __React.DOMElement + } +} + +declare module "fixed-data-table" { + export = FixedDataTable; +} \ No newline at end of file diff --git a/fixed-data-table/fixed-data-table-tests.tsx b/fixed-data-table/fixed-data-table-tests.tsx index 28dae2890f..f104ac5e45 100644 --- a/fixed-data-table/fixed-data-table-tests.tsx +++ b/fixed-data-table/fixed-data-table-tests.tsx @@ -1,39 +1,169 @@ -/// +/// /// -/// 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 { + return ( +
+ // add columns +
+ ); + } } - var table = { + render(): React.ReactElement { + return ( + - - - + width={1000} + height={500}> + Basic content} + width={200} + /> +
+ ); + } +} -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 { + return ( + + Name} + cell={(props: any) => ( + + {this.state.myTableData[props.rowIndex].name} + + )} + width={200} + /> +
+ ); + } +} + +// Create Reusable Cells +interface RowData { + [field: string]: string; +} + +interface MyCellProps { + rowIndex?: number; + field: string; + data: RowData[]; +} + +class MyTextCell extends React.Component { + render(): React.ReactElement { + const {rowIndex, field, data} = this.props; + + return ( + + {data[rowIndex][field]} + + ); + } +} + +class MyLinkCell extends React.Component { + render(): React.ReactElement { + const {rowIndex, field, data} = this.props; + const link: string = data[rowIndex][field]; + + return ( + + {link} + + ); + } +} + +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 { + return ( + + Name} + cell={ + + } + width={200}/> + + Email} + cell={ + + } + width={200} + /> +
+ ); + } +} diff --git a/fixed-data-table/fixed-data-table.d.ts b/fixed-data-table/fixed-data-table.d.ts index 1dc22dc3de..a1400502e7 100644 --- a/fixed-data-table/fixed-data-table.d.ts +++ b/fixed-data-table/fixed-data-table.d.ts @@ -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 +// Definitions by: Petar Paar , Stephen Jelfs // Definitions: https://github.com/borisyankov/DefinitelyTyped /// @@ -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 { - /** - * 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, - * 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, - * 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 = ( + * ( + * + * Cell number: {rowIndex} + * + * )} + * 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, // 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 { @@ -395,6 +486,9 @@ declare module FixedDataTable { export class ColumnGroup extends __React.Component { render(): __React.DOMElement } + export class Cell extends __React.Component { + render(): __React.DOMElement + } } declare module "fixed-data-table" {