Skip to content

Instantly share code, notes, and snippets.

@nikolaymatrosov
Last active December 7, 2015 08:29
Show Gist options
  • Save nikolaymatrosov/5a6644e886b54e17c5c7 to your computer and use it in GitHub Desktop.
Save nikolaymatrosov/5a6644e886b54e17c5c7 to your computer and use it in GitHub Desktop.
Definiton file to fixed-data-table 0.6.0. Made based on component props types.
// Type definitions for fixed-data-table 0.6.0
// Project: https://github.com/facebook/fixed-data-table
/// <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;
/**
* oneOf(['hidden', 'auto']),
*/
overflowX?: string;
/**
* oneOf(['hidden', 'auto']),
*/
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 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;
/**
* Pixel height of footer.
*/
footerHeight?: number;
/**
* 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,
* columnKey: string,
* )
* ```
*/
onColumnResizeEndCallback?: Function;
/**
* Whether a column is currently being resized.
*/
isColumnResizing?: boolean;
}
interface ColumnProps {
key?: number;
/**
* The horizontal alignment of the table cell content.
* oneOf 'left', 'center', 'right'
*/
align?: string;
/**
* Controls if the column is fixed when scrolling in the X axis.
*/
fixed?: boolean;
/**
* 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?: Function | JSX.Element;
/**
* 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?: Function | JSX.Element;
/**
* This is 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?: Function | JSX.Element;
/**
* 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 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 to set the onColumnResizeEndCallback table
* property and render your columns appropriately.
*/
isResizable?: 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.
*/
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;
/**
* This is the header cell for this column group.
* This can either be a string or a React element. Passing in a string
* will render a default footer 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.
*
* You can also pass in a function that returns a react elemnt, with the
* props object above passed in as the first parameter.
*/
header: Function | JSX.Element;
}
interface CellProps {
isScrolling?: boolean;
//oneOf(['left', 'center', 'right'])
align?: string;
className?: string;
highlighted?: boolean;
width: number;
minWidth?: number;
maxWidth?: number;
height: number;
cell?: string | Function | JSX.Element;
columnKey?:string | number;
/**
* The row index that will be passed to `cellRenderer` to render.
*/
rowIndex: number;
/**
* Callback for when resizer knob (in FixedDataTableCell) is clicked
* to initialize resizing. Please note this is only on the cells
* in the header.
* @param number combinedWidth
* @param number left
* @param number width
* @param number minWidth
* @param number maxWidth
* @param number|string columnKey
* @param object event
*/
onColumnResize?: (combinedWidth: number, left: number, width: number, minWidth: number, maxWidth: number, columnKey: number|string, event: any) => void;
/**
* The left offset in pixels of the cell.
*/
left?: number;
}
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>;
}
export class Cell extends __React.Component<CellProps, {}> {
render(): __React.DOMElement<any>;
}
}
declare module "fixed-data-table" {
export = FixedDataTable;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment