diff --git a/types/react-bootstrap-table-next/index.d.ts b/types/react-bootstrap-table-next/index.d.ts index 5db7cd4f40..6538dec43e 100644 --- a/types/react-bootstrap-table-next/index.d.ts +++ b/types/react-bootstrap-table-next/index.d.ts @@ -8,23 +8,25 @@ import { CSSProperties, ReactElement, SyntheticEvent, Component } from 'react'; -export enum RowSelectionType { - ROW_SELECT_SINGLE = 'radio', - ROW_SELECT_MULTIPLE = 'checkbox', - ROW_SELECT_DISABLED = 'ROW_SELECT_DISABLED', -} +export const ROW_SELECT_SINGLE = 'radio'; +export const ROW_SELECT_MULTIPLE = 'checkbox'; +export const ROW_SELECT_DISABLED = 'ROW_SELECT_DISABLED'; +export const CHECKBOX_STATUS_INDETERMINATE = 'indeterminate'; +export const CHECKBOX_STATUS_CHECKED = 'checked'; +export const CHECKBOX_STATUS_UNCHECKED = 'unchecked'; +export const FILTERS_POSITION_INLINE = 'inline'; +export const FILTERS_POSITION_TOP = 'top'; +export const FILTERS_POSITION_BOTTOM = 'bottom'; -export enum TableCheckboxStatus { - CHECKBOX_STATUS_CHECKED = 'checked', - CHECKBOX_STATUS_INDETERMINATE = 'indeterminate', - CHECKBOX_STATUS_UNCHECKED = 'unchecked', -} - -export enum FilterPosition { - FILTERS_POSITION_INLINE = 'inline', - FILTERS_POSITION_TOP = 'top', - FILTERS_POSITION_BOTTOM = 'bottom', -} +export type RowSelectionType = typeof ROW_SELECT_SINGLE | typeof ROW_SELECT_MULTIPLE | typeof ROW_SELECT_DISABLED; +export type TableCheckboxStatus = + | typeof CHECKBOX_STATUS_INDETERMINATE + | typeof CHECKBOX_STATUS_CHECKED + | typeof CHECKBOX_STATUS_UNCHECKED; +export type FilterPosition = + | typeof FILTERS_POSITION_INLINE + | typeof FILTERS_POSITION_TOP + | typeof FILTERS_POSITION_BOTTOM; /** * Table change event types @@ -36,13 +38,7 @@ export enum TableChangeType { cellEdit = 'cellEdit', } -export enum CellAlignment { - left = 'left', - center = 'center', - right = 'right', - start = 'start', - end = 'end', -} +export type CellAlignment = 'left' | 'center' | 'right' | 'start' | 'end' | string; /** * Filter comparators used for table filters @@ -90,7 +86,7 @@ export type TableChangeState = { }; }; -export type HeaderFormatter = ( +export type HeaderFormatter = ( column: ColumnDescription, colIndex: number, components: { @@ -106,10 +102,12 @@ export type ColumnFormatter = ( formatExtraData: E, ) => JSX.Element | string | boolean | React.ReactText; -export type ColumnDescription = ( - | { isDummyField: true; dataField?: string; formatter?: ColumnFormatter } - | { dataField: T[keyof T] | string } -) & { +export type ColumnDescription = { + /** + * If set the column will not use cell values + */ + isDummyField?: boolean; + dataField: T[keyof T] | string; formatter?: ColumnFormatter; hidden?: boolean; /** @@ -154,7 +152,7 @@ export type RowEventHandler = (e: SyntheticEvent, row: T, rowIndex: number) = /** * Row level event handlers */ -export type RowEventHandlerProps = Partial<{ +export type RowEventHandlerProps = Partial<{ onClick: RowEventHandler; onDoubleClick: RowEventHandler; onMouseEnter: RowEventHandler; @@ -270,6 +268,7 @@ export interface SelectRowProps { clickToExpand?: boolean; clickToEdit?: boolean; hideSelectAll?: boolean; + selected?: Array; onSelect?: (row: T, isSelected: boolean, rowIndex: number, e: SyntheticEvent) => void | boolean; /** * This callback function will be called when select/unselect all and it only work when you configure selectRow.mode as checkbox. @@ -296,7 +295,39 @@ export interface SelectRowProps { selectColumnPosition?: 'left' | 'right'; } -export interface BootstrapTableProps { +export interface BootstrapTableRef { + table: { + props: { + data: Array; + }; + }; + selectionContext?: { + selected?: Array; + }; + rowExpandContext?: { + state: { + expanded?: Array; + }; + }; + paginationContext?: { + currPage: number; + currSizePerPage: number; + }; + sortContext?: { + state: { + sortColumn: ColumnDescription; + sortOrder: SortOrder; + }; + }; + filterContext?: { + currFilters: any; + }; + cellEditContext?: { + startEditing: (rowIndex: number, columnIndex: number) => void; + }; +} + +export interface BootstrapTableProps { /** * Tells react-bootstrap-table2 which column is unique. */ @@ -305,10 +336,10 @@ export interface BootstrapTableProps { * Provides data for your table. It accepts a single Array object. */ data: T[]; - columns: Array>; + columns: Array>; bootstrap4?: boolean; remote?: boolean | Partial<{ pagination: boolean; filter: boolean; sort: boolean; cellEdit: boolean }>; - noDataIndication?: () => JSX.Element | JSX.Element; + noDataIndication?: () => JSX.Element | JSX.Element | string; striped?: boolean; bordered?: boolean; hover?: boolean; @@ -331,7 +362,7 @@ export interface BootstrapTableProps { expandRow?: ExpandRowProps; parentClassName?: string | ((isExpand: boolean, row: T, rowIndex: number) => string); rowStyle?: ((row: T, rowIndex: number) => CSSProperties) | CSSProperties; - rowEvents?: RowEventHandlerProps; + rowEvents?: RowEventHandlerProps; rowClasses?: ((row: T, rowIndex: number) => string) | string; filtersClasses?: string; filterPosition?: FilterPosition; @@ -353,7 +384,7 @@ export interface BootstrapTableProps { * This callback function will be called only when data size change by search/filter etc. */ onDataSizeChange?: (props: { dataSize: number }) => void; - search?: SearchProps; + search?: SearchProps | boolean; } declare class BootstrapTable extends Component> {} @@ -365,6 +396,7 @@ export default BootstrapTable; * Consult [documentation](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/search-props.html) */ export interface SearchProps { + placeholder?: string; searchText?: string; defaultSearch?: string; /* custom search method, return true if matched and false if not */