diff --git a/types/react-bootstrap-table/index.d.ts b/types/react-bootstrap-table/index.d.ts index 66f3f8786a..0687891657 100644 --- a/types/react-bootstrap-table/index.d.ts +++ b/types/react-bootstrap-table/index.d.ts @@ -1,66 +1,191 @@ -// Type definitions for react-bootstrap-table 2.6 +// Type definitions for react-bootstrap-table 4.1 // Project: https://github.com/AllenFang/react-bootstrap-table -// Definitions by: Frank Laub , Aleksander Lode , Josué Us +// Definitions by: Frank Laub , +// Aleksander Lode , +// Josué Us +// Janeene Beeforth // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.3 -/// - // documentation taken from http://allenfang.github.io/react-bootstrap-table/docs.html -import { ComponentClass, Props, ReactElement } from 'react'; -import { EventEmitter } from 'events'; +import { Component, CSSProperties, Props, ReactElement, SyntheticEvent } from 'react'; + +/** + * Table scroll position. + */ +export type ScrollPosition = 'Top' | 'Bottom'; + +/** + * Row selection mode. Single selection = 'radio', multiple selection = 'checkbox'. + */ +export type SelectRowMode = 'none' | 'radio' | 'checkbox'; + +/** + * Sort Order values. 'asc' = ascending, 'desc' = descending. + */ +export type SortOrder = 'asc' | 'desc'; + +/** + * Type of selection for cell editing. + */ +export type CellEditClickMode = 'none' | 'click' | 'dbclick'; + +/** + * Tell react-bootstrap-table how to trigger expanding by clicking on 'row' or 'column' level. + * If the value is 'column', by default all the columns are expandable. If you want to specify some columns as + * unexpandable, check expandable. + * Default is 'row'. + */ +export type ExpandBy = 'row' | 'column'; + +/** + * Used to specify whether a dropdown button should use 'dropup' mode or 'dropdown' mode. + * Default is usually 'dropdown'. + */ +export type DropDirection = 'dropdown' | 'dropup'; + +/** + * List of valid filter types. + * Note: ArrayFilter can only be used as part of the FilterData passed to the BootstrapTable.handleFilterData + * function. It is NOT valid for use when specifying a filter to the TableHeaderColumn filter properties. + */ +export type FilterType = + | 'TextFilter' + | 'RegexFilter' + | 'SelectFilter' + | 'NumberFilter' + | 'DateFilter' + | 'CustomFilter' + | 'ArrayFilter'; + +/** + * Filter conditions that can be used with TextFilter/SelectFilter/RegexFilter filters. + */ +export type FilterCondition = 'eq' | 'like'; + +/** + * Filter comparators used for NumberFilter/DateFilter filters + */ +export type FilterComparator = '=' | '<' | '<=' | '>' | '>=' | '!='; + +/** + * Element type to use for editing a particular column's cells. + */ +export type EditCellType = 'textarea' | 'select' | 'checkbox' | 'datetime'; + +/** + * Position to show the Pagination Panel. Options are above the table ('top'), below the table ('bottom'), or both + * above and below the table ('both'). + */ +export type PaginationPostion = 'top' | 'bottom' | 'both'; + +/** + * Result type for validation when editing. + */ +export type EditValidatorType = 'success' | 'error'; + +/** + * Used to specify the text alignment for a column. + */ +export type DataAlignType = 'left' | 'center' | 'right' | 'start' | 'end'; + +/** + * Boostrap version number. + */ +export type BootstrapVersion = '3' | '4'; + +/** + * CSV Field types supported. + */ +export type CSVFieldType = 'string' | 'number'; + +/** + * Custom attributes for a column/cell/etc. + * Example: { 'data-attr': 'test' } + */ +export interface CustomAttrs { + [attrKey: string]: string | number | boolean; +} + +/** + * Size per page list definition + */ +export type SizePerPageList = number[] | Array<{ text: string, value: number }>; /** * Interface spec for sepcifying functionality to handle remotely * * Consult [documentation](https://allenfang.github.io/react-bootstrap-table/docs.html#remote) * for more info - * */ export interface RemoteObjSpec { - /** If set, cell edits will be handled remotely */ + /** + * If set, cell edits will be handled remotely + */ cellEdit?: boolean; - /** If set insertions will be handled remotely */ + /** + * If set insertions will be handled remotely + */ insertRow?: boolean; - /** If set deletion will be handled remotely */ + /** + * If set deletion will be handled remotely + */ dropRow?: boolean; - /** If set filters will be handled remotely */ + /** + * If set filters will be handled remotely + */ filter?: boolean; - /** If set search will be handled remotely */ + /** + * If set search will be handled remotely + */ search?: boolean; - /** If set, exporting CSV will be handled remotely */ + /** + * If set, exporting CSV will be handled remotely + */ exportCSV?: boolean; - /** If set sorting will be handled remotely */ + /** + * If set sorting will be handled remotely + */ sort?: boolean; - /** If set pagination will be handled remotely */ + /** + * If set pagination will be handled remotely + */ pagination?: boolean; } export interface BootstrapTableProps extends Props { /** - * Set version='4' to use bootstrap@4, else bootstrap@3 is used. + * Bootstrap version to use, values include '3' or '4'. Defaults to '3'. */ - version?: string; + version?: BootstrapVersion; /** * Use data to specify the data that you want to display on table. */ - data: any[]; + data: object[]; /** - * If set, data is remote (use also fetchInfo) + * Normally, react-bootstrap-table handles all the data sorting/filtering/pagination/etc itself internally. + * If this is true, you need to handle all of those manually outside the table. By default it is false. + * This is used mostly with an external/central data store, for example Redux or a database that returns + * already filtered/sorted/paged data. + * + * If a function given, which means you can choose which functionality should be handled with remote or not.Currently, + * we have following functionality you can control: sort, pagination, cellEdit, insertRow, dropRow, filter, search, + * exportCSV. */ - remote?: ((remobeObj: RemoteObjSpec) => RemoteObjSpec) | boolean; // Updated to support ^3.0.0 + remote?: boolean | ((remobeObj: RemoteObjSpec) => RemoteObjSpec); /** * Use keyField to tell table which column is unique. This is same as isKey in - * Tips: You need choose one configuration to set key field: keyField or isKey in + * Tips: react-bootstrap-table support data manipulation(CRUD) so that we need to fetch correct row by a unique column. + * You need choose one of configuration to set the key field: isKey or keyField in . */ keyField?: string; /** - * Use height to set the height of table, default is 100%. + * Use height to set the height of table, default is 100%. The string needs to have a unit, e.g. 'px', '%'. */ height?: string; /** - * Set the max column width (pixels) + * Set the maximum height of table. You need give a string with an unit(px) value like height. */ maxHeight?: string; /** @@ -88,19 +213,19 @@ export interface BootstrapTableProps extends Props { * If a string given, means the value will be presented as the row class. * If a function given, will pass rowData and rowIndex as params and should return string for presenting class. for examples: * @example - * function trClassFormat(rowData,rowIndex){ - * return rowIndex%2==0?"tr-odd":"tr-even"; //return a class name. - * } + * function trClassFormat(rowData,rowIndex) { + * return rowIndex % 2 == 0 ? "tr-odd" : "tr-even"; // return a class name. + * } */ - trClassName?: string | ((rowData: any, rowIndex: number) => string); + trClassName?: string | ((rowData: ReadonlyArray, rowIndex: number) => string); /** * Enable row insertion by setting insertRow to true, default is false. - * If you enable row insertion, there's a button on the upper left side of table. + * If you enable row insertion, there's a button on the upper left side of table. */ insertRow?: boolean; /** * Enable row deletion by setting deleteRow to true, default is false. - * If you enable row deletion, there's a button on the upper left side of table. + * If you enable row deletion, there's a button on the upper left side of table. */ deleteRow?: boolean; /** @@ -118,8 +243,8 @@ export interface BootstrapTableProps extends Props { */ searchPlaceholder?: string; /** - * Enable strict search, default is false. - * More info here: https://github.com/AllenFang/react-bootstrap-table/issues/1199 + * Strict search. Set this flag to apply search terms so that only rows that contain ALL terms are included in the + * search results. */ strictSearch?: boolean; /** @@ -130,15 +255,101 @@ export interface BootstrapTableProps extends Props { multiColumnSearch?: boolean; /** * Enable export csv function, default is false. - * If you enable, there's a button on the upper left side of table. + * If you enable, there's a button on the upper left side of table. */ exportCSV?: boolean; /** * Set CSV filename (e.g. items.csv). Default is spreadsheet.csv */ - csvFileName?: () => string | string; + csvFileName?: string | (() => string); /** - * Enable row selection on table. selectRow accept an object which have the following properties + * If true, it will hide the pagination if there is only one page, default is false. + */ + ignoreSinglePage?: boolean; + /** + * Specify a fix position for the vertical bar if it exist. Available is a number or Top and Bottom + */ + scrollTop?: number | ScrollPosition; + /** + * Add css styles to the react-bs-table-container class. + * For example: containerStyle={ { background: '#00ff00' } } + */ + containerStyle?: CSSProperties; + /** + * Add css styles to the react-bs-table class. + */ + tableStyle?: CSSProperties; + /** + * Add css styles to the react-bs-container-header class. + */ + headerStyle?: CSSProperties; + /** + * Add css styles to the react-bs-container-body class. + */ + bodyStyle?: CSSProperties; + /** + * Add your own class names on the react-bs-table-container class + */ + containerClass?: string; + /** + * Add your own class names on the react-bs-table class + */ + tableContainerClass?: string; + /** + * Add your own class names on the react-bs-container-header class + */ + headerContainerClass?: string; + /** + * Add your own class names on the react-bs-container-body class + */ + bodyContainerClass?: string; + /** + * react-bootstrap-table separate two table element as header and body. + * The tableHeaderClass is for the table element in the header + */ + tableHeaderClass?: string; + /** + * react-bootstrap-table separate two table element as header and body. + * The tableBodyClass is for the table element in the body + */ + tableBodyClass?: string; + /** + * Tell react-bootstrap-table which rows are able to expand. This prop accepts + * a callback function and is suppose to be return an Array of row keys. + * expandableRow is always used with expandComponent, both of props are enable + * the expand row functionality on table. + */ + expandableRow?(row: any): boolean; + /** + * Tell react-bootstrap-table what's content should be rendered in the expanding + * content. This props accept a callback function and is suppose to be return JSX + * or String. + * expandComponent is always used with expandableRow, both of props are enable + * the expand row functionality on table. + */ + expandComponent?(row: any): string | ReactElement; + /** + * Assign some alternative options for expand row feature, expandColumnOptions + * only have four available property currently. + */ + expandColumnOptions?: ExpandColumnOptions; + /** + * Enable the multi sort on table and the number value is means max number of sorting column. + */ + multiColumnSort?: number; + /** + * This prop will enable/disable the keyboard navigation cell by cell on table. This is new + * feature from 3.0.0. Default is false. You can have a basic and simple keyboard navigation + * feature on table by enabling keyBoardNav on BootstrapTable. For the usage of keyboard + * navigation is you can click any cell to focus in or use ⬅ ⬆ ⬇ ➡ to natigate the cell. + * + * But if you want more advance features for keyboard navigation or to integrate with cell + * editing, expand row or selection row, you may get interested to see how they work well + * together: In the advance cases, you need to configure keyBoardNav as an object. + */ + keyBoardNav?: boolean | KeyboardNavigation; + /** + * Enable row selection on table. SelectRow accept an object. */ selectRow?: SelectRow; /** @@ -149,51 +360,119 @@ export interface BootstrapTableProps extends Props { * For some options setting on this component, you can set the options attribute and give an object which contain following properties */ options?: Options; + /** + * Used to specify the total number of rows (matching current filter/sort/size per page) in a remote data source. + * Documented in examples, but missing from the main docs. Essential for remote data pagination calculations. + */ fetchInfo?: FetchInfo; - printable?: boolean; - tableStyle?: any; - containerStyle?: any; - headerStyle?: any; - bodyStyle?: any; - ignoreSinglePage?: boolean; - containerClass?: string; - tableContainerClass?: string; - headerContainerClass?: string; - bodyContainerClass?: string; - expandableRow?: (row: any) => boolean; - expandComponent?: (row: any) => any; + /** + * Automatically collapses open rows when doing a sort/filter/search action if those options have been specified. + * Is an object with three possible fields: sort, filter, search. Each field is a flag to specify whether that + * action type should cause expanded rows to close. All three fields default to false. + */ + autoCollapse?: { + sort?: boolean; + filter?: boolean; + search?: boolean; + }; + /** + * Set a style to be used for the table rows. + */ + trStyle?: CSSProperties; + /** + * Disable the automatic tabIndex for navigating between cells. This can be useful if you have a page with multiple + * tables on the page, to stop the tab moving to another table. Default is false. + */ + withoutTabIndex?: boolean; + /** + * Disable writing the header row when exporting to a CSV file. + */ + excludeCSVHeader?: boolean; + /** + * Add a footer to the table. + */ + footer?: boolean; + /** + * Data for the table footer. Format is an array of footer rows, each containing an array of column footer data. + */ + footerData?: FooterData[][]; + /** + * Table footer custom class + */ + tableFooterClass?: string; } -export type SelectRowMode = 'none' | 'radio' | 'checkbox'; - -export interface SelectRow { +/** + * Footer Data for a column. + */ +export interface FooterData { /** - * For specifing the selection is single(radio) or multiple(checkbox). + * Title to display for the column footer + */ + label: string; + /** + * Index for the column that this footer belongs to + */ + columnIndex: number; + /** + * Text alignment for the data in this footer. + */ + align?: DataAlignType; + /** + * Formatting function for the data in this footer. Used to be able to do things like sum the contents of this + * column in the table so that the footer can be used for totals, etc. + * + * The output value from the formatter function will be used instead of the label if the formatter function is + * defined. + */ + formatter?(tableData: any[]): string | number | ReactElement; +} + +export interface SelectRow { + /** + * Specify whether the selection column uses single(radio) or multiple(checkbox) selection modes. Required. */ mode: SelectRowMode; /** - * Click the row will trigger selection on that row if enable clickToSelect, default is false. + * If true, clicking the row will trigger selection on that row, default is false. */ clickToSelect?: boolean; /** - * If true, click the row will trigger selection on that row and also trigger cell editing if you enabled cell edit. Default is false. + * If true, clicking the row will trigger selection on that row and also trigger cell editing if you enabled cell edit. Default is false. */ clickToSelectAndEditCell?: boolean; /** - * You can assign the background color of row which be selected. + * If true, clicking the row will trigger expanding the row. Default is false. */ - bgColor?: string; + clickToExpand?: boolean; /** - * You can assign the class name of row which be selected. + * You can assign the background color of row which be selected. + * If your requirement is much complex, you can assign a function to bgColor that + * returns a css color string. */ - className?: string; + bgColor?: string | ((row: TRow, isSelect: boolean) => string); + /** + * You can change the width of the selection column by columnWidth (include units). + */ + columnWidth?: string; + /** + * You can assign the class name of selected rows. This can either be a string, or a function that takes two + * arguments: row and isSelect. + * `row`: The current row data. + * `isSelect`: Flag indicating whether this particular row is selected. + */ + className?: string | ((row: TRow, isSelect: boolean) => string); /** * Give an array data to perform which rows you want to be selected when table loading. - * The content of array should be the rowkey which you want to be selected. + * The content of array should be the rowkeys for the rows that you want to be selected. */ - selected?: string[] | number[]; + selected?: Array; /** - * if true, the radio/checkbox column will be hide. + * Provide a list of unselectable row keys. + */ + unselectable?: Array; + /** + * If true, the radio/checkbox column will be hidden. * You can enable this attribute if you enable clickToSelect and you don't want to show the selection column. */ hideSelectColumn?: boolean; @@ -203,282 +482,635 @@ export interface SelectRow { showOnlySelected?: boolean; /** * Accept a custom callback function, if a row be selected or unselected, this function will be called. - * This callback function taking three arguments row, isSelected and event: - * `row`: is the row data which you wanted to select or unselect. - * `isSelected`: it's a boolean value means "whether or not that row will be selected?". - * `event`: The event target object. - * If return value of this (function) is false, the select or deselect action will not be applied. + * This callback function takes four arguments: row, isSelected, event, and rowIndex: + * `row`: is the row data which you wanted to select or unselect. + * `isSelected`: it's a boolean value means "whether or not that row will be selected?". + * `event`: The event target object. + * `rowIndex`: the index number for the row. + * If the return value of this (function) is false, the select or deselect action will not be applied. */ - onSelect?: (row: any, isSelected: boolean, event: any) => boolean; + onSelect?(row: TRow, isSelected: boolean, event: any, rowIndex: number): boolean | void; /** - * Accept a custom callback function, if click select all checkbox, this function will be called. - * This callback function taking two arguments isSelected and currentSelectedAndDisplayData: - * `isSelected`: it's a boolean value means "whether or not that row will be selected?". - * `currentSelectedAndDisplayData`: If pagination enabled, this result is the data which in a page. In contrast, this is all data in table. - * If return value of this function is false, the select all or deselect all action will not be applied. + * Accept a custom callback function, if click select all checkbox, this function will be called. This callback + * function taking two arguments: isSelected, rows. + * isSelectedis a boolean value which means "whether or not that row will be selected?". + * rows is the rows which be selected or unselected. + * + * Tips: + * If the return value of this function is false, the select all or deselect all action will not be applied. + * If return value of this function is an array of rowkeys, this array will be applied as selection row when + * select all triggers. It's useful when you have a validation to filter some rows on selecting all. */ - onSelectAll?: (isSelected: boolean, currentSelectedAndDisplayData: any) => boolean; - + onSelectAll?(isSelected: boolean, rows: TRow[]): boolean | Array; /** - * Provide a list of unselectable row keys. + * Function that returns a component to customize the display of the selection checkbox or radio button with. */ - unselectable?: number[]; + customComponent?(props: CustomSelectProps): string | ReactElement; + /** + * Only unselect visible rows. + */ + onlyUnselectVisible?: boolean; } -export type CellEditClickMode = 'none' | 'click' | 'dbclick'; - -export interface CellEdit { +/** + * react-bootstrap-table supports cell editing. When you enable this feature, react-bootstrap-table will make + * the target cell editable by either clicking or dbclicking (depending on the properties you set). + */ +export interface CellEdit { /** - * To spectify which condition will trigger cell editing.(click or dbclick) + * Spectify which condition will trigger cell editing.(click or dbclick). Required. */ mode: CellEditClickMode; /** - * Enable blurToSave will trigger a saving event on cell when mouse blur on the input field. Default is false. + * Enabling blurToSave will trigger a saving event on the cell when the input field becomes deselected. Default is false. * In the default condition, you need to press ENTER to save the cell. */ blurToSave?: boolean; /** - * Accept a custom callback function, before cell saving, this function will be called. - * This callback function taking three arguments:row, cellName and cellValue - * It's necessary to return a bool value which whether apply this cell editing. + * Enabling blurToEscape will result in a cell edit being cancelled when the user clicks outside the table during + * editing. + * Default is false. */ - beforeSaveCell?: (row: any, cellName: string, cellValue: any) => boolean; + blurToEscape?: boolean; + /** + * nonEditableRows tell react-bootstrap-table which rows should not be edited on all of the columns. Briefly, its a row level limitation + * Please assign a callback function, and this function is supposed to be return an array of row keys. + */ + nonEditableRows?(): Array; + /** + * Accept a custom callback function, before cell saving, this function will be called. + * This callback function takes four arguments: row, cellName, cellValue and done. + * `row`: the row data to be saved. + * `cellName`: the column dataField cell name that has been modified. + * `cellValue`: the new cell value. + * `done`: a callback function to use if this is an async operation, to indicate if the save data is valid. + * If your validation is async, for example: you want to pop a confirm dialog for user to confim in this case, + * react-bootstrap-table pass a callback function to you. You are supposed to call this callback function with a + * bool value to perfom if it is valid or not in addition, you should return 1 from the main function to tell + * react-bootstrap-table that this is a async operation. + */ + beforeSaveCell?(row: TRow, cellName: K, cellValue: TRow[K], done: (isValid: boolean) => void): boolean | 1; /** * Accept a custom callback function, after cell saving, this function will be called. - * This callback function taking three arguments:row, cellName and cellValue + * This callback function takes three arguments: row, cellName and cellValue */ - afterSaveCell?: (row: any, cellName: string, cellValue: any) => void; + afterSaveCell?(row: TRow, cellName: K, cellValue: TRow[K]): void; } -export type SortOrder = 'asc' | 'desc'; - -export interface Options { +/** + * Main Options for the Bootstrap Table. + */ +export interface Options { /** - * Manage sort field by yourself + * Provide the name of the column that should be sorted by. + * If multi-column sort is active, this is an array of columns. */ - sortName?: string; + sortName?: keyof TRow | Array; /** - * Manage sort order by yourself + * Specify whether the sort should be ascending or descending. + * If multi-column sort is active, this is an array of sortOrder items. */ - sortOrder?: SortOrder; + sortOrder?: SortOrder | SortOrder[]; /** - * Assign a default sort field. + * Specify the default sort column. + * Note: when using cleanSort(), this default sort column will be restored. */ - defaultSortName?: string; + defaultSortName?: keyof TRow; /** - * Assign a default sort ordering. + * Assign a default sort order. + * Note: when using cleanSort(), this default sort order will be restored. */ defaultSortOrder?: SortOrder; /** - * False to disable sort indicator on header column, default is true. + * Set to false to disable sort indicators on header columns, default is true. */ sortIndicator?: boolean; /** - * Change the displaying text on table if data is empty. + * Assign a callback function which will be called after triggering sorting. + * This function takes two argument: `sortName` and `sortOrder`. + * `sortName`: The sort column name, or array of column names if multi-column sort is active. + * `sortOrder`: The sort ordering, or array of ordering if multi-column sort is active. + */ + onSortChange?: + | ((sortName: keyof TRow, sortOrder: SortOrder) => void) + | ((sortName: ReadonlyArray, sortOrder: ReadonlyArray) => void); + /** + * Change the text displayed on the table if data is empty. */ noDataText?: string | ReactElement; + /** + * If true, this hides the noDataText on the table when the tableis empty. Default is false. + */ + withoutNoDataText?: boolean; /** * A delay for trigger search after a keyup (millisecond) */ searchDelayTime?: number; /** - * A custom text on export csv button - */ - exportCSVText?: string; - /** - * Default is false, if true means you want to ignore any editable configuration when row insert. - */ - ignoreEditable?: boolean; - /** - * Only work on enable search. If true, there will be a button beside search input field for clear search field text. + * Only work on enable search. If true, there will be a button beside the search input field + * that will empty the field when clicked. */ clearSearch?: boolean; /** - * Assign a callback function which will be called after table update. + * Set the default search condition. */ - afterTableComplete?: Function; + defaultSearch?: string; + /** + * Assign a callback function which will be called when search text changes. This function takes + * three argument: + * `searchText`: the text from the search field. + * `colInfos`: Array of column settings (e.g. filterFormatted, etc). + * `multiColumnSearch`: True if multiple column search is enabled. + * In most cases, you only need to use searchText. This function usually used for remote searching. + */ + onSearchChange?(searchText: string, colInfos: ReadonlyArray>, multiColumnSearch: boolean): void; + /** + * Assign a callback function which will be called after triggering searching. + * This function takes two argument: search and result. + * `search`: The search text from the user. + * `result`: The results after searching (array of rows that matched the search). + */ + afterSearch?(search: string, result: ReadonlyArray): void; + /** + * Default is false, if true means you want to ignore any editable columns when creating the insert form. + */ + ignoreEditable?: boolean; + /** + * Assign a callback function that will be called after table updates. + */ + afterTableComplete?(): void; /** * Assign a callback function which will be called after row delete. - * This function taking one argument: rowKeys, which means the row key you dropped. + * This function takes two arguments: + * `rowKeys`: which means the row keys for the deleted rows + * `rows`: the array of row data that was deleted. */ - afterDeleteRow?: (rowKeys: string[]) => void; + afterDeleteRow?(rowKeys: ReadonlyArray, rows: ReadonlyArray): void; /** - * Assign a callback function which will be called after row insert. - * This function taking one argument: row, which means the whole row data you added. + * Assign a callback function which will be called after inserting a row. + * This function takes one argument: row, which means the whole row data you added. */ - afterInsertRow?: (row: any) => void; + afterInsertRow?(row: TRow): void; /** - * Customize the text of previouse page button + * Assign a callback function which will be called after triggering column filtering. + * This function takes two arguments: filterConds and result. + * `filterConds`: It's an array object which contain all column filter conditions. + * `result`: The results after filtering. + * + * This function only work when you enable columnFilter on or define + * a filter on . */ - prePage?: string; + afterColumnFilter?(filterConds: ReadonlyArray, result: ReadonlyArray): void; /** - * Customize the text of next page button + * Assign a callback function which will be called when a row is added. This function + * takes three arguments: + * `row`: which represents the new row data + * `colInfos`: Array of Column Descriptions for the table. + * `errorCallback`: Function to call to provide an async error message if the Add fails. + * The function should either return a string immediately, or return false and then return a string through the + * error callback function later. */ - nextPage?: string; + onAddRow?(row: TRow, colInfo: ReadonlyArray>, errorCallback: (message: string) => void): string | boolean; /** - * Customize the text of first page button + * Assign a callback function which will be called when a filter condition changes. + * This function takes one argument: filterObj which is an object which take dataField + * as object key and the value is the filter condition. */ - firstPage?: string; + onFilterChange?(filterObject: FilterData): void; /** - * Customize the text of last page button + * Assign a callback function which will be called when the export csv button is clicked. + * In this function, you need to return an array of rows to be exported. */ - lastPage?: string; + onExportToCSV?(): TRow[]; + /** + * Assign a callback function which will be called when a row been deleted. + * This function takes two arguments: + * `rowKeys`: keys for the rows to be deleted. + * `rows`: row data for the rows to be deleted. + */ + onDeleteRow?(rowKeys: ReadonlyArray, rows: ReadonlyArray): void; + /** + * Assign a callback function which will be called after a row click. + * This function takes three arguments: + * `row`: which is the row data that was clicked on. + * `columnIndex`: index of the column that was clicked on. + * `rowIndex`: index of the row that was clicked on. + */ + onRowClick?(row: TRow, columnIndex: number, rowIndex: number): void; + /** + * Assign a callback function which will be called after a row double click. + * This function takes one argument: row which is the row data that was double clicked on. + */ + onRowDoubleClick?(row: TRow): void; + /** + * Assign a callback function which will be called when mouse enters the table. + */ + onMouseEnter?(): void; + /** + * Assign a callback function which will be called when mouse leaves the table. + */ + onMouseLeave?(): void; + /** + * Assign a callback function which will be called when the mouse enters a row in table. + * This function takes two arguments: + * `row`: the row data the mouse entered + * `e`: the mouse event data + */ + onRowMouseOver?(row: TRow, e: React.MouseEvent): void; + /** + * Assign a callback function which will be called when mouse leaves a row in table. + * This function takes two arguments: + * `row`: the row data the mouse entered + * `e`: the mouse event data + */ + onRowMouseOut?(row: TRow, e: React.MouseEvent): void; + /** + * Assign a callback function which will be called when deleting a row. + * It gives you a chance to customize your confirmation for row deletion. + * This function takes two argument: next and rowKeys: + * `next`: If you confirm the delete, call next() to continue the process. + * `rowKeys` Is the row keys to be deleted, you can call the `next` function to apply this deletion. + */ + handleConfirmDeleteRow?(next: () => void, rowKeys: ReadonlyArray): void; + /** + * Customize the text of previouse page button. + * If using the default pagination panel, this should be a string to use for the button label. + * If creating a custom pagination panel, this is passed to the panel and can be of any type desired. + */ + prePage?: any; + /** + * Customize the text of next page button. + * If using the default pagination panel, this should be a string to use for the button label. + * If creating a custom pagination panel, this is passed to the panel and can be of any type desired. + */ + nextPage?: any; + /** + * Customize the text of first page button. + * If using the default pagination panel, this should be a string to use for the button label. + * If creating a custom pagination panel, this is passed to the panel and can be of any type desired. + */ + firstPage?: any; + /** + * Customize the text of last page button. + * If using the default pagination panel, this should be a string to use for the button label. + * If creating a custom pagination panel, this is passed to the panel and can be of any type desired. + */ + lastPage?: any; /** * Accept a number, which means the page you want to show as default. */ page?: number; /** * You can change the dropdown list for size per page if you enable pagination. + * Default is [10, 25, 30, 50]. */ - sizePerPageList?: number[]; + sizePerPageList?: SizePerPageList; /** - * Means the size per page you want to locate as default. + * Current chosen size per page. */ sizePerPage?: number; /** - * To define the pagination bar length, default is 5. + * Number of page buttons to show on the pagination bar, default is 5. + * i.e. previous 2 pages + current page + next two pages = 5. */ paginationSize?: number; /** - * To define where to start counting the pages. + * Hide the dropdown list for size per page, default is false. + */ + hideSizePerPage?: boolean; + /** + * Display a short text showing the total number of rows and current lines displayed, + * default is false. If you want to customize this short text, you can give a function + * and this function take three arguments: + * `start`: Current start index + * `to`: Current end index + * `total`: The total data volume. + */ + paginationShowsTotal?: boolean | ((start: number, to: number, total: number) => string | ReactElement); + /** + * Allows you to modify where to start counting the pages, e.g. to set the first page number to 0. + * Default is 1. */ pageStartIndex?: number; /** * Assign a callback function which will be called after page changed. - * This function taking two argument: page and sizePerPage. - * `page`: Current page. - * `sizePerPage`: The data size which in one page. + * This function takes two argument: page and sizePerPage. + * `page`: New page number + * `sizePerPage`: The number of rows to display in one page. */ - onPageChange?: (page: number, sizePerPage: number) => void; + onPageChange?(page: number, sizePerPage: number): void; /** - * Assign a callback function which will be called after size per page dropdown changed. - * This function taking one argument: sizePerPage. - * `sizePerPage`: The data size which in one page. + * Assign a callback function which will be called after the size per page (number of rows per page) + * has been changed. + * This function takes one argument: sizePerPage. + * `sizePerPage`: The new number of rows to display in one page. */ - onSizePerPageList?: (sizePerPage: number) => void; + onSizePerPageList?(sizePerPage: number): void; /** - * Assign a callback function which will be called after trigger sorting. - * This function taking two argument: `sortName` and `sortOrde`r. - * `sortName`: The sort column name - * `sortOrder`: The sort ordering. + * Default is false. If true, the pagination list will be hidden when there is only one page. */ - onSortChange?: (sortName: string, sortOrder: SortOrder) => void; + hidePageListOnlyOnePage?: boolean; /** - * Assign a callback function which will be called after trigger searching. - * This function taking two argument: search and result. - * `search`: The search text which user input. - * `result`: The results after searching. - */ - afterSearch?: (search: string, result: any) => void; - /** - * Assign a callback function which will be called after trigger column filtering. - * This function taking two argument: filterConds and result. - * `filterConds`: It's an array object which contain all column filter conditions. - * `result`: The results after filtering. - */ - afterColumnFilter?: (filterConds: any[], result: any) => void; - /** - * Assign a callback function which will be called after a row click. - * This function taking one argument: row which is the row data which you click on. - */ - onRowClick?: (row: any) => void; - /** - * Assign a callback function which will be called after a row double click. - * This function taking one argument: row which is the row data which you double click on. - */ - onRowDoubleClick?: (row: any) => void; - /** - * Background color on expanded rows. + * Background color on expanded rows (css color value). */ expandRowBgColor?: string; /** - * Assign a callback function which will be called when mouse enter into the table. + * Tell react-bootstrap-table how to trigger expanding by clicking on 'row' or 'column' level. + * If the value is 'column', by default all the columns are expandable. If you want to specify some columns as + * unexpandable, check expandable. + * Default is 'row'. */ - onMouseEnter?: Function; + expandBy?: ExpandBy; /** - * Assign a callback function which will be called when mouse leave from the table. + * Customize the text on the insert button. */ - onMouseLeave?: Function; - /** - * Assign a callback function which will be called when mouse over a row in table. - * This function taking one argument: row which is the row data which mouse over. - */ - onRowMouseOver?: Function; - /** - * Assign a callback function which will be called when mouse leave from a row in table. - * This function taking one argument: row which is the row data which mouse out. - */ - onRowMouseOut?: Function; - - /** - * Assign a callback function which will be called when row dropping. - * It give you a chance to customize your confirmation for row deletion. - * This function taking two argument: next and rowKeys: - * `next`: If you confirm to drop row, call next() to continue the process - * `rowKeys` is the row keys which been deleted, you can call next function to apply this deletion. - */ - handleConfirmDeleteRow?: (next: Function, rowKeys: any[]) => void; - paginationShowsTotal?: boolean | ((start: number, to: number, total: number) => ReactElement); - onSearchChange?: Function; - onAddRow?: Function; - onExportToCSV?: Function; - insertText?: string; + /** + * Customize the text on the delete button. + */ deleteText?: string; + /** + * Customize the text on the save button in the insert modal. + */ saveText?: string; + /** + * Customize the text on the close button in the insert modal. + */ closeText?: string; - // Customization properties /** - * Callback function to be called when a cell is modified - * - * https://allenfang.github.io/react-bootstrap-table/example.html#remote - * + * Customize the text on the export csv button */ - onCellEdit?: (row: any, field: string, value: any) => any; + exportCSVText?: string; /** - * Callback function to be called when filter changing - * - * https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/remote/remote-store-filtering.js#L67 - * + * You can do something before the toastr pop or even disable the toastr!! + * Returning false or void will not trigger the toastr. + * If you want the toastr popup, you should return true always. + * Inputs match the EditValidatorObject.notification field types. */ - onFilterChange?: (filterObj: any) => any; + beforeShowError?(type: EditValidatorType, msg: string, title: string): boolean | void; /** - * Callback function which will be called when a row will be deleted - * - * https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/remote/remote-store-delete-row.js#L27 - * + * Default is true. If false, during printing the toolbar is hidden. */ - onDeleteRow?: (rows: any) => any; + printToolBar?: boolean; /** - * A callback which will be called after page changed - * - * https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/remote/remote-store-paging.js#L30 - * + * ToolBar is the area on the top of table, it contain the search panel, buttons for data manipulation. + * After v3.0.0, you can custom all the components in the ToolBar also itself too. + * Give a toolBar in options props and toolBar only accept a function and a JSX returned value is necessary. */ - onpageChange?: (page: any, sizePerPage: number) => any; + toolBar?(props: ToolBarProps): ReactElement; + /** + * Button group which contain the insert, drop, show only select and export CSV buttons, these button all + * grouped as btn-group class in bootstrap. This is a chance that you can custom this button group. + * Give a btnGroup in options props and btnGroup only accept a function and a JSX returned value is necessary. + * This lets you customize just the left-hand-side of the toolbar if desired. + */ + btnGroup?(props: ButtonGroupProps): ReactElement; + /** + * It's available to customize the insert button by configuring insertBtn in options props, insertBtn only + * accept a function and a JSX returned value is necessary. This function will take one argument: onClick. + * + * The default `InsertButton` component is also exported as a component, so that you can use it as the base + * for your custom component. + */ + insertBtn?(onClick: (e: React.MouseEvent) => void): ReactElement; + /** + * It's available to customize delete button by configuring deleteBtn in options props, deleteBtn onl) => void): ReactElement; + /** + * It's available to customize the export csv button by configuring exportCSVBtn in options props, exportCSVBtn only + * accept a function and a JSX returned value is necessary. This function will take one argument: onClick. + * + * The default `ExportCSVButton` component is also exported as a component, so that you can use it as the base + * for your custom component. + */ + exportCSVBtn?(onClick: (e: React.MouseEvent) => void): ReactElement; + /** + * It's available to custom select only toggle button by configuring showSelectedOnlyBtn in options props. + * showSelectedOnlyBtn only accept a function and a JSX returned value is necessary. + * This function will take two argument: onClick and showSelected. + * + * The default `ShowSelectedOnlyButton` component is also exported as a component, so that you can use it as + * the base for your custom component. + */ + showSelectedOnlyBtn?(onClick: (e: React.MouseEvent) => void, showSelected: boolean): ReactElement; + /** + * You can custom the whole search panel(right side) by searchPanel in options props. searchPanel only accept + * a function and a JSX returned value is necessary. This function will take one argument: props, that contains: + * `searchField`: the default search field component + * `clearBtn`: the default clear button component + * `defaultValue`: the default text for the search field + * `placeholder`: the default placeholder text for the search field + * `clearBtnClick`: the callback function to use when the clear search button is clicked + * `search`: the callback function for triggering the search, which takes the search text as an input. + */ + searchPanel?(props: SearchPanelProps): ReactElement; + /** + * You can custom the search input field only by searchField in options props. searchField only accept a + * function and a JSX returned value is necessary. + * + * The default `SearchField` component is also exported as a component, so that you can use it as the base for + * your custom component. + */ + searchField?(props: SearchFieldProps): ReactElement & SearchFieldInterface>; + /** + * You can custom the clear button for search field by giving clearSearchBtn in options props. + * clearSearchBtn only accept a function and a JSX returned value is necessary. + * + * The default `ClearSearchButton` component is also exported as a component, so that you can use it as the + * base for your own custom component. + */ + clearSearchBtn?(onClick: (e: React.MouseEvent) => void): ReactElement; + /** + * You can customize everything in the insert modal via options.insertModal and we give you the event + * callback, props and some informations: onModalClose, onSave, columns, validateState, ignoreEditable + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/custom/insert-modal/custom-insert-modal.js + */ + insertModal?( + onModalClose: () => void, + onSave: (row: TRow) => void, + columns: ReadonlyArray>, + validateState: { [dataField: string]: string }, + ignoreEditable: boolean + ): ReactElement; + /** + * You can customize the body of the insert modal via options.insertModalBody and we give you the following + * arguments: columns, validateState {[fieldname]: errorMsg}, ignoreEditable + * + * Note: There is no exported Insert Modal Body component - if you are customising this, you need to create your + * own body component. That component needs to implement a `getFieldValue` method that returns the new row data. It + * will be called by react-bootstrap-table when the save button is clicked in the insert modal window. + */ + insertModalBody?( + columns: ReadonlyArray>, + validateState: { [dataField: string]: string }, + ignoreEditable: boolean + ): React.ReactElement & ModalBodyInterface>; + /** + * It's available to custom the header of insert modal by configuring options.insertModalHeader. It only accepts + * a function and a JSX returned value is necessary. This function will take two arguments: closeModal and save. + * `closeModal`: callback function to trigger closing the modal window. + * `save`: callback function to trigger saving the new row data. + * + * The default `InsertModalHeader` component is also exported as a component, so that you can use it as the base + * for your own custom component. + */ + insertModalHeader?(closeModal: () => void, save: () => void): ReactElement; + /** + * It's available to custom the footer of insert modal by configuring options.insertModalFooter. It only accepts + * a function and a JSX returned value is necessary. This function will take two arguments: closeModal and save. + * `closeModal`: callback function to trigger closing the modal window. + * `save`: callback function to trigger saving the new row data. + * + * The default `InsertModalFooter` component is also exported as a component, so that you can use it as the base + * for your own custom component. + */ + insertModalFooter?(closeModal: () => void, save: () => void): ReactElement; + /** + * Function to customize all of components for pagination, including the sizePerPage dropdown and the + * pagination list. + */ + paginationPanel?(props: PaginationPanelProps): ReactElement; + /** + * Function to customize the sizePerPage dropdown. + */ + sizePerPageDropDown?(props: SizePerPageFunctionProps): ReactElement; + /** + * Location for the pagination panel to be displayed. Options are 'top' (above the table), 'bottom' + * (below the table) and 'both' (above and below the table). + */ + paginationPosition?: PaginationPostion; + /** + * Callback when the value in a cell has been modified. It accepts a function that takes three arguments: + * `row`: row that is being edited. + * `fieldName`: column dataField for the cell being edited. + * `value`: new value for the cell. + * The function allows you to make further modifications to the cell value prior to it being saved. You need to + * return the final cell value to use. + */ + onCellEdit?(row: TRow, fieldName: K, value: TRow[K]): TRow[K]; + /** + * Custom message to show when the InsertModal save fails validation. + * Default message is 'Form validate errors, please checking!' + */ + insertFailIndicator?: string; + /** + * Function to verify that a key being generated in the Insert Modal is a valid key. + * If the key fails validation, return a string error message. + * If the key is ok, return void. + */ + isValidKey?(key: number | string): string | void; + /** + * Ability to disable the BOM in the exported CSV file. + * BOM = prepend BOM for UTF-8 XML and text/* types(including HTML) when saving the file. + */ + noAutoBOM?: boolean; + /** + * Custom class to use for the expanded content section of an expanded row. This can either be a string, or a + * function that returns a string and takes three arguments: row, rowIndex, isExpanding. + * `row`: the row expanding/collapsing. + * `rowIndex`: index number of the row. + * `isExpanding`: boolean flag specifying whether the field is expanding or collapsing. + */ + expandBodyClass?: string | ((row: TRow, rowIndex: number, isExpanding: boolean) => string); + /** + * Custom class to use for the row itself for an expanded row when it has been expanded. This can either be a + * string, or a function that returns a string and takes two arguments: row and rowIndex. + * `row`: the expanded row. + * `rowIndex`: index number of the row. + */ + expandParentClass?: string | ((row: TRow, rowIndex: number) => string); + /** + * Customize the field separator in a CSV export file. Default is ','. + */ + exportCSVSeparator?: string; + /** + * Set a function to be called when expanding or collapsing a row. This function takes two arguments: rowKey + * and isExpand. + * `rowKey`: dataField key for the row that is expanding or collapsing. + * `isExpand`: True if the row is expanding, false if it is collapsing. + */ + onExpand?(rowKey: number | string, isExpand: boolean): void; + /** + * Specify that only one row should be able to be expanded at the same time. + */ + onlyOneExpanding?: boolean; + /** + * Customize the tooltip text shown when hovering over the prePage button. + */ + prePageTitle?: string; + /** + * Customize the tooltip text shown when hovering over the nextPage button. + */ + nextPageTitle?: string; + /** + * Customize the tooltip text shown when hovering over the firstPage button. + */ + firstPageTitle?: string; + /** + * Customize the tooltip text shown when hovering over the lastPage button. + */ + lastPageTitle?: string; + /** + * Provide an array of expanded rows for the table. + */ + expanding?: Array; + /** + * Flag to indicate that the table should keep the SizePerPage dropdown open if the table rerenders without any + * user interaction. + */ + keepSizePerPageState?: boolean; + /** + * Flag to indicate that the table should always show next/previous buttons even when there is not next/previous + * page. + */ + alwaysShowAllBtns?: boolean; + /** + * Flag to indicate whether there should be buttons for First and Last page. + */ + withFirstAndLast?: boolean; } -interface FetchInfo { - dataTotalSize?: number; +/** + * Properties for data where only a portion of the data is loaded into the table at one time (i.e. remote data). + */ +export interface FetchInfo { + /** + * Total number of rows that match the current table filter/search properties. + */ + dataTotalSize: number; } -export interface BootstrapTable extends ComponentClass { +/** + * BootstrapTable class definition. + */ +export class BootstrapTable extends Component { /** - * Call this function to insert an new row to table. + * Call this function to insert a new row to table. */ handleAddRow(row: any): void; /** - * Call this function to insert an new row as first row on table. + * Call this function to insert a new row as the first row in the table. */ handleAddRowAtBegin(row: any): void; /** - * Call this function to drop rows in table. + * Call this function to drop/delete rows from the table. */ - handleDropRow(rowKeys: any[]): void; + handleDropRow(rowKeys: Array): void; /** * Call this function to do column filtering on table. + * @example: + * // Filtering passing an array of values + * this.refs.table.handleFilterData({ + * name: { type: 'ArrayFilter', value: ['Item name 3', 'Item name 4'] }, + * price: { type: 'ArrayFilter', value: [2100, 2104] } + * }); */ - handleFilterData(filter: any): void; + handleFilterData(filter: FilterData): void; /** * Call this function with search text for fully searching. */ @@ -486,104 +1118,181 @@ export interface BootstrapTable extends ComponentClass { /** * Call this function to sort table. */ - handleSort(order: SortOrder, field: string): void; + handleSort(order: SortOrder, dataField: string): void; /** * Call this function to get the page by a rowkey */ - getPageByRowKey(rowKey: string): any; + getPageByRowKey(rowKey: number | string): number; /** * Call this function to export table as csv. */ handleExportCSV(): void; /** - * Clean all the selection state on table. + * Reset the sort options to the defaults. Documented in examples but missing from main options list. + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/sort/clean-sorted-table.js + */ + cleanSort(): void; + /** + * Deselect all rows in the table. */ cleanSelected(): void; + /** + * Call reset to clean all the status on the table currently (sort, editing, filtering, search). + */ + reset(): void; } -interface BootstrapTable extends ComponentClass { } -declare const BootstrapTable: BootstrapTable; -export type DataAlignType = 'left' | 'center' | 'right' | 'start' | 'end'; export interface TableHeaderColumnProps extends Props { /** - * The field of data you want to show on column. + * The field of data you want to show on column. This is used throughout react-bootstrap-table as the column field + * name. */ dataField?: string; /** - * Use isKey to tell table which column is unique. This is same as keyField in - * Tips: You need choose one configuration to set key field: isKey or keyField in + * Use isKey to tell table which column is unique. This is same as the keyField in + * Tips: You need choose one configuration to set key field: isKey or the keyField in */ isKey?: boolean; /** - * Set the column width. ex: 150, it's means 150px + * Set the column width, including the units. e.g. '10%' or '150px' */ width?: string; /** - * Set align in column, value is left, center, right, start and end. + * Set the text alignment in the column, possible values are 'left', 'center', 'right', 'start' and 'end'. */ dataAlign?: DataAlignType; - /** * Alignment of text in the column header. + * Tip: If you don't set the headerAlign, it will default to the setting for dataAlign. */ headerAlign?: DataAlignType; /** - * True to enable table sorting. Default is disabled. + * True to enable table sorting on this column. Default is disabled. */ dataSort?: boolean; - /** - * Default search string. - */ - defaultSearch?: string; /** * Allow user to render a custom sort caret. You should give a function and should return a JSX. - * This function taking one arguments: order which present the sort order currently. + * This function takes two arguments: order and fieldName. + * `direction`: the current sort order. + * `fieldName`: the dataField name of the field currently being sorted. */ - caretRender?: Function; - /** - * Give an Object like following to able to customize your own editing component. - * This Object should contain these two property: - * getElement(REQUIRED): Accept a callback function and take two arguments: onUpdate and props. - * customEditorParameters: Another extra data for custom cell edit component. - */ - customEditor?: { getElement: (onUpdate: any, props: any) => ReactElement, customEditorParameters?: object }; + caretRender?(direction: SortOrder | null, fieldName: string): string | ReactElement; /** * To customize the column. This callback function should return a String or a React Component. - * In addition, this function taking two argument: cell and row. + * In addition, this function taking four argument: cell, row, formatExtraData, rowIdx. + * The formatExtraData will be the value which you assign it on */ - dataFormat?: (cell: any, row: any, formatExtraData?: any) => string | ReactElement; + dataFormat?(cell: any, row: any, formatExtraData: any, rowIndex: number): string | ReactElement; /** - * To to enable search or filter data on formatting. Default is false + * It's useful with dataFormat, you can give any data you want to be passed to the formatter. + */ + formatExtraData?: any; + /** + * Allow you to add your custom attributes on TD element. + * Example: tdAttr={ { 'data-attr': 'test' } } + */ + tdAttr?: CustomAttrs; + /** + * Allow you to add your custom style object on TD element. Accepts either a CSS Properties object, or + * a function that takes 4 arguments and returns a CSS Properties object. These arguments are: + * `cell`: The current cell value + * `row`: The current row data + * `rowIndex`: Index number for the current row data in the input data array. + * `columnIndex`: Index number for the current column that the cell is in. + */ + tdStyle?: CSSProperties | ((cell: any, row: any, rowIndex: number, columnIndex: number) => CSSProperties); + /** + * Allow you to add your custom style object on TH element. + */ + thStyle?: CSSProperties; + /** + * When true, the column will filter using the value returned by the column's formatter. + * When false (default), the column will filter using the pre-formatted value. */ filterFormatted?: boolean; /** - * True to hide column. + * Return the value you want to be filtered on that column. + * It's useful if your column data is an object. + * @example: (cell, row) => cell.fieldOne; + * @see: https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/manipulation/search-format-table.js + */ + filterValue?(cell: any, row: any): any; + /** + * Customize the cell content when exporting to a CSV file. This function takes two argument: cell, row. + */ + csvFormat?(cell: any, row: any): string; + /** + * Customize the column header text for the column when exporting to a CSV file. + */ + csvHeader?: string; + /** + * It's usually used with csvFormat, and it's same as formatExtraData. + * You can give any additional data you want to be passed to the csvFormat function. + */ + csvFormatExtraData?: any; + /** + * Set to true to hide the column. Default is false. Often used to hide rowKey columns that are required to + * identify a row but that do not need to be visible. */ hidden?: boolean; /** - * True to hide from insert dialog + * Used to specify whether a column will be exported to csv. + * + * If true, the column will be included in the export. This is usually used with hidden columns, as those are not + * exported by default. + * + * If false, the column will be excluded from the csv export. + */ + export?: boolean; + /** + * Usually used with Options.expandBy. + * You can assign which columns will trigger a row expansion or not. + * If false, clicking on a row inside this column will not cause the row to expand. + */ + expandable?: boolean; + /** + * Set this to true to hide this column on insert modal. Default is false. + * + * This is often used together with autoValue for auto-generated columns like row keys. */ hiddenOnInsert?: boolean; /** - * True to hide the dropdown for sizePerPage. + * It only work for enabling insertRow and be assign on rowKey column. If true, the value of rowkey will be + * generated automatically after a row insertion. If a function given, you can customize the value by yourself and + * remember to return the value for the cell from the function. */ - hideSizePerPage?: boolean; + autovalue?: boolean | (() => any); /** * False to disable search functionality on column, default is true. */ searchable?: boolean; /** - * Give a customize function for data sorting. - * This function taking four arguments: a, b, order, sortField, extraData + * Show the title on each column in the data section of the table. + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/column/column-title-table.js */ - sortFunc?: (a: any, b: any, order: SortOrder, sortField: any, extraData: any) => number; + columnTitle?: boolean | string | ((cell: any, row: any, rowIndex: number, colIndex: number) => string); /** - * It's a extra data for custom sort function, if defined, this data will be pass as fifth argument in sortFunc. + * Show the title on each column in the header section of the table, default is true. + */ + headerTitle?: boolean; + /** + * If the children of TableHeaderColumn is a JSX or Object, we prefer to add this prop to describe this column with + * a pure text(String). It will be used on the placeholder or tips in the filter, search field or insert field etc. + */ + headerText?: string; + /** + * Give a custom callback function for data sorting. + * This function takes five arguments: a, b, order, sortField, extraData + * The extraData value is the data from the sortFuncExtraData. + */ + sortFunc?(a: object, b: object, order: SortOrder, sortField: keyof object, extraData: any): number; + /** + * Extra data for the custom sort function. If defined, this data will be passed as fifth argument in sortFunc. */ sortFuncExtraData?: any; /** * Add custom css class on table header column, this attribute only accept String or Function. - * If Function, it taking four arguments: cell, row, rowIndex, columnIndex. + * If Function, it takes four arguments: cell, row, rowIndex, columnIndex. * In addition, this function should return a String which is the class name you want to add on. */ className?: string | ((cell: any, row: any, rowIndex: number, columnIndex: number) => string); @@ -592,156 +1301,1334 @@ export interface TableHeaderColumnProps extends Props { * If Function, it taking four arguments: cell, row, rowIndex, columnIndex. * In addition, this function should return a String which is the class name you want to add on. */ - columnClassName?: String | ((cell: any, row: any, rowIndex: number, columnIndex: number) => string); + columnClassName?: string | ((cell: any, row: any, rowIndex: number, columnIndex: number) => string); /** - * Add True to set column editable, false is non-editable. If give Object, - * you can do more customization when editing cell. This object have following properties: - * @example - * { - * type: //edit type, avaiable value is textarea, select, checkbox - * validator: //give function for validation and taking only one "cell value" as argument. This function should return Bool. - * options:{ - * values: //values means data in select or checkbox.If checkbox, use ':'(colon) to separate value, ex: Y:N - * } - * } + * Add custom css class on editing cell, if assign a callback function, you are supposed to return a String for class name */ - editable?: boolean | Editable; + editColumnClassName?: string | ((cell: any, row: any) => string); /** - * It only work when you enable insertRow and be assign on rowKey column. - * If true, the row key will be generated automatically after a row insertion. + * Add custom css class for invalid editing cell, if assign a callback function, you are supposed to return a String for class name */ - autoValue?: boolean; + invalidEditColumnClassName?: string | ((cell: any, row: any) => string); + /** + * boolean: Add True to set column editable, false is non-editable. + * function: You have ability to control the editable level on cell instead of column level. For this + * callback function, you are supposed to be return a bool value to decide this cell editable or not + * This callback accepts four arguments: cell, row, rowIndex, columnIndex. + * object: @see Editable interface. + */ + editable?: boolean | Editable | ((cell: any, row: any, rowIndex: number, columnIndex: number) => boolean | string | EditValidatorObject); + /** + * Give an Object like following to able to customize your own editing component. + * This Object should contain these two property: + * getElement(REQUIRED): Accept a callback function and take two arguments: onUpdate and props. + * customEditorParameters: Additional data for custom cell edit component. + */ + customEditor?: CustomEditor; /** * To Enable a column filter within header column. - * This feature support a lots of filter type and condition. Please check example - * Following is the format for filter + * This feature support a lots of filter types and conditions. */ filter?: Filter; - - onSort?: Function; - /** - * Header for column in generated CSV file - */ - csvHeader?: string; - csvFormat?: Function; - columnTitle?: boolean; - sort?: SortOrder; - formatExtraData?: any; - - /** - * Row in the header on which this header column present. + * This is always used together with rowSpan and colSpan, to create multi-row/multi-column headers. + * Row is the header row on which this header column present. */ row?: number; - /** * Indicates how many rows this column takes. * Default: 1 */ rowSpan?: number; - /** * Indicates how many columns this column takes. * Default: 1 */ colSpan?: number; - /** - * Return the value you want to be filtered on that column. - * It's useful if your column data is an object. + * Specify the field type to use when exporting this column to CSV. Available types are 'number' and 'string'. + * Defaults to 'string'. */ - filterValue?: Function; - + csvFieldType?: CSVFieldType; /** - * Allow you to add your custom attributes on TD element. + * Set the column class name for the actively filtered column. Can be either a string, or a function that takes two + * parameters: order and dataField. + * `order`: current sort order for the column. + * `dataField`: current column's dataField. + * This allows you to specify a different className depending on whether the current dataField is being sorted 'asc' + * or 'desc'. + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/sort/sort-style-table.js#L36-L37 */ - tdAttr?: object; - + sortHeaderColumnClassName?: string | ((order: SortOrder, dataField: string) => string); /** - * Allow you to add your custom style object on TD element. + * Specify custom tdAttrs to use for a cell that is being edited within this column. */ - tdStyle?: object; - + editTdAttr?: CustomAttrs; /** - * Allow you to add your custom style object on TH element. + * Custom insert editor element. This is a function to generate a custom edit element to display in the InsertModal + * form. The function takes five arguments: column, attr, editorClass, ignoreEditable, defaultValue. + * `column`: column information given to the insert modal. + * `attr`: EditableAttrs from the TableHeader.editable object options. + * `editorClass`: className to apply to the editor component. + * `ignoreEditable`: boolean flag indicating whether editable fields should be ignored in the insert modal + * `defaultValue`: the default value to use for this cell. + * The function should return either a JSX element for the field, or false to default back to the standard edit + * element. */ - thStyle?: object; + customInsertEditor?: { + getElement( + column: InsertModalColumnDescription, + attr: EditableAttrs, + editorClass: string, + ignoreEditable: boolean, + defaultValue: any + ): ReactElement | boolean; + }; + /** + * Support specifying that the column should start sorting with the 'asc' option. + */ + defaultASC?: boolean; } -export interface Editable { - type?: string; // edit type, avaiable value is textarea, select, checkbox - /** - * Function for validation and taking only one "cell value" as argument. This function should return Bool. - */ - validator?: (cell: any) => boolean; - /** - * @example - * { - * values: //values means data in select or checkbox. If checkbox, use ':'(colon) to separate value, ex: Y:N - * } - */ - options?: any; +/** + * Editable Attributes. Poorly documented, but used when creating custom editor components. + */ +export interface EditableAttrs { /** - * Configuration for the textarea editable type + * Placeholder text to use for the cell editor field. + */ + placeholder?: string; + /** + * Function to pass a reference to the input editor field. + */ + ref?(ref: any): any; + /** + * Callback for onKeyDown. + */ + onKeyDown?(): void; + /** + * Callback for on cell blur. + */ + onBlur?(): void; +} + +/** + * Editable Select option values + */ +export type EditSelectOptionValue = + | Array<{ text: string; value: string; }> + | string[] + | number[]; + +/** + * Editable Checkbox option values. This should be a string with the true/false value separated by a colon. + * e.g. "Yes:No" + */ +export type EditCheckboxOptionValue = string; + +/** + * Object to use to customize the properties for an editable column. + */ +export interface Editable { + /** + * Edit field type, avaiable value is 'textarea', 'select', 'checkbox' and 'datetime' + */ + type?: EditCellType; + /** + * Class name to use for the editor component. + */ + className?: string; + /** + * Number of columns to display for a text area component. */ cols?: number; + /** + * Number of rows to display for a text area component. + */ rows?: number; + /** + * Used to specify a field that can be modified in the insert modal when adding a new row, but cannot be edited + * inside the table after the row has been inserted. + */ + readOnly?: boolean; + /** + * CSS Style to use for the editor component. + */ + style?: CSSProperties; + /** + * Validation function for the column. It takes the new "cell value" as argument. This function should return + * a boolean true/false for isValid, or an EditValidatorObject (so that an error message can be provided). + */ + validator?(cell: TRow[K], row: TRow): boolean | string | EditValidatorObject; + /** + * Data in a select or checkbox. If a checkbox, use a string with a ':'(colon) to separate the two values, ex: Y:N + * The callback function can be used to customize the select options based on other field values within the row. + * If the array is an array of objects, the fields 'text' can be used for the display text and 'value' to specify + * the option's value. + */ + options?: { + values: + | EditSelectOptionValue + | EditCheckboxOptionValue + | ((row: TRow) => EditCheckboxOptionValue | EditSelectOptionValue); + }; + /** + * Default value to show in the edit field in the Insert Modal for this column. + */ + defaultValue?: TRow[K]; + /** + * @deprecated Use placeholder inside the attrs field instead. + * Text to display as placeholder text in the editor component. + */ + placeholder?: string; + /** + * Additional attributes for the editor component. + */ + attrs?: EditableAttrs; } + export type SetFilterCallback = (targetValue: any) => boolean; export interface ApplyFilterParameter { callback: SetFilterCallback; } -export type FilterType = 'TextFilter' | 'RegexFilter' | 'SelectFilter' | 'NumberFilter' | 'DateFilter' | 'CustomFilter'; -export interface Filter { +/** + * Text filter type. + */ +export interface TextFilter { /** - * "TextFilter"||"SelectFilter"||"NumberFilter"||"DateFilter"||"RegexFilter"||"YOUR_CUSTOM_FILTER" + * Filter type must be 'TextFilter'. */ - type?: FilterType; + type: 'TextFilter'; /** - * Default value on filter. If type is NumberFilter or DateFilter, this value will like { number||date: xxx, comparator: '>' } - */ - defaultValue?: any; - /** - * Assign a millisecond for delay when trigger filtering, default is 500. + * Delay time in milliseconds after the last key press prior to applying the filter. Defaults to 500ms. */ delay?: number; /** - * Only work on TextFilter. Assign the placeholder text on text and regex filter + * Placeholder text to show in the filter. */ - placeholder?: string | RegExp; + placeholder?: string; /** - * Only work on NumberFilter. Accept an array which conatin the filter condition, like: ['<','>','='] + * Condition. Can be 'eq' (exactly equal) or 'like' (contains the given string). Defaults to 'like'. */ - numberComparators?: string[]; - - /** - * Options for the filter. - */ - options?: any; - - /** - * Comparison condition for the NumberFilter - */ - condition?: string; - - /** - * Get element which represent filter. - */ - getElement?: (filterHandler: (parameters?: ApplyFilterParameter) => void, filterParameters: any) => JSX.Element; - - /** - * Parameters for custom filter - */ - customFilterParameters?: any; + condition?: FilterCondition; + /** + * Default value for the text filter. Defaults to '' + */ + defaultValue?: string; + /** + * CSS Style to use for the select filter. + */ + style?: CSSProperties; } -export interface TableHeaderColumn extends ComponentClass { } -declare const TableHeaderColumn: TableHeaderColumn; - -declare class TableDataSet extends EventEmitter { - constructor(data: any); - setData(data: any): void; - clear(): void; - getData(): any; +export interface SelectFilterOptionsType { + [value: string]: string | number | boolean; + [value: number]: string | number | boolean; } + +/** + * Select filter type + */ +export interface SelectFilter { + /** + * Filter type must be 'SelectFilter' + */ + type: 'SelectFilter'; + /** + * Placeholder text to show in the filter. + */ + selectText?: string; + /** + * Options for the filter select. + */ + options: SelectFilterOptionsType; + /** + * Condition. Can be 'eq' (exactly equal) or 'like' (contains the given string). Defaults to 'like'. + */ + condition?: FilterCondition; + /** + * Default value for the select filter. + */ + defaultValue?: string | number | boolean; + /** + * CSS Style to use for the select filter. + */ + style?: CSSProperties; + /** + * Disable the empty option in the dropdown filter. + */ + withoutEmptyOption?: boolean; +} + +/** + * Regex filter type + */ +export interface RegexFilter { + /** + * Filter type must be 'RegexFilter' + */ + type: 'RegexFilter'; + /** + * Delay time in milliseconds after the last key press prior to applying the filter. Defaults to 500ms. + */ + delay?: number; + /** + * Placeholder text to show in the filter. + */ + placeholder?: string; + /** + * Default value + */ + defaultValue?: string; + /** + * CSS Style to use for the select filter. + */ + style?: CSSProperties; +} + +/** + * Number filter type + */ +export interface NumberFilter { + /** + * Filter type must be 'NumberFilter' + */ + type: 'NumberFilter'; + /** + * Delay time in milliseconds after the last key press prior to applying the filter. Defaults to 500ms. + */ + delay?: number; + /** + * Placeholder text to show in the filter. + */ + placeholder?: string; + /** + * Number filter comparators + */ + numberComparators?: FilterComparator[]; + /** + * Default value for the filter. + */ + defaultValue?: { + /** + * Number value. + */ + number: number; + /** + * Comparator value. + */ + comparator: FilterComparator; + }; + /** + * If this is a select number field, disable the empty option in the dropdown. + */ + withoutEmptyOption?: boolean; + /** + * Specify that the comparator field MUST have a comparator selected. + */ + withoutEmptyComparatorOption?: boolean; + /** + * Specify that the value field MUST have a number value specified. + */ + withoutEmptyNumberOption?: boolean; + /** + * List of number options that can be selected, if the number field is a select dropdown instead of a text edit. + */ + options?: number[]; + /** + * CSS Style to use for the select filter. + */ + style?: { + number: CSSProperties; + comparator: CSSProperties; + }; +} + +/** + * Date filter type + */ +export interface DateFilter { + /** + * Filter type must be 'DateFilter' + */ + type: 'DateFilter'; + /** + * Delay time in milliseconds after the last key press prior to applying the filter. Defaults to 500ms. + */ + delay?: number; + /** + * Date filter comparators + */ + dateComparators?: FilterComparator[]; + /** + * Default value for the filter. + */ + defaultValue?: { + /** + * Date value. String values will be automatically converted to dates. + */ + date: Date | string; + /** + * Comparator value. + */ + comparator: FilterComparator; + }; + /** + * CSS Style to use for the select filter. + */ + style?: { + date: CSSProperties; + comparator: CSSProperties; + }; +} + +/** + * Custom filter type. + */ +export interface CustomFilter { + /** + * Type must be 'CustomFilter' + */ + type: 'CustomFilter'; + /** + * Function to generate the filter component + */ + getElement( + filterHandler: (parameters?: ApplyFilterParameter) => void, + customFilterParameters: object + ): ReactElement; + /** + * Custom filter parameters to be passed to the generator function + */ + customFilterParameters: object; +} + +/** + * Collection of filter types. + */ +export type Filter = TextFilter | SelectFilter | RegexFilter | NumberFilter | DateFilter | CustomFilter; + +/** + * The "value" type for a number filter + */ +export interface NumberFilterValue { + number: number; + comparator: FilterComparator; +} + +/** + * The "value" type for a date filter. + */ +export interface DateFilterValue { + date: Date | string; + comparator: FilterComparator; +} + +/** + * Text Filter's data object. + */ +export interface TextFilterData { + type: 'TextFilter'; + value: string; +} + +/** + * Select Filter's data object. + */ +export interface SelectFilterData { + type: 'SelectFilter'; + value: string; +} + +/** + * Regex Filter's data object. + */ +export interface RegexFilterData { + type: 'RegexFilter'; + value: string; +} + +/** + * Number Filter's data object. + */ +export interface NumberFilterData { + type: 'NumberFilter'; + value: NumberFilterValue; +} + +/** + * Date Filter's data object. + */ +export interface DateFilterData { + type: 'DateFilter'; + value: DateFilterValue; +} + +/** + * Data object returned for an array filter. + */ +export interface ArrayFilterData { + type: 'ArrayFilter'; + value: string[] | number[]; +} + +/** + * Valid types for the "value" field inside a filter's data object. + */ +export type FilterValueData = string | number | string[] | number[] | DateFilterValue | NumberFilterValue; + +/** + * Combined types of filter data objects. + */ +export type FilterValue = + | TextFilterData + | SelectFilterData + | RegexFilterData + | NumberFilterData + | DateFilterData + | ArrayFilterData; + +/** + * Filter object that can be passed to BootstrapTableFilter.handleFilterData function. + */ +export interface FilterData { + [dataField: string]: FilterValue; +} + +/** + * TableHeaderColumn class definition. + */ +export class TableHeaderColumn extends Component { + /** + * Function to reset the filter on this column to the default values. + */ + cleanFiltered(): void; + /** + * Apply a filter value. + */ + applyFilter(value: FilterValueData): void; +} + +/** + * Customize the options for Keyboard Navigation. + */ +export interface KeyboardNavigation { + /** + * Return a style object which will be applied on the navigating cell. + */ + customStyle?: CSSProperties; + /** + * Set to false to disable click to navigate, usually user wants to click to select row instead of navigation. + */ + clickToNav?: boolean; + /** + * Return a style object which will be applied on the both of navigating and editing cell. + */ + customStyleOnEditCell?: CSSProperties; + /** + * When set to true, pressing ENTER will begin to edit the cell if cellEdit is also enabled. + */ + enterToEdit?: boolean; + /** + * When set to true, pressing ENTER will expand or collapse the current row. + */ + enterToExpand?: boolean; +} + +/** + * Input properties for the expandColumnComponent function when customising the expand indicator. + */ +export interface ExpandColumnComponentProps { + /** + * True if the current row is able to be expanded. + */ + isExpandableRow: boolean; + /** + * True if the current row is currently expanded. + */ + isExpanded: boolean; +} + +/** + * Customize the options for expand row feature. + */ +export interface ExpandColumnOptions { + /** + * Will enable an indicator column at first column if true. Default is false. + */ + expandColumnVisible?: boolean; + /** + * a callback function to customize the appearance of the indicator column. + */ + expandColumnComponent?(props: ExpandColumnComponentProps): string | ReactElement; + /** + * set the width of indicator column. + */ + columnWidth?: number | string; + /** + * If both an indicator column and a selection column are displaying, this specifies whether the indicator column + * should be shown first. Default is true, false will move the expand indicator column after selection column. + */ + expandColumnBeforeSelectColumn?: boolean; +} + +/** + * Properties provided in the callback to create a custom component for the selection column radio/checkboxes + */ +export interface CustomSelectProps { + /** + * What type of selection should be used? Values are 'radio' (single) or 'checkbox' (multiple). + */ + type: SelectRowMode; + /** + * True if the current row being drawn is selected. + */ + checked: boolean; + /** + * True if the current row being drawn is not permitted to be selected. + */ + disabled: boolean; + /** + * Callback that should be used when someone selects the current row. + * `event`: the current event target + * `rowIndex`: the index of the current row being toggled. + */ + onChange(event: any, rowIndex: string | number): void; + /** + * Index for the row currently being rendered. + * If the rowIndex is 'Header', it means this rendering is for header selection column. + */ + rowIndex: number | string; + /** + * The indeterminate flag is used to indicate that there are some rows selected, but it is neither all rows nor + * no rows. As far as the select all checkbox is concerned, it is neither true nor false. + */ + indeterminate: boolean; +} + +/** + * Details of the column settings, provided to the Options.onSearchChange callback function. + * The values for these settings come from the properties for a column. + * + * Note: the list of options is poorly documented. This list comes from double-checking the + * react-bootstrap-table source code to check what properties actually get passed to the + * onSearchChange callback function. + */ +export interface ColumnDescription { + /** + * Name of the column. + * Comes from TableHeader.dataField property. + */ + name: keyof TRow; + /** + * Column text alignment setting + * Comes from TableHeader.dataAlign property. + */ + align: DataAlignType; + /** + * Column sorting setting. If true, the column can be used to sort the data. + * Comes from TableHeader.dataSort property. + */ + sort: boolean; + /** + * Column data format function. + * Comes from TableHeader.dataFormat property. + */ + format(cell: any, row: TRow, formatExtraData: any, rowIndex: number): string | ReactElement; + /** + * The formatExtraData setting for the column. + * Comes from TableHeader.formatExtraData property. + */ + formatExtraData: any; + /** + * Whether data should be filtered based on the formatted value, or the raw data value. + * Comes from TableHeader.filterFormatted property. + */ + filterFormatted: boolean; + /** + * Filter function for the column. + * Comes from TableHeader.filterValue property. + */ + filterValue(cell: any, row: TRow): any; + /** + * Setting for whether the data in this column can be edited. + * Comes from TableHeader.editable property. + */ + editable: boolean | Editable | ((cell: any, row: TRow, rowIndex: number, columnIndex: number) => boolean | string | EditValidatorObject); + /** + * Custom editor settings to use when editing the data in this column. + * Comes from TableHeader.customEditor property. + */ + customEditor: CustomEditor; + /** + * Flag to indicate whether this column should be visible or not. + * Comes from TableHeader.hidden property. + */ + hidden: boolean; + /** + * Flag to indicate whether this column should be hidden on the insert modal. + * Comes from TableHeader.hiddenOnInsert property. + */ + hiddenOnInsert: boolean; + /** + * Flag to indicate whether the data in this column should be included in a search. + * Comes from TableHeader.searchable property. + */ + searchable: boolean; + /** + * Custom className setting for this column. + * Comes from TableHeader.columnClassName property. + */ + className: string | ((cell: any, row: TRow, rowIndex: number, columnIndex: number) => string); + /** + * Custom className setting for this column when a cell in the column is being edited. + * Comes from TableHeader.editColumnClassName property. + */ + editClassName: string | ((cell: any, row: TRow) => string); + /** + * Custom className setting for this column when a cell in the column contains invalid data. + * Comes from TableHeader.invalidEditColumnClassName property. + */ + invalidEditColumnClassName: string | ((cell: any, row: TRow) => string); + /** + * Custom title to display for this column. + * Comes from TableHeader.columnTitle property. + */ + columnTitle: boolean; + /** + * Width setting for this column. + * Comes from TableHeader.width property. + */ + width: string; + /** + * Custom header value/component/children to use for this column. + * Comes from TableHeader.headerText || TableHeader.children properties. + */ + text: string | number | boolean | ReactElement; + /** + * Custom sort function to use for this column. + * Comes from TableHeader.sortFunc property. + */ + sortFunc(a: TRow, b: TRow, order: SortOrder, sortField: keyof TRow, extraData: any): number; + /** + * Extra data to be provided to the search function for this column. + * Comes from TableHeader.sortFuncExtraData property. + */ + sortFuncExtraData: any; + /** + * Flag to indicate whether this column should be included in a CSV export. + * Comes from TableHeader.export property. + */ + export: boolean; + /** + * Flag to indicate whether this column is expandable. + * Comes from TableHeader.expandable property. + */ + expandable: boolean; + /** + * Custom attributes (e.g. {'data-attr': 'test'}) to be applied to cells in this column. + * Comes from TableHeader.tdAttr property. + */ + attrs: CustomAttrs; + /** + * Custom attributes (e.g. {'data-attr': 'test'}) to use for cells that are being edited in this column. + * Comes from TableHeader.editTdAttr property. + */ + editAttrs: CustomAttrs; + /** + * CSS style properties to use for cells in this column. + * Comes from TableHeader.tdStyle property. + */ + style: CSSProperties; +} + +/** + * Props provided to the Options.toolBar callback function for creating a custom toolbar. + */ +export interface ToolBarProps { + /** + * Rendered components to use in the toolbar. + */ + components: ButtonGroupProps & { + /** + * Search panel component. + */ + searchPanel: ReactElement; + /** + * Button group components. + */ + btnGroup: ReactElement; // button groups JSX + /** + * The individual search field. + */ + searchField: ReactElement; // search field JSX + /** + * The button to clear the search field. + */ + clearBtn: ReactElement; // clear search field JSX + }; + /** + * Event callbacks to use with a custom toolbar. + */ + event: { + /** + * Callback to activate the insert row modal window. + */ + openInsertModal(): void; + /** + * Callback to close the insert row modal window. + */ + closeInsertModal(): void; + /** + * Callback to delete selected row(s) from the table. + */ + dropRow(): void; + /** + * Callback to toggle between showing all rows and showing only selected rows. + */ + showOnlyToogle(): void; + /** + * Callback to export the table to a CSV file. + */ + exportCSV(): void; + /** + * Callback to apply a search. + */ + search(): void; + }; +} + +/** + * Left-hand side Button elements (used when customizing the toolbar). + */ +export interface ButtonGroupProps { + /** + * Export to CSV button. + */ + exportCSVBtn: ReactElement; + /** + * Insert button (to add a row). + */ + insertBtn: ReactElement; + /** + * Delete button. + */ + deleteBtn: ReactElement; + /** + * Toggle button to switch between showing all rows and showing selected rows only. + */ + showSelectedOnlyBtn: ReactElement; +} + +/** + * Properties that are given to the Options.searchPanel callback function. + */ +export interface SearchPanelProps { + /** + * Default search field component. + */ + searchField: ReactElement; + /** + * Default clear search field button component. + */ + clearBtn: ReactElement; + /** + * The default search text. + */ + defaultValue: string; + /** + * The placeholder text for the search field. + */ + placeholder: string; + /** + * A callback to trigger the clear search field event. + */ + clearBtnClick(): void; + /** + * A callback to trigger a search, takes the search text as an input. + */ + search(searchText: string): void; +} + +/** + * Properties passed as props to the Options.paginationPanel function when generating a custom pagination panel. + */ +export interface PaginationPanelProps { + /** + * Current page number + */ + currPage: number; + /** + * Current number of rows to show per page + */ + sizePerPage: number; + /** + * Choices for size per page dropdown component + */ + sizePerPageList: SizePerPageList; + /** + * Index number for the first page of data. + * Comes from Options.pageStartIndex. + */ + pageStartIndex: number; + /** + * Callback function to use to change page. + */ + changePage(pageNum: number): void; + /** + * Callback function to trigger the toggle on sizePerPage dropdown button + */ + toggleDropDown(): void; + /** + * Callback function to use to set a new size per page. + */ + changeSizePerPage(sizePerPage: number): void; + /** + * The basic components for the pagination panel, provided here so that you have the option to use some of them + * if you don't want to customize all of them. + */ + components: { + /** + * Text/element to display when displaying the total number of rows. + */ + totalText: string | ReactElement; + /** + * Default sizePerPageDropdown component. + */ + sizePerPageDropDown: SizePerPageDropDown; + /** + * The default list of page change buttons. + */ + pageList: HTMLUListElement; + }; +} + +/** + * Properties given to the Options.sizePerPageDropDown function used to generate a custom sizePerPage component to + * render in the pagination panel. + */ +export interface SizePerPageFunctionProps { + /** + * Flag to indicate that the sizePerPage dropdown should currently be 'open'. + */ + open: boolean; + /** + * Flag indicating that the sizePerPage dropdown should be hidden. + */ + hideSizePerPage: boolean; + /** + * Current size per page as a string value. + */ + currSizePerPage: string; + /** + * Array of the size per page options to display in the dropdown. + */ + sizePerPageList: SizePerPageList; + /** + * On-click toggle function callback to open/close the size per page dropdown list. + */ + toggleDropDown(): void; + /** + * Callback function to use to change the current size per page. + */ + changeSizePerPage(newSizePerPage: number): void; +} + +/** + * Custom Editor Props passed to the getElement function in the TableHeader.customEditor object. + */ +export interface CustomEditorProps extends EditableAttrs { + /** + * The row data for the cell being edited. + */ + row: TRow; + /** + * Default value for the editor cell. + */ + defaultValue: TRow[K]; + /** + * Contents of the customEditorParameters object. + */ + [parameterName: string]: any; +} + +/** + * Object to provide a custom editor component to use for a table column. + * @see: https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/cell-edit/custom-cell-edit-table.js + */ +export interface CustomEditor { + /** + * Required. Function to use to create the custom cell editor. Takes two parameters: + * `onUpdate`: callback function to call to update the value inside the cell. + * `props`: + */ + getElement(onUpdate: (updatedCell: TRow[K]) => void, props: CustomEditorProps): ReactElement; + /** + * Additional parameters to pass to the getElement function inside the props argument. + */ + customEditorParameters?: object; +} + +/** + * Validation object that can be returned from cell editing validation. + */ +export interface EditValidatorObject { + /** + * Boolean flag indicating whether the cell value is valid. + */ + isValid: boolean; + /** + * Notification object providing details on the validation result. + */ + notification: { + /** + * One of 'success' or 'error' + */ + type: EditValidatorType; + /** + * A text message explaining the validation result. + */ + msg: string; + /** + * A text title explaining the validation result. + */ + title: string; + }; +} + +/** + * Properties that can be passed to the InsertButton, DeleteButton, ExportCSVButton and ClearSearchButton + * components. + */ +export interface ButtonProps { + /** + * Label for the button + */ + btnText?: string; + /** + * Bootstrap css style class for the button, e.g. 'btn-warning' + */ + btnContextual?: string; + /** + * Custom class for the button + */ + className?: string; + /** + * Glyphicon glyph string for the button, e.g. 'glyphicon-edit' + */ + btnGlyphicon?: string; + /** + * Function to be called to activate the normal onClick functionality for this button. + */ + onClick?(e: React.MouseEvent): void; +} + +/** + * Properties that can be passed to the ShowSelectedOnlyButton component. + */ +export interface ShowSelectedButtonProps { + /** + * Label for when clicking the button will toggle the table back into "show all rows" mode. + */ + showAllText?: string; + /** + * Label for when clicking the button will toggle the table into "show only selected rows" mode. + */ + showOnlySelectText?: string; + /** + * Bootstrap css style class for the button, e.g. 'btn-warning' + */ + btnContextual?: string; + /** + * Custom class for the button + */ + className?: string; + /** + * Glyphicon glyph string for the button, e.g. 'glyphicon-edit' + */ + btnGlyphicon?: string; + /** + * Function to be called to activate the normal onClick functionality for this button. + */ + onClick?(e: React.MouseEvent): void; +} + +/** + * Properties that can be passed to the SearchField component. + */ +export interface SearchFieldProps { + /** + * Custom css class name + */ + className?: string; + /** + * Default value for the search field + */ + defaultValue?: string; + /** + * Placeholder text for the search field + */ + placeholder?: string; + /** + * callback funciton to call when a key is released + */ + onKeyUp?(e: React.KeyboardEvent): void; +} + +/** + * Interface that must be implemented for a custom search field component. + */ +export interface SearchFieldInterface { + /** + * getValue should return the current search text. + */ + getValue(): string; + /** + * setValue should update the current search text to the given value. + */ + setValue(search: string): void; +} + +/** + * Modal Column data passed to Options.insertModal and Options.insertModalBody. + */ +export interface InsertModalColumnDescription { + /** + * Flag to indicate that this is the key field for the column. It is only present if there is more than + * one column in the table. + * Comes from TableHeader.isKey field. + */ + isKey?: boolean; + /** + * Header text/element for the column. + * Comes from TableHeader.headerText or TableHeader.children. + */ + name: string | ReactElement; + /** + * Field name for the column data. + * Comes from TableHeader.dataField. + */ + field: keyof TRow; // children.props.dataField, + /** + * Flag to indicate whether this column is editable. + * Comes from TableHeader.editable. + */ + editable: boolean | Editable | ((cell: TRow[keyof TRow], row: TRow, rowIndex: number, columnIndex: number) => boolean | string | EditValidatorObject); + /** + * Custom element to use for the Insert field element. + * Comes from TableHeader.customInsertEditor. + */ + customInsertEditor( + column: InsertModalColumnDescription, + attr: EditableAttrs, + editorClass: string, + ignoreEditable: boolean, + defaultValue: TRow[keyof TRow] + ): ReactElement | boolean; + /** + * Flag to indicate whether this column should be hidden on the Insert Modal page. + * Comes from TableHeader.hiddenOnInsert. + */ + hiddenOnInsert: boolean; // children.props.hiddenOnInsert, + /** + * Flag to indicate whether the table should check that a key does not already exist. + * Comes from TableHeader.keyValidator. + */ + keyValidator: boolean; // children.props.keyValidator + /** + * Flag to indicate that the field should be auto-generated rather than edited. It is only present if there is more + * than one column in the table. + * Comes from TableHeader.autoValue. + */ + autoValue?: boolean; + /** + * Format function for the field. It is only present if there is more than one column in the table. Value is either + * 'false', meaning that there is no format function present, or a wrapper function that returns the formatted string + * content for the field using the TableHeader.dataFormat function to generate that string. + * + * Based on from TableHeader.dataFormat, but is applied as a wrapper function around that function. + */ + format?: boolean | ((cell: TRow[keyof TRow]) => string); +} + +/** + * Properties that can be passed to the InsertModalHeader component. + */ +export interface InsertModalHeaderProps { + /** + * Header class name. + */ + className?: string; + /** + * Title to display in the header. + */ + title?: string; + /** + * Callback function to call prior to closing the Insert Modal window. + */ + beforeClose?(e: SyntheticEvent): void; + /** + * Callback function to call to close the Insert Modal window. + */ + onModalClose?(closeModal: () => void): void; + /** + * Set to true to hide the close button. Default is false. + */ + hideClose?: boolean; + /** + * Bootstrap version. + */ + version?: BootstrapVersion; +} + +/** + * Properties that can be passed to the InsertModalFooter component. + */ +export interface InsertModalFooterProps { + /** + * Header class name. + */ + className?: string; + /** + * Text to display on the Save button + */ + saveBtnText?: string; + /** + * Text to display on the Close button + */ + closeBtnText?: string; + /** + * Bootstrap css class name for the close button, example: 'btn-warning' + */ + closeBtnContextual?: string; + /** + * Bootstrap css class name for the save button, example: 'btn-success' + */ + saveBtnContextual?: string; + /** + * Custom class name for the close button. + */ + closeBtnClass?: string; + /** + * Custom class name for the save button. + */ + saveBtnClass?: string; + /** + * Callback function to call prior to closing the Insert Modal window. + */ + beforeClose?(e: SyntheticEvent): void; + /** + * Callback function to call to close the Insert Modal window. + */ + onModalClose?(closeModal: () => void): void; + /** + * Callback function to be called prior to saving the new row. + */ + beforeSave?(e: SyntheticEvent): void; + /** + * Callback function to be called to save the new row. + */ + onSave?(save: () => void): void; +} + +/** + * Interface that must be implemented by a custom insert modal body component. + */ +export interface ModalBodyInterface { + /** + * The required getFieldValue method that must be implemented on a customized insert modal body that returns the + * new row data when the save button is clicked in the modal window. + */ + getFieldValue(): TRow; +} + +/** + * Properties that can be given to the SizePerPageDropDown component. + */ +export interface SizePerPageDropDownProps { + /** + * Custom class name to use for the component. + */ + className?: string; + /** + * Bootstrap css style class for the button, e.g. 'btn-warning' + */ + btnContextual?: string; + /** + * Whether the button menu should 'dropup' or 'dropdown'. + */ + variation?: DropDirection; + /** + * Callback function that should be triggered when the user clicks on the dropdown button. + */ + onClick?(toggleDropDown: () => void): void; + /** + * Current size per page + */ + currSizePerPage?: string; + /** + * Size Per Page options list + */ + options?: number[] | Array<{ text: string, value: number }>; + /** + * Flag to indicate that the dropdown is open + */ + open?: boolean; + /** + * Flag to indicate that the dropdown is currently hidden + */ + hidden?: boolean; +} + +/** + * Default InsertButton component. Can be used to create custom toolbars, etc. + */ +export class InsertButton extends Component {} + +/** + * Default DeleteButton component. Can be used to create custom toolbars, etc. + */ +export class DeleteButton extends Component {} + +/** + * Default ExportCSVButton component. Can be used to create custom toolbars, etc. + */ +export class ExportCSVButton extends Component {} + +/** + * Default ShowSelectedOnlyButton component for toggling between showing all rows or only + * selected rows. Can be used to create custom toolbars, etc. + */ +export class ShowSelectedOnlyButton extends Component {} + +/** + * Default SearchField component. Can be used to create custom toolbars, etc. + */ +export class SearchField extends Component implements SearchFieldInterface { + getValue(): string; + setValue(search: string): void; +} + +/** + * Default ClearSearchButton component. Can be used to create custom toolbars, etc. + */ +export class ClearSearchButton extends Component {} + +/** + * Default header component used for the Insert modal. Can be used to customize the + * insert row modal form. + */ +export class InsertModalHeader extends Component {} + +/** + * Default footer component used for the Insert modal. Can be used to customize the + * insert row modal form. + */ +export class InsertModalFooter extends Component {} + +/** + * Default size per page component used in the pagination row. Can be used to customize + * the size per page dropdown. + */ +export class SizePerPageDropDown extends Component {} diff --git a/types/react-bootstrap-table/react-bootstrap-table-tests.tsx b/types/react-bootstrap-table/react-bootstrap-table-tests.tsx index c8f25dfa56..edf2111b78 100644 --- a/types/react-bootstrap-table/react-bootstrap-table-tests.tsx +++ b/types/react-bootstrap-table/react-bootstrap-table-tests.tsx @@ -1,8 +1,49 @@ import * as React from 'react'; import { render } from 'react-dom'; -import { BootstrapTable, TableHeaderColumn, ApplyFilterParameter, Filter } from 'react-bootstrap-table'; +import { + ApplyFilterParameter, + BootstrapTable, + ButtonGroupProps, + CellEdit, + ColumnDescription, + CustomSelectProps, + DeleteButton, + EditableAttrs, + EditValidatorObject, + ExpandColumnComponentProps, + ExpandColumnOptions, + ExportCSVButton, + Filter, + FilterData, + FooterData, + InsertButton, + InsertModalColumnDescription, + InsertModalFooter, + InsertModalHeader, + ModalBodyInterface, + Options, + PaginationPanelProps, + SearchField, + SearchFieldInterface, + SearchFieldProps, + SearchPanelProps, + SelectRow, + ShowSelectedOnlyButton, + SizePerPageDropDown, + SortOrder, + TableHeaderColumn, + ToolBarProps +} from 'react-bootstrap-table'; -const products = [{ +interface Product { + id: number; + name: string; + price?: number; + quality?: number; + inStockStatus?: number; + sales?: number; +} +const products: Product[] = [{ id: 1, name: "Item name 1", price: 100 @@ -12,8 +53,40 @@ const products = [{ price: 100 }]; +type JobType = 'A' | 'B' | 'C' | 'D'; +interface Job { + id: number; + status: string; + name: string; + type: JobType; + active: 'Y' | 'N'; +} +const jobs = [ + { id: 1, status: '200', name: 'Item name 1', type: 'B', active: 'N' }, + { id: 2, status: '200', name: 'Item name 2', type: 'B', active: 'Y' } +]; +const jobTypes = ['A', 'B', 'C', 'D']; + +interface ExtendedJob { + id: number; + name: string; + type1: JobType; + type2: JobType; + active: 'Y' | 'N'; + datetime: Date; +} +const extendedJobs = [ + { id: 1, name: 'Item name 1', type1: 'A', type2: 'B', active: 'N', datetime: '2001-12-28T14:57:00' }, + { id: 2, name: 'Item name 2', type1: 'A', type2: 'B', active: 'Y', datetime: '2002-12-28T14:57:00' } +]; + +const inStockStatus = { + 1: 'yes', + 2: 'no' +}; + // It's a data format example. -function priceFormatter(cell: any, row: any) { +function priceFormatter(cell: number, row: Product) { return ' ' + cell; } @@ -32,7 +105,8 @@ const qualityType = { 2: 'unknown' }; -function enumFormatter(cell: any, row: any, enumObject: any) { +function enumFormatter(cell: any, row: any, enumObject: any, rowIndex: number) { + console.log(`The row index: ${rowIndex}`); return enumObject[cell]; } @@ -91,7 +165,7 @@ class RemoteProps extends React.Component { return remoteObj; }} options={{ - onCellEdit: (row: any, fieldName: string, value: any) => { console.info(row); } + onCellEdit: (row: any, fieldName: string, value: any) => { console.info(row); return value; } }} > Product ID @@ -145,27 +219,20 @@ const thStyleExample = Product Price ; -// Adopted from https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/column-header-span/column-header-span-complex.js -export default class ColumnHeaderSpanComplex extends React.Component { +/** + * Adopted from https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/column-header-span/column-header-span-complex.js + */ +class ColumnHeaderSpanComplex extends React.Component { render() { - const selectRow = { - mode: 'checkbox', - bgColor: 'rgb(238, 193, 213)' - }; - - const cellEdit = { - mode: 'click', - blurToSave: true - }; + const options: Options = { exportCSVSeparator: '##' }; return ( - + ID Product name price Coupon - In stock + In stock Customer name order @@ -173,3 +240,1297 @@ export default class ColumnHeaderSpanComplex extends React.Component { ); } } + +/** + * Pagination options + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/pagination/custom-pagination-table.js + */ +class PaginationTable extends React.Component { + sizePerPageListChange = (sizePerPage: number) => { + alert(`sizePerPage: ${sizePerPage}`); + } + + onPageChange = (page: number, sizePerPage: number) => { + alert(`page: ${page}, sizePerPage: ${sizePerPage}`); + } + + renderShowsTotal = (start: number, to: number, total: number) => { + return ( +

+ From {start} to {to}, totals is {total}  (its a customize text) +

+ ); + } + + render() { + const options: Options = { + onPageChange: this.onPageChange, + onSizePerPageList: this.sizePerPageListChange, + page: 2, // which page you want to show as default + sizePerPageList: [{ + text: '5', value: 5 + }, { + text: '10', value: 10 + }, { + text: 'All', value: products.length + }], // you can change the dropdown list for size per page + sizePerPage: 5, // which size per page you want to locate as default + pageStartIndex: 0, // where to start counting the pages + paginationSize: 3, // the pagination bar size. + prePage: 'Prev', // Previous page button text + nextPage: 'Next', // Next page button text + firstPage: 'First', // First page button text + lastPage: 'Last', // Last page button text + prePageTitle: 'Go to previous', // Previous page button title + nextPageTitle: 'Go to next', // Next page button title + firstPageTitle: 'Go to first', // First page button title + lastPageTitle: 'Go to Last', // Last page button title + paginationShowsTotal: this.renderShowsTotal, // Accept bool or function + paginationPosition: 'top', // default is bottom, top and both is all available + keepSizePerPageState: true, // default is false, enable will keep sizePerPage dropdown state(open/clode) when external rerender happened + hideSizePerPage: true, // You can hide the dropdown for sizePerPage + alwaysShowAllBtns: true, // Always show next and previous button + withFirstAndLast: false, // Hide the going to First and Last page button + hidePageListOnlyOnePage: true // Hide the page list if only one page. + }; + + return ( + + Product ID + Product Name + Product Price + + ); + } +} + +/** + * Adopted from https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/cell-edit/blur-to-escape-table.js + */ +class BlurToEscapeTable extends React.Component { + render() { + const cellEditProp: CellEdit = { + mode: 'click', + blurToEscape: true + }; + + return ( + + Product ID + Product Name + Product Price + + ); + } +} + +/** + * Cell classnames, row saving hooks. + * @see https://githum.com/AllenFang/react-bootstrap-table/blob/master/examples/js/cell-edit/cell-edit-classname.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/cell-edit/cell-edit-hook-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/manipulation/insert-row-table.js + */ +class EditCellClassNameTable extends React.Component { + jobNameValidator = (value: string) => { + const response: EditValidatorObject = { isValid: true, notification: { type: 'success', msg: '', title: '' } }; + if (!value) { + response.isValid = false; + response.notification.type = 'error'; + response.notification.msg = 'Value must be inserted'; + response.notification.title = 'Requested Value'; + } else if (value.length < 10) { + response.isValid = false; + response.notification.type = 'error'; + response.notification.msg = 'Value must have 10+ characters'; + response.notification.title = 'Invalid Value'; + } + return response; + } + + jobStatusValidator = (value: string) => { + const nan = isNaN(parseInt(value, 10)); + if (nan) { + return 'Job Status must be a integer!'; + } + return true; + } + + invalidJobStatus = (cell: string, row: Job) => { + console.log(`${cell} at row id: ${row.id} fails on editing`); + return 'invalid-jobstatus-class'; + } + + editingJobStatus = (cell: string, row: Job) => { + console.log(`${cell} at row id: ${row.id} in current editing`); + return 'editing-jobstatus-class'; + } + + onBeforeSaveCellAsync = (row: Job, cellName: K, cellValue: Job[K], done: (ok: boolean) => void): boolean | 1 => { + setTimeout(() => { + done(false); // it's not ok to save :( + }, 3000); + return 1; // return 1 === async operation. + } + + onAfterSaveCell(row: Job, cellName: string, cellValue: any) { + alert(`Save cell ${cellName} with value ${cellValue}`); + let rowStr = ''; + for (const prop in row) { + rowStr += `${prop}: ${row[prop as keyof Job]}\n`; + } + alert('The whole row :\n' + rowStr); + } + + onAfterInsertRow = (row: any) => { + let newRowStr = ''; + + for (const prop in row) { + newRowStr += `${prop}: ${row[prop]} \n`; + } + alert('The new row is:\n ' + newRowStr); + } + + render() { + const cellEditProp: CellEdit = { + mode: 'dbclick', + blurToSave: true, + beforeSaveCell: this.onBeforeSaveCellAsync, + afterSaveCell: this.onAfterSaveCell + }; + const options: Options = { + afterInsertRow: this.onAfterInsertRow // A hook for after insert rows + }; + + return ( + + Job ID + Job Status + Job Name + Job Type + Active + + ); + } +} + +/** + * Multiple field sorting, filtering, searching and clearing + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/manipulation/filter-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/manipulation/multi-search-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/manipulation/search-clear-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/manipulation/strict-multi-search-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/remote/remote-store-search.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/sort/custom-caret-sort-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/sort/custom-sort-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/sort/sort-style-table.js + */ +class MultiSortAndFiltering extends React.Component { + tableRef: BootstrapTable | null; + idRef: TableHeaderColumn | null; + state = { data: products }; + + onSortChange = (name: string, order: SortOrder) => { + console.log(`Next sort = ${name}:${order}`); + } + + cleanSort = () => { this.tableRef.cleanSort(); }; + + cleanSelected = () => { this.tableRef.cleanSelected(); }; + + onFilterChange = (filter: FilterData) => { + Object.keys(filter).forEach((column) => { + console.log(`Filtering ${column}: ${JSON.stringify(filter[column])}`); + }); + } + + cleanFilters = () => { this.idRef.cleanFiltered(); }; + + afterColumnFilter = (filterConds: ReadonlyArray, result: ReadonlyArray) => { + console.log('Filter Conditions: '); + filterConds.forEach((filterCond: FilterData) => { + Object.keys(filterCond).forEach((fieldName: string) => + console.log(`Filter column = ${fieldName}, Filter value = ${filterCond[fieldName]}`)); + }); + console.log('Result is:'); + for (const resultItem of result) { + console.log(`Product: ${resultItem.id}, ${resultItem.name}, ${resultItem.price}`); + } + } + + onSearchChange = (searchText: string, colInfos: ReadonlyArray>, multiColumnSearch: boolean) => { + this.setState({ data: products.filter((product) => product.name = searchText) }); + } + + afterSearch = (searchText: string, result: ReadonlyArray) => { + console.log(`Your search text is ${searchText}`); + console.log('Result is:'); + for (const resultItem of result) { + console.log(`Product: ${resultItem.id}, ${resultItem.name}, ${resultItem.price}`); + } + } + + getNameCaret = (direction: SortOrder | null, fieldName: string) => + (direction === 'asc') + ? ( up) + : (direction === 'desc') + ? ( down) + : ( up/down) + + revertSortFunc = (a: Product, b: Product, order: SortOrder) => + (order === 'desc') ? a.price - b.price : b.price - a.price + + customSortStyle = (order: SortOrder, dataField: string) => + (order === 'desc') ? 'sort-desc' : 'sort-asc' + + render() { + const options: Options = { + onSortChange: this.onSortChange, + onFilterChange: this.onFilterChange, + noDataText: 'This is custom text for empty data', + withoutNoDataText: false, + afterColumnFilter: this.afterColumnFilter, + onSearchChange: this.onSearchChange, + afterSearch: this.afterSearch, + clearSearch: true, + sortIndicator: true + }; + return ( +
+ + + Product ID + Product Name + =', '<=', '='] }}>Product Price + +
+ ); + } +} + +/** + * Sort with extra data. + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/sort/custom-sort-with-extra-data-table.js + */ +class CustomSortWithExtraDataTable extends React.Component { + sortByName = (a: any, b: any, order: SortOrder, field: string, enumObject: any) => { + if (order === 'desc') { + if (enumObject[a[field]] > enumObject[b[field]]) { + return -1; + } else if (enumObject[a[field]] < enumObject[b[field]]) { + return 1; + } + return 0; + } + if (enumObject[a[field]] < enumObject[b[field]]) { + return -1; + } else if (enumObject[a[field]] > enumObject[b[field]]) { + return 1; + } + return 0; + } + + render() { + return ( + + Product ID + Product Name + + Product Quality + + ); + } +} + +/** + * Render custom pagination with provided SizePerPageDropDown component. + */ +class CustomPagination extends React.Component { + renderPagination = (props: PaginationPanelProps) => ( +
+ +
+ + + +
+
+ ) + + render() { + const options: Options = { + paginationPanel: this.renderPagination + }; + + return ( + + + + + + ); + } +} + +/** + * Customize the entire insert modal. + * Adapted from https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/custom/insert-modal/custom-insert-modal.js + */ +class CustomModal extends React.Component { + handleSaveBtnClick = (columns: ReadonlyArray>, onSave: (row: any) => void) => { + const newRow: {[field: string]: string} = {}; + columns.forEach((column, i) => { + newRow[column.field] = (this.refs[column.field] as HTMLInputElement).value; + }, this); + onSave(newRow); + } + + createCustomModal = ( + onModalClose: () => void, + onSave: (row: any) => void, + columns: ReadonlyArray>, + validateState: { [dataField: string]: string }, + ignoreEditable: boolean + ) => ( +
+

Custom Insert Modal

+
+ { + columns.map((column, i) => { + const { + editable, + format, + field, + name, + hiddenOnInsert + } = column; + + if (hiddenOnInsert) { + return null; + } + const error = validateState[field] ? + ({validateState[field]}) : + null; + return ( +
+ + + {error} +
+ ); + }) + } +
+
+ + +
+
+ ) + + render() { + const options: Options = { + insertModal: this.createCustomModal + }; + return ( + + Product ID + Product Name + Product Price + + ); + } +} + +/** + * Custom Insert Modal Fields, both as a custom component and as custom fields. + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/custom/insert-modal/custom-insert-modal-field.js + */ +class SalesRadioField extends React.Component<{editorClass: string, ignoreEditable: boolean}> { + yes: HTMLInputElement | null; + no: HTMLInputElement | null; + + getFieldValue = () => { + return this.yes.checked ? 'Yes' : 'No'; + } + + render() { + return ( +
+ + +
+ ); + } +} +class CustomInsertModalFieldTable extends React.Component { + customKeyField = ( + column: InsertModalColumnDescription, + attr: EditableAttrs, + editorClass: string, + ignoreEditable: boolean + ) => { + const seqId = products.length; + return ( + + ); + } + + customNameField = ( + column: InsertModalColumnDescription, + attr: EditableAttrs, + editorClass: string, + ignoreEditable: boolean, + defaultValue: any) => { + const fruits = ['banana', 'apple', 'orange', 'tomato', 'strawberries']; + return ( + + ); + } + + customSaleField = ( + column: InsertModalColumnDescription, + attr: EditableAttrs, + editorClass: string, + ignoreEditable: boolean, + defaultValue: any) => { + return ( + + ); + } + + render() { + return ( + + Product ID + Product Name + On Sales? + Product Price + + ); + } +} + +/** + * Custom modal header, body & footer. + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/custom/insert-modal/default-custom-insert-modal-header.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/custom/insert-modal/custom-insert-modal-body.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/custom/insert-modal/default-custom-insert-modal-footer.js + */ +interface MyCustomBodyProps { + columns: ReadonlyArray>; + validateState: { [dataField: string]: string }; + ignoreEditable: boolean; +} +class MyCustomBody extends React.Component implements ModalBodyInterface { + getFieldValue() { + const newRow: Partial = {}; + this.props.columns.forEach((column, i) => { + newRow[column.field] = (this.refs[column.field] as HTMLInputElement).value; + }, this); + return newRow as Product; + } + + render() { + const { columns, validateState } = this.props; + return ( +
+

Custom body

+
+ { + this.props.columns.map((column, i) => { + const { + editable, + format, + field, + name, + hiddenOnInsert + } = column; + + if (hiddenOnInsert) { + return null; + } + const error = validateState[field] ? + ({validateState[field]}) : + null; + return ( +
+ + + {error} +
+ ); + }) + } +
+
+ ); + } +} +class DefaultCustomInsertModalHeaderFooterTable extends React.Component { + createCustomModalFooter = (closeModal: () => void, save: () => void) => { + return ( + {}} + beforeSave={(e) => {}} + onModalClose={closeModal} + onSave={save} /> + ); + } + + createCustomModalHeader = (closeModal: () => void, save: () => void) => { + return ( + { }} + onModalClose={closeModal} + hideClose={true} /> + ); + } + + createCustomModalBody = ( + columns: ReadonlyArray>, + validateState: { [dataField: string]: string }, + ignoreEditable: boolean + ) => ( + + ) + + render() { + const options: Options = { + insertModalFooter: this.createCustomModalFooter, + insertModalHeader: this.createCustomModalHeader, + insertModalBody: this.createCustomModalBody + }; + return ( + + Product ID + Product Name + Product Price + + ); + } +} + +/** + * Custom Toolbar, including Search Panel & Buttons, and custom delete confirmation. + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/custom/toolbar/custom-button-group.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/custom/toolbar/custom-toolbar-1.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/custom/search/default-custom-search-field.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/custom/search/custom-search-panel-1.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/custom/search/fully-custom-search-field.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/custom/insert-button/default-custom-insert-button.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/custom/delete-button/default-custom-delete-button.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/custom/csv-button/default-custom-csv-button.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/manipulation/del-row-custom-confirm.js + */ +class MySearchField extends React.Component implements SearchFieldInterface { + field: SearchField | null; + + getValue() { + return this.field.getValue(); + } + + setValue(search: string) { + this.field.setValue(search); + } + + render() { + const { ...rest} = this.props; + return ( + { this.field = node; }} + /> + ); + } +} +class CustomButtonGroup extends React.Component { + createInsertButton = (onClick: (e: React.MouseEvent<{}>) => void) => ( + + ) + + createDeleteButton = (onClick: (e: React.MouseEvent<{}>) => void) => ( + + ) + + createExportCSVButton = (onClick: (e: React.MouseEvent<{}>) => void) => ( + + ) + + createShowSelectedOnlyButton = (onClick: (e: React.MouseEvent<{}>) => void, showSelected: boolean) => ( + + ) + + createCustomButtonGroup = (props: ButtonGroupProps) => ( +
+ {props.showSelectedOnlyBtn} + {props.exportCSVBtn} + {props.insertBtn} + {props.deleteBtn} + +
+ ) + + createCustomSearchField = (props: SearchFieldProps) => ( + + ) + + createCustomClearSearch = (onClick: (e: React.MouseEvent<{}>) => void) => ( + + ) + + createCustomSearchPanel = (props: SearchPanelProps) => ( +
+
+ + {props.clearBtn} + +
+ {props.searchField} +
+ ) + + createCustomToolBar = (props: ToolBarProps) => { + return ( +
+ {props.components.btnGroup} +
+ {props.components.searchPanel} +
+
+ ); + } + + customConfirm = (next: () => void, dropRowKeys: ReadonlyArray) => { + const dropRowKeysStr = dropRowKeys.join(','); + if (confirm(`(It's a custom confirm)Are you sure you want to delete ${dropRowKeysStr}?`)) { + next(); + } + } + + render() { + const selectRow: SelectRow = { + mode: 'checkbox', + showOnlySelected: true + }; + const options: Options = { + insertBtn: this.createInsertButton, + deleteBtn: this.createDeleteButton, + exportCSVBtn: this.createExportCSVButton, + showSelectedOnlyBtn: this.createShowSelectedOnlyButton, + btnGroup: this.createCustomButtonGroup, + clearSearch: true, + clearSearchBtn: this.createCustomClearSearch, + searchField: this.createCustomSearchField, + searchPanel: this.createCustomSearchPanel, + toolBar: this.createCustomToolBar, + searchDelayTime: 3000, + handleConfirmDeleteRow: this.customConfirm + }; + return ( + + Product ID + Product Name + Product Price + + ); + } +} + +/** + * Expanding Rows & Selection + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/expandRow/expand-row-by-column.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/expandRow/expand-row-with-selection.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/expandRow/custom-expand-indicator.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/expandRow/custom-expand-class.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/expandRow/auto-collapse.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/expandRow/manage-expanding.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/selection/all-select.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/selection/custom-multi-select-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/selection/default-select-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/selection/select-bgcolor-dynamic-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/selection/select-filter-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/selection/select-hook-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/selection/select-row-class-table.js + */ +class ExpandRowExample extends React.Component<{}, {expanding: number[]}> { + isExpandableRow = (row: any) => row.id === 2; + + expandComponent = (row: any) => ( +
You expanded the row.
+ ) + + expandColumnComponent = ({ isExpandableRow, isExpanded }: ExpandColumnComponentProps) => { + const content = isExpandableRow + ? (isExpanded ? '(-)' : '(+)') + : ' '; + return ( +
{content}
+ ); + } + + handleExpand = (rowKey: number, isExpand: boolean) => { + if (isExpand) { + this.setState({ expanding: [...this.state.expanding] }); + } else { + this.setState({ expanding: [...this.state.expanding.filter(id => id !== rowKey)] }); + } + } + + onSelectAll = (isSelected: boolean) => (isSelected) ? products.map(row => row.id) : []; + + onSelect = (row: Product, isSelected: boolean, e: React.MouseEvent, rowIndex: number) => { + const rowStr = `id: "${row.id}", name: ${row.name}, price: ${row.price}`; + console.log(e); + alert(`Selected: ${isSelected}, rowIndex: ${rowIndex}, row: ${rowStr}`); + } + + customMultiSelect = (props: CustomSelectProps) => ( +
+ props.onChange(e, props.rowIndex)} + ref={input => { + if (input) { + input.indeterminate = props.indeterminate; + } + }} /> + +
+ ) + + selectedRowClass = (row: Product, isSelect: boolean) => + (isSelect) + ? ((row.id >= 3) ? 'bigger-than-three-select-row' : 'less-than-three-select-row') + : '' + + render() { + const options: Options = { + expandRowBgColor: 'rgb(242, 255, 163)', + expandBy: 'column', + onlyOneExpanding: true, + expanding: this.state.expanding, + onExpand: this.handleExpand, + expandParentClass: 'custom-expand-parent', + expandBodyClass: (row, rowIndex, isExpanding) => { + return (!isExpanding) + ? 'current-is-hidden' + : (rowIndex > 1) + ? 'custom-expand-body-1' + : 'custom-expand-body-0'; + } + }; + const selectRow: SelectRow = { + mode: 'checkbox', + bgColor: (row: Product, isSelect: boolean) => + (isSelect) + ? ((row.id < 2) ? 'blue' : ((row.id < 4) ? 'red' : 'yellow')) + : null, + clickToSelect: true, // click to select, default is false + clickToExpand: true, // click to expand row, default is false + onSelect: this.onSelect, + onSelectAll: this.onSelectAll, + customComponent: this.customMultiSelect, + hideSelectColumn: false, + selected: [0, 2], + showOnlySelected: true, + onlyUnselectVisible: true, + className: this.selectedRowClass, + columnWidth: '60px', + unselectable: [1, 3] + }; + const expandColumnOptions: ExpandColumnOptions = { + expandColumnVisible: true, + expandColumnBeforeSelectColumn: false, + expandColumnComponent: this.expandColumnComponent, + columnWidth: 50 + }; + return ( + + Product ID + Product Name + Product Price + + ); + } +} + +/** + * Table mouse enter/leave events + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/others/mouse-event-table.js + */ +class MouseEventTable extends React.Component { + render() { + const options: Options = { + onMouseLeave: () => { console.log('mouse left table'); }, + onMouseEnter: () => { console.log('mouse entered table'); }, + onRowMouseOut: (row: any, e: React.MouseEvent<{}>) => { + console.log(e); + console.log('mouse left row ' + row.id); + }, + onRowMouseOver: (row: any, e: React.MouseEvent<{}>) => { + console.log(e); + console.log('mouse entered row ' + row.id); + } + }; + + return ( + + Product ID + Product Name + Product Price + + ); + } +} + +/** + * Hidden on insert modal with async row error callback & read-only field + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/advance/hide-on-insert-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/advance/insert-error-handle-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/advance/validator-table-read-only.js + */ +class HideOnInsertTable extends React.Component { + handleAddRowWithASyncError = (row: any, colInfo: ReadonlyArray>, errorCallback: (msg: string) => void) => { + setTimeout(() => { + errorCallback('Sorry, There\'s some error happend'); + }, 5000); + return false; + } + render() { + const options: Options = { + onAddRow: this.handleAddRowWithASyncError + }; + return ( + + Job ID + Job Name + Job Type + Active + + ); + } +} + +/** + * Edit field types + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/advance/edit-type-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/advance/insert-default-value-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/advance/insert-error-handle-table.js + */ +class EditTypeTable extends React.Component { + formatType = (cell: string) => `TYPE_${cell}`; + + jobTypes = (row: ExtendedJob) => (row.id > 2) ? ['A', 'B'] : ['B', 'C', 'D', 'E']; + + handleAddRowWithSyncError = () => { + return 'Sorry, There\'s some error happend'; + } + + render() { + const attrs = { + rows: 10, + onKeyDown: () => { console.log('keydown event trigger'); } + }; + const cellEditProp: CellEdit = { + mode: 'click', + blurToSave: true + }; + const options: Options = { + onAddRow: this.handleAddRowWithSyncError + }; + return ( + + Job ID + Job Name + Job Type1 + Job Type2 + Active + Date Time + + ); + } +} + +/** + * React component format for column. + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/column-format/react-column-format-table.js + */ +class ActiveFormatter extends React.Component<{ active: boolean }> { + render() { + return ( + + ); + } +} + +export default class ReactColumnFormatTable extends React.Component { + activeFormatter = (cell: boolean, row: ExtendedJob) => (); + render() { + return ( + + + Job Name + Active + + ); + } +} + +/** + * Format Extra Data + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/column-format/extra-data-column-format-table.js + */ +class ExtraDataColumnFormatTable extends React.Component { + enumFormatter = (cell: number, row: Product, enumObject: {[id: number]: string}) => enumObject[cell]; + render() { + return ( + + Product ID + Product Name + Product Quality + Product Stock Status + + ); + } +} + +/** + * Column titles + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/column/column-title-table.js + */ +class ColumnAlignTable extends React.Component { + customTitle = (cell: number, row: any, rowIndex: number, colIndex: number) => `${row.name} for ${cell}`; + + render() { + const options: Options = { + exportCSVText: 'my_export', + insertText: 'my_insert', + deleteText: 'my_delete', + saveText: 'my_save', + closeText: 'my_close' + }; + return ( + + Product ID + Product Name + Product Price + + ); + } +} + +/** + * Table Footer + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/footer/footer-table.js + */ +class FooterTable extends React.Component { + render() { + const footerData: FooterData[][] = [ + [ + { label: 'Total', columnIndex: 0 }, + { + label: 'Total value', + columnIndex: 2, + align: 'right', + formatter: (tableData: Array<{price: number}>) => { + let label = 0; + for (let i = 0, tableDataLen = tableData.length; i < tableDataLen; i++) { + label += tableData[i].price; + } + return ( + {label} + ); + } + } + ] + ]; + + return ( +
+ + Product ID + Product Name + Product Price + +
+ ); + } +} + +/** + * Keyboard navigation + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/keyboard-nav/custom-style-nav-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/keyboard-nav/custom-style-nav-with-cell-edit-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/keyboard-nav/disable-click-to-nav-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/keyboard-nav/enter-to-edit-with-nav-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/keyboard-nav/nav-with-expand-table.js + */ +class CustomStyleNavTable extends React.Component { + customStyle = (cell: any, row: any) => { + return { + backgroundColor: 'red' + }; + } + + render() { + const cellEdit: CellEdit = { + mode: 'click', + blurToSave: true + }; + const keyBoardNav = { + customStyleOnEditCell: this.customStyle, + customStyle: this.customStyle, + clickToNav: false, + enterToEdit: true, + enterToExpand: false + }; + return ( + + Product ID + Product Name + Product Price + + ); + } +} + +/** + * Table body styles + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/style/inline-style-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/style/table-class-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/style/td-class-string-table.js + */ +class TrClassStringTable extends React.Component { + render() { + return ( + + Product ID + Product Name + Product Price + + ); + } +} + +/** + * Table styles set by functions. + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/style/td-class-function-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/style/tr-class-function-table.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/style/tr-style-table.js + */ +class TrClassFunctionTable extends React.Component { + headerColumnClassNameFormat = () => 'th-string-example'; + + columnClassNameFormat = (fieldValue: string | number, row: Product, rowIdx: number, colIdx: number) => + rowIdx % 2 === 0 ? 'td-column-function-even-example' : 'td-column-function-odd-example' + + trClassFormat = (rowData: ReadonlyArray, rIndex: number) => + rIndex % 3 === 0 ? 'tr-function-example' : '' + + trStyle = (row: Product, rowIndex: number) => ({ backgroundColor: '#FFFAFA' }); + + render() { + return ( + + Product ID + Product Name + Product Price + + ); + } +} + +/** + * Filter types. + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/column-filter/all-filters.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/column-filter/date-filter-programmatically.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/column-filter/number-filter-programmatically.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/column-filter/regex-filter-programmatically.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/column-filter/select-filter-programmatically.js + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/column-filter/text-filter-programmatically.js + */ +class AllFilters extends React.Component { + name1: TableHeaderColumn | null; + name2: TableHeaderColumn | null; + quality: TableHeaderColumn | null; + price: TableHeaderColumn | null; + satisfaction: TableHeaderColumn | null; + inStockDate: TableHeaderColumn | null; + + handlerClickCleanFiltered = () => { + this.name1.cleanFiltered(); + this.name2.cleanFiltered(); + this.quality.cleanFiltered(); + this.price.cleanFiltered(); + this.satisfaction.cleanFiltered(); + this.inStockDate.cleanFiltered(); + } + + applyFiltersProgramatically = () => { + this.name1.applyFilter('Item 1'); + this.name2.applyFilter('[name]'); + this.quality.applyFilter(1); + this.price.applyFilter({ + number: 10.5, + comparator: '<=' + }); + this.satisfaction.applyFilter({ + number: 2, + comparator: '>' + }); + this.inStockDate.applyFilter({ + date: new Date(2015, 0, 1), + comparator: '=' + }); + } + + dateFormatter = (cell: Date, row: any) => { + if (typeof cell !== 'object') { + cell = new Date(cell); + } + + return `${('0' + cell.getDate()).slice(-2)}/${('0' + (cell.getMonth() + 1)).slice(-2)}/${cell.getFullYear()}`; + } + + render() { + const satisfaction = [0, 1, 2, 3, 4, 5]; + return ( + + + Product ID +
clear filters + + { this.name1 = node; }} dataField='name' filter={{ type: 'TextFilter', placeholder: 'Please enter a value' }}>Product Name + { this.name2 = node; }} dataField='name' filter={{ type: 'RegexFilter', placeholder: 'Please enter a regex' }}>Product Name + < TableHeaderColumn ref={(node) => { this.quality = node; }} dataField='quality' filter={{ type: 'SelectFilter', options: qualityType }} + dataFormat={enumFormatter} formatExtraData={qualityType}>Product Quality + { this.price = node; }} dataField='price' filter={{ type: 'NumberFilter', delay: 1000 }}>Product Price + < TableHeaderColumn ref= {(node) => { this.satisfaction = node; }} dataField='satisfaction' filter={{ type: 'NumberFilter', options: satisfaction }}>Buyer Satisfaction + < TableHeaderColumn ref= {(node) => { this.inStockDate = node; }} dataField='inStockDate' filter={{ type: 'DateFilter' }} dataFormat={this.dateFormatter}>In Stock From + + ); + } +} + +/** + * Set Array filter programatically + * @see https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/column-filter/array-filter-programmatically.js + */ +class ProgrammaticallyArrayFilter extends React.Component { + table: BootstrapTable | null; + + /* Filtering passing an array of values */ + handleBtnClick = () => { + this.table.handleFilterData({ + name: { type: 'ArrayFilter', value: ['Item name 3', 'Item name 4'] }, + price: { type: 'ArrayFilter', value: [2100, 2104] } + }); + } + + render() { + return ( +
+ + { this.table = node; }} data={products}> + Product ID + Product Name + Product Price + +
+ ); + } +} diff --git a/types/react-bootstrap-table/tslint.json b/types/react-bootstrap-table/tslint.json index bf0a68ff4e..6fafe521cb 100644 --- a/types/react-bootstrap-table/tslint.json +++ b/types/react-bootstrap-table/tslint.json @@ -1,10 +1,3 @@ { - "extends": "dtslint/dt.json", - "rules": { - // TODO - "ban-types": false, - "prefer-method-signature": false, - "strict-export-declare-modifiers": false, - "no-empty-interface": false - } + "extends": "dtslint/dt.json" } diff --git a/types/react-bootstrap-table/v2/index.d.ts b/types/react-bootstrap-table/v2/index.d.ts new file mode 100644 index 0000000000..11c0f7f943 --- /dev/null +++ b/types/react-bootstrap-table/v2/index.d.ts @@ -0,0 +1,758 @@ +// Type definitions for react-bootstrap-table 2.6 +// Project: https://github.com/AllenFang/react-bootstrap-table +// Definitions by: Frank Laub , Aleksander Lode , Josué Us +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.3 + +/// + +// documentation taken from http://allenfang.github.io/react-bootstrap-table/docs.html + +import { ComponentClass, Props, ReactElement } from 'react'; +import { EventEmitter } from 'events'; + +/** + * Interface spec for sepcifying functionality to handle remotely + * + * Consult [documentation](https://allenfang.github.io/react-bootstrap-table/docs.html#remote) + * for more info + */ +export interface RemoteObjSpec { + /** + * If set, cell edits will be handled remotely + */ + cellEdit?: boolean; + /** + * If set insertions will be handled remotely + */ + insertRow?: boolean; + /** + * If set deletion will be handled remotely + */ + dropRow?: boolean; + /** + * If set filters will be handled remotely + */ + filter?: boolean; + /** + * If set search will be handled remotely + */ + search?: boolean; + /** + * If set, exporting CSV will be handled remotely + */ + exportCSV?: boolean; + /** + * If set sorting will be handled remotely + */ + sort?: boolean; + /** + * If set pagination will be handled remotely + */ + pagination?: boolean; +} + +export interface BootstrapTableProps extends Props { + /** + * Set version='4' to use bootstrap@4, else bootstrap@3 is used. + */ + version?: string; + /** + * Use data to specify the data that you want to display on table. + */ + data: any[]; + /** + * If set, data is remote (use also fetchInfo) + */ + remote?: ((remobeObj: RemoteObjSpec) => RemoteObjSpec) | boolean; // Updated to support ^3.0.0 + /** + * Use keyField to tell table which column is unique. This is same as isKey in + * Tips: You need choose one configuration to set key field: keyField or isKey in + */ + keyField?: string; + /** + * Use height to set the height of table, default is 100%. + */ + height?: string; + /** + * Set the max column width (pixels) + */ + maxHeight?: string; + /** + * Enable striped by setting striped to true. Same as Bootstrap table class .table-striped, default is false. + */ + striped?: boolean; + /** + * Enable hover by setting hover to true. Same as Bootstrap table class .table-hover, default is false. + */ + hover?: boolean; + /** + * Enable condensed by setting condensed to true. Same as Bootstrap table class .table-condensed, default is false. + */ + condensed?: boolean; + /** + * Become a borderless table by setting bordered to false, default is true. + */ + bordered?: boolean; + /** + * Enable pagination by setting pagination to true, default is false. + */ + pagination?: boolean; + /** + * Assign the class name of row(tr). This attribute accept a string or function and function is a better way to do more customization. + * If a string given, means the value will be presented as the row class. + * If a function given, will pass rowData and rowIndex as params and should return string for presenting class. for examples: + * @example + * function trClassFormat(rowData,rowIndex){ + * return rowIndex%2==0?"tr-odd":"tr-even"; //return a class name. + * } + */ + trClassName?: string | ((rowData: any, rowIndex: number) => string); + /** + * Enable row insertion by setting insertRow to true, default is false. + * If you enable row insertion, there's a button on the upper left side of table. + */ + insertRow?: boolean; + /** + * Enable row deletion by setting deleteRow to true, default is false. + * If you enable row deletion, there's a button on the upper left side of table. + */ + deleteRow?: boolean; + /** + * Enable column filter by setting columnFilter to true, default is false. + * If enabled, there're input text field per column under the table, user can input your filter condition by each column. + */ + columnFilter?: boolean; + /** + * Enable search by setting search to true, default is false. + * If enabled, there is a on the upper left side of the table. The default place holder is Search + */ + search?: boolean; + /** + * Set searchPlaceholder to change the placeholder in search field, default is Search. + */ + searchPlaceholder?: string; + /** + * Enable strict search, default is false. + * More info here: https://github.com/AllenFang/react-bootstrap-table/issues/1199 + */ + strictSearch?: boolean; + /** + * Enable multi search by multiColumnSearch, default is false. + * If you want to use multi search, you must enable search at first. + * Tips: Use space to delimited search text. EX: 3 4, which means match all 3 or 4 datas in table. + */ + multiColumnSearch?: boolean; + /** + * Enable export csv function, default is false. + * If you enable, there's a button on the upper left side of table. + */ + exportCSV?: boolean; + /** + * Set CSV filename (e.g. items.csv). Default is spreadsheet.csv + */ + csvFileName?: () => string | string; + /** + * Enable row selection on table. selectRow accept an object which have the following properties + */ + selectRow?: SelectRow; + /** + * Enable cell editing on table. cellEdit accept an object which have the following properties + */ + cellEdit?: CellEdit; + /** + * For some options setting on this component, you can set the options attribute and give an object which contain following properties + */ + options?: Options; + fetchInfo?: FetchInfo; + printable?: boolean; + tableStyle?: any; + containerStyle?: any; + headerStyle?: any; + bodyStyle?: any; + ignoreSinglePage?: boolean; + containerClass?: string; + tableContainerClass?: string; + headerContainerClass?: string; + bodyContainerClass?: string; + expandableRow?: (row: any) => boolean; + expandComponent?: (row: any) => any; +} + +export type SelectRowMode = 'none' | 'radio' | 'checkbox'; + +export interface SelectRow { + /** + * For specifing the selection is single(radio) or multiple(checkbox). + */ + mode: SelectRowMode; + /** + * Click the row will trigger selection on that row if enable clickToSelect, default is false. + */ + clickToSelect?: boolean; + /** + * If true, click the row will trigger selection on that row and also trigger cell editing if you enabled cell edit. Default is false. + */ + clickToSelectAndEditCell?: boolean; + /** + * You can assign the background color of row which be selected. + */ + bgColor?: string; + /** + * You can assign the class name of row which be selected. + */ + className?: string; + /** + * Give an array data to perform which rows you want to be selected when table loading. + * The content of array should be the rowkey which you want to be selected. + */ + selected?: string[] | number[]; + /** + * if true, the radio/checkbox column will be hide. + * You can enable this attribute if you enable clickToSelect and you don't want to show the selection column. + */ + hideSelectColumn?: boolean; + /** + * Default is false, if enabled, there will be a button on top of table for toggling selected rows only. + */ + showOnlySelected?: boolean; + /** + * Accept a custom callback function, if a row be selected or unselected, this function will be called. + * This callback function taking three arguments row, isSelected and event: + * `row`: is the row data which you wanted to select or unselect. + * `isSelected`: it's a boolean value means "whether or not that row will be selected?". + * `event`: The event target object. + * If return value of this (function) is false, the select or deselect action will not be applied. + */ + onSelect?: (row: any, isSelected: boolean, event: any) => boolean; + /** + * Accept a custom callback function, if click select all checkbox, this function will be called. + * This callback function taking two arguments isSelected and currentSelectedAndDisplayData: + * `isSelected`: it's a boolean value means "whether or not that row will be selected?". + * `currentSelectedAndDisplayData`: If pagination enabled, this result is the data which in a page. In contrast, this is all data in table. + * If return value of this function is false, the select all or deselect all action will not be applied. + */ + onSelectAll?: (isSelected: boolean, currentSelectedAndDisplayData: any) => boolean; + + /** + * Provide a list of unselectable row keys. + */ + unselectable?: number[]; +} + +export type CellEditClickMode = 'none' | 'click' | 'dbclick'; + +export interface CellEdit { + /** + * To spectify which condition will trigger cell editing.(click or dbclick) + */ + mode: CellEditClickMode; + /** + * Enable blurToSave will trigger a saving event on cell when mouse blur on the input field. Default is false. + * In the default condition, you need to press ENTER to save the cell. + */ + blurToSave?: boolean; + /** + * Accept a custom callback function, before cell saving, this function will be called. + * This callback function taking three arguments:row, cellName and cellValue + * It's necessary to return a bool value which whether apply this cell editing. + */ + beforeSaveCell?: (row: any, cellName: string, cellValue: any) => boolean; + /** + * Accept a custom callback function, after cell saving, this function will be called. + * This callback function taking three arguments:row, cellName and cellValue + */ + afterSaveCell?: (row: any, cellName: string, cellValue: any) => void; +} + +export type SortOrder = 'asc' | 'desc'; + +export interface Options { + /** + * Manage sort field by yourself + */ + sortName?: string; + /** + * Manage sort order by yourself + */ + sortOrder?: SortOrder; + /** + * Assign a default sort field. + */ + defaultSortName?: string; + /** + * Assign a default sort ordering. + */ + defaultSortOrder?: SortOrder; + /** + * False to disable sort indicator on header column, default is true. + */ + sortIndicator?: boolean; + /** + * Change the displaying text on table if data is empty. + */ + noDataText?: string | ReactElement; + /** + * A delay for trigger search after a keyup (millisecond) + */ + searchDelayTime?: number; + /** + * A custom text on export csv button + */ + exportCSVText?: string; + /** + * Default is false, if true means you want to ignore any editable configuration when row insert. + */ + ignoreEditable?: boolean; + /** + * Only work on enable search. If true, there will be a button beside search input field for clear search field text. + */ + clearSearch?: boolean; + /** + * Assign a callback function which will be called after table update. + */ + afterTableComplete?: Function; + /** + * Assign a callback function which will be called after row delete. + * This function taking one argument: rowKeys, which means the row key you dropped. + */ + afterDeleteRow?: (rowKeys: string[]) => void; + /** + * Assign a callback function which will be called after row insert. + * This function taking one argument: row, which means the whole row data you added. + */ + afterInsertRow?: (row: any) => void; + /** + * Customize the text of previouse page button + */ + prePage?: string; + /** + * Customize the text of next page button + */ + nextPage?: string; + /** + * Customize the text of first page button + */ + firstPage?: string; + /** + * Customize the text of last page button + */ + lastPage?: string; + /** + * Accept a number, which means the page you want to show as default. + */ + page?: number; + /** + * You can change the dropdown list for size per page if you enable pagination. + */ + sizePerPageList?: number[]; + /** + * Means the size per page you want to locate as default. + */ + sizePerPage?: number; + /** + * To define the pagination bar length, default is 5. + */ + paginationSize?: number; + /** + * To define where to start counting the pages. + */ + pageStartIndex?: number; + /** + * Assign a callback function which will be called after page changed. + * This function taking two argument: page and sizePerPage. + * `page`: Current page. + * `sizePerPage`: The data size which in one page. + */ + onPageChange?: (page: number, sizePerPage: number) => void; + /** + * Assign a callback function which will be called after size per page dropdown changed. + * This function taking one argument: sizePerPage. + * `sizePerPage`: The data size which in one page. + */ + onSizePerPageList?: (sizePerPage: number) => void; + /** + * Assign a callback function which will be called after trigger sorting. + * This function taking two argument: `sortName` and `sortOrde`r. + * `sortName`: The sort column name + * `sortOrder`: The sort ordering. + */ + onSortChange?: (sortName: string, sortOrder: SortOrder) => void; + /** + * Assign a callback function which will be called after trigger searching. + * This function taking two argument: search and result. + * `search`: The search text which user input. + * `result`: The results after searching. + */ + afterSearch?: (search: string, result: any) => void; + /** + * Assign a callback function which will be called after trigger column filtering. + * This function taking two argument: filterConds and result. + * `filterConds`: It's an array object which contain all column filter conditions. + * `result`: The results after filtering. + */ + afterColumnFilter?: (filterConds: any[], result: any) => void; + /** + * Assign a callback function which will be called after a row click. + * This function taking one argument: row which is the row data which you click on. + */ + onRowClick?: (row: any) => void; + /** + * Assign a callback function which will be called after a row double click. + * This function taking one argument: row which is the row data which you double click on. + */ + onRowDoubleClick?: (row: any) => void; + /** + * Background color on expanded rows. + */ + expandRowBgColor?: string; + /** + * Assign a callback function which will be called when mouse enter into the table. + */ + onMouseEnter?: Function; + /** + * Assign a callback function which will be called when mouse leave from the table. + */ + onMouseLeave?: Function; + /** + * Assign a callback function which will be called when mouse over a row in table. + * This function taking one argument: row which is the row data which mouse over. + */ + onRowMouseOver?: Function; + /** + * Assign a callback function which will be called when mouse leave from a row in table. + * This function taking one argument: row which is the row data which mouse out. + */ + onRowMouseOut?: Function; + + /** + * Assign a callback function which will be called when row dropping. + * It give you a chance to customize your confirmation for row deletion. + * This function taking two argument: next and rowKeys: + * `next`: If you confirm to drop row, call next() to continue the process + * `rowKeys` is the row keys which been deleted, you can call next function to apply this deletion. + */ + handleConfirmDeleteRow?: (next: Function, rowKeys: any[]) => void; + paginationShowsTotal?: boolean | ((start: number, to: number, total: number) => string | ReactElement); + onSearchChange?: Function; + onAddRow?: Function; + onExportToCSV?: Function; + + insertText?: string; + deleteText?: string; + saveText?: string; + closeText?: string; + // Customization properties + /** + * Callback function to be called when a cell is modified + * + * https://allenfang.github.io/react-bootstrap-table/example.html#remote + */ + onCellEdit?: (row: any, field: string, value: any) => any; + /** + * Callback function to be called when filter changing + * + * https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/remote/remote-store-filtering.js#L67 + */ + onFilterChange?: (filterObj: any) => any; + /** + * Callback function which will be called when a row will be deleted + * + * https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/remote/remote-store-delete-row.js#L27 + */ + onDeleteRow?: (rows: any) => any; + /** + * A callback which will be called after page changed + * + * https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/remote/remote-store-paging.js#L30 + */ + onpageChange?: (page: any, sizePerPage: number) => any; +} + +interface FetchInfo { + dataTotalSize?: number; +} + +export interface BootstrapTable extends ComponentClass { + /** + * Call this function to insert an new row to table. + */ + handleAddRow(row: any): void; + /** + * Call this function to insert an new row as first row on table. + */ + handleAddRowAtBegin(row: any): void; + /** + * Call this function to drop rows in table. + */ + handleDropRow(rowKeys: any[]): void; + /** + * Call this function to do column filtering on table. + */ + handleFilterData(filter: any): void; + /** + * Call this function with search text for fully searching. + */ + handleSearch(search: string): void; + /** + * Call this function to sort table. + */ + handleSort(order: SortOrder, field: string): void; + /** + * Call this function to get the page by a rowkey + */ + getPageByRowKey(rowKey: string): any; + /** + * Call this function to export table as csv. + */ + handleExportCSV(): void; + /** + * Clean all the selection state on table. + */ + cleanSelected(): void; +} +interface BootstrapTable extends ComponentClass { } +declare const BootstrapTable: BootstrapTable; +export type DataAlignType = 'left' | 'center' | 'right' | 'start' | 'end'; + +export interface TableHeaderColumnProps extends Props { + /** + * The field of data you want to show on column. + */ + dataField?: string; + /** + * Use isKey to tell table which column is unique. This is same as keyField in + * Tips: You need choose one configuration to set key field: isKey or keyField in + */ + isKey?: boolean; + /** + * Set the column width. ex: 150, it's means 150px + */ + width?: string; + /** + * Set align in column, value is left, center, right, start and end. + */ + dataAlign?: DataAlignType; + + /** + * Alignment of text in the column header. + */ + headerAlign?: DataAlignType; + /** + * True to enable table sorting. Default is disabled. + */ + dataSort?: boolean; + /** + * Default search string. + */ + defaultSearch?: string; + /** + * Allow user to render a custom sort caret. You should give a function and should return a JSX. + * This function taking one arguments: order which present the sort order currently. + */ + caretRender?: Function; + /** + * Give an Object like following to able to customize your own editing component. + * This Object should contain these two property: + * getElement(REQUIRED): Accept a callback function and take two arguments: onUpdate and props. + * customEditorParameters: Another extra data for custom cell edit component. + */ + customEditor?: { getElement: (onUpdate: any, props: any) => ReactElement, customEditorParameters?: object }; + /** + * To customize the column. This callback function should return a String or a React Component. + * In addition, this function taking two argument: cell and row. + */ + dataFormat?: (cell: any, row: any, formatExtraData?: any) => string | ReactElement; + /** + * To to enable search or filter data on formatting. Default is false + */ + filterFormatted?: boolean; + /** + * True to hide column. + */ + hidden?: boolean; + /** + * True to hide from insert dialog + */ + hiddenOnInsert?: boolean; + /** + * True to hide the dropdown for sizePerPage. + */ + hideSizePerPage?: boolean; + /** + * False to disable search functionality on column, default is true. + */ + searchable?: boolean; + /** + * Give a customize function for data sorting. + * This function taking four arguments: a, b, order, sortField, extraData + */ + sortFunc?: (a: any, b: any, order: SortOrder, sortField: any, extraData: any) => number; + /** + * It's a extra data for custom sort function, if defined, this data will be pass as fifth argument in sortFunc. + */ + sortFuncExtraData?: any; + /** + * Add custom css class on table header column, this attribute only accept String or Function. + * If Function, it taking four arguments: cell, row, rowIndex, columnIndex. + * In addition, this function should return a String which is the class name you want to add on. + */ + className?: string | ((cell: any, row: any, rowIndex: number, columnIndex: number) => string); + /** + * Add custom css class on table body column, this attribute only accept String or Function. + * If Function, it taking four arguments: cell, row, rowIndex, columnIndex. + * In addition, this function should return a String which is the class name you want to add on. + */ + columnClassName?: String | ((cell: any, row: any, rowIndex: number, columnIndex: number) => string); + /** + * Add True to set column editable, false is non-editable. If give Object, + * you can do more customization when editing cell. This object have following properties: + * @example + * { + * type: //edit type, avaiable value is textarea, select, checkbox + * validator: //give function for validation and taking only one "cell value" as argument. This function should return Bool. + * options:{ + * values: //values means data in select or checkbox.If checkbox, use ':'(colon) to separate value, ex: Y:N + * } + * } + */ + editable?: boolean | Editable; + /** + * It only work when you enable insertRow and be assign on rowKey column. + * If true, the row key will be generated automatically after a row insertion. + */ + autoValue?: boolean; + /** + * To Enable a column filter within header column. + * This feature support a lots of filter type and condition. Please check example + * Following is the format for filter + */ + filter?: Filter; + + onSort?: Function; + + /** + * Header for column in generated CSV file + */ + csvHeader?: string; + csvFormat?: Function; + columnTitle?: boolean; + sort?: SortOrder; + formatExtraData?: any; + + /** + * Row in the header on which this header column present. + */ + row?: number; + + /** + * Indicates how many rows this column takes. + * Default: 1 + */ + rowSpan?: number; + + /** + * Indicates how many columns this column takes. + * Default: 1 + */ + colSpan?: number; + + /** + * Return the value you want to be filtered on that column. + * It's useful if your column data is an object. + */ + filterValue?: Function; + + /** + * Allow you to add your custom attributes on TD element. + */ + tdAttr?: object; + + /** + * Allow you to add your custom style object on TD element. + */ + tdStyle?: object; + + /** + * Allow you to add your custom style object on TH element. + */ + thStyle?: object; +} +export interface Editable { + type?: string; // edit type, avaiable value is textarea, select, checkbox + /** + * Function for validation and taking only one "cell value" as argument. This function should return Bool. + */ + validator?: (cell: any) => boolean; + /** + * @example + * { + * values: //values means data in select or checkbox. If checkbox, use ':'(colon) to separate value, ex: Y:N + * } + */ + options?: any; + + /** + * Configuration for the textarea editable type + */ + cols?: number; + rows?: number; +} +export type SetFilterCallback = (targetValue: any) => boolean; +export interface ApplyFilterParameter { + callback: SetFilterCallback; +} + +export type FilterType = 'TextFilter' | 'RegexFilter' | 'SelectFilter' | 'NumberFilter' | 'DateFilter' | 'CustomFilter'; +export interface Filter { + /** + * "TextFilter"||"SelectFilter"||"NumberFilter"||"DateFilter"||"RegexFilter"||"YOUR_CUSTOM_FILTER" + */ + type?: FilterType; + /** + * Default value on filter. If type is NumberFilter or DateFilter, this value will like { number||date: xxx, comparator: '>' } + */ + defaultValue?: any; + /** + * Assign a millisecond for delay when trigger filtering, default is 500. + */ + delay?: number; + /** + * Only work on TextFilter. Assign the placeholder text on text and regex filter + */ + placeholder?: string | RegExp; + /** + * Only work on NumberFilter. Accept an array which conatin the filter condition, like: ['<','>','='] + */ + numberComparators?: string[]; + + /** + * Options for the filter. + */ + options?: any; + + /** + * Comparison condition for the NumberFilter + */ + condition?: string; + + /** + * Get element which represent filter. + */ + getElement?: (filterHandler: (parameters?: ApplyFilterParameter) => void, filterParameters: any) => JSX.Element; + + /** + * Parameters for custom filter + */ + customFilterParameters?: any; +} + +export interface TableHeaderColumn extends ComponentClass { } +declare const TableHeaderColumn: TableHeaderColumn; + +declare class TableDataSet extends EventEmitter { + constructor(data: any); + setData(data: any): void; + clear(): void; + getData(): any; +} diff --git a/types/react-bootstrap-table/v2/react-bootstrap-table-tests.tsx b/types/react-bootstrap-table/v2/react-bootstrap-table-tests.tsx new file mode 100644 index 0000000000..c8f25dfa56 --- /dev/null +++ b/types/react-bootstrap-table/v2/react-bootstrap-table-tests.tsx @@ -0,0 +1,175 @@ +import * as React from 'react'; +import { render } from 'react-dom'; +import { BootstrapTable, TableHeaderColumn, ApplyFilterParameter, Filter } from 'react-bootstrap-table'; + +const products = [{ + id: 1, + name: "Item name 1", + price: 100 +}, { + id: 2, + name: "Item name 2", + price: 100 +}]; + +// It's a data format example. +function priceFormatter(cell: any, row: any) { + return ' ' + cell; +} + +render( + + Product ID + Product Name + Product Price + , + document.getElementById("app") +); + +const qualityType = { + 0: 'good', + 1: 'bad', + 2: 'unknown' +}; + +function enumFormatter(cell: any, row: any, enumObject: any) { + return enumObject[cell]; +} + +class SelectFilterWithDefaultValue extends React.Component { + render() { + return ( + + Product ID + Product Name + Product Quality + + ); + } +} + +class TextFilterWithCondition extends React.Component { + render() { + return ( + + Product ID + Product Name + Product Price + + ); + } +} + +function getCustomFilter(filterHandler: (parameters?: ApplyFilterParameter) => void, customFilterParameters: any) { + return ( +
+ ); +} + +class CustomFilter extends React.Component { + render() { + const filter: Filter = { type: 'CustomFilter', getElement: getCustomFilter, customFilterParameters: { textOK: 'yes', textNOK: 'no' } }; + return ( + + Product ID + Product Name + Product Is In Stock + + ); + } +} + +class RemoteProps extends React.Component { + render() { + const filter: Filter = { type: 'CustomFilter', getElement: getCustomFilter, customFilterParameters: { textOK: 'yes', textNOK: 'no' } }; + return ( + { + remoteObj.cellEdit = true; + return remoteObj; + }} + options={{ + onCellEdit: (row: any, fieldName: string, value: any) => { console.info(row); } + }} + > + Product ID + Product Name + Product Is In Stock + + ); + } +} + +class RemoteBool extends React.Component { + render() { + const filter: Filter = { type: 'CustomFilter', getElement: getCustomFilter, customFilterParameters: { textOK: 'yes', textNOK: 'no' } }; + return ( + + Product ID + Product Name + Product Is In Stock + + ); + } +} + +/** + * See http://allenfang.github.io/react-bootstrap-table/docs.html#tdAttr + */ +const tdAttrExample = + Product ID + Product Name + Product Price +; + +/** + * See http://allenfang.github.io/react-bootstrap-table/docs.html#tdStyle + */ +const tdStyleExample = + Product ID + Product Name + Product Price +; + +/** + * See http://allenfang.github.io/react-bootstrap-table/docs.html#thStyle + */ +const thStyleExample = + Product ID + Product Name + Product Price +; + +// Adopted from https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/column-header-span/column-header-span-complex.js +export default class ColumnHeaderSpanComplex extends React.Component { + render() { + const selectRow = { + mode: 'checkbox', + bgColor: 'rgb(238, 193, 213)' + }; + + const cellEdit = { + mode: 'click', + blurToSave: true + }; + return ( + + ID + Product + name + price + Coupon + In stock + Customer + name + order + + ); + } +} diff --git a/types/react-bootstrap-table/v2/tsconfig.json b/types/react-bootstrap-table/v2/tsconfig.json new file mode 100644 index 0000000000..eee5850865 --- /dev/null +++ b/types/react-bootstrap-table/v2/tsconfig.json @@ -0,0 +1,30 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6", + "dom" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": false, + "strictFunctionTypes": true, + "paths": { + "react-bootstrap-table": [ + "react-bootstrap-table/v2" + ] + }, + "baseUrl": "../../", + "jsx": "react", + "typeRoots": [ + "../../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "react-bootstrap-table-tests.tsx" + ] +} diff --git a/types/react-bootstrap-table/v2/tslint.json b/types/react-bootstrap-table/v2/tslint.json new file mode 100644 index 0000000000..bf0a68ff4e --- /dev/null +++ b/types/react-bootstrap-table/v2/tslint.json @@ -0,0 +1,10 @@ +{ + "extends": "dtslint/dt.json", + "rules": { + // TODO + "ban-types": false, + "prefer-method-signature": false, + "strict-export-declare-modifiers": false, + "no-empty-interface": false + } + }