[react-bootstrap-table-next] add definitions

- expand toolkit definitions
- add standalone pagination component types

types/react-bootstrap-table-next/index.d.ts

@@ -60,7 +60,7 @@ export type ColumnSortFunc<T, E extends keyof T = any> = (
     a: T[E],
     b: T[E],
     order: 'asc' | 'desc',
-    dataField: string,
+    dataField: any,
     rowA: T,
     rowB: T,
 ) => number;
@@ -74,7 +74,7 @@ export interface TableChangeState<T> {
     data: T[];
     cellEdit: {
         rowId: string;
-        dataField: string;
+        dataField: any;
         newValue: any;
     };
 }
@@ -100,7 +100,7 @@ export interface ColumnDescription<T extends object = any, E = any> {
      * If set the column will not use cell values
      */
     isDummyField?: boolean;
-    dataField: T[keyof T] | string;
+    dataField: any;
     formatter?: ColumnFormatter<T, E>;
     hidden?: boolean;
     /**
@@ -192,7 +192,7 @@ export type PaginationOptions = Partial<{
     /**
      * A numeric array is also available: [5, 10]. the purpose of above example is custom the text
      */
-    sizePerPageList: Array<number> | Array<{ text: string; value: number }>;
+    sizePerPageList: number[] | Array<{ text: string; value: number }>;
     /**
      * hide the going to first and last page button
      */
@@ -320,7 +320,7 @@ export interface BootstrapTableRef<T extends object = any> {
     };
 }
 
-export interface BootstrapTableProps<T = any> {
+export interface BootstrapTableProps<T extends object = any> {
     /**
      * Tells react-bootstrap-table2 which column is unique.
      */
@@ -355,14 +355,14 @@ export interface BootstrapTableProps<T = any> {
     expandRow?: ExpandRowProps<T>;
     parentClassName?: string | ((isExpand: boolean, row: T, rowIndex: number) => string);
     rowStyle?: ((row: T, rowIndex: number) => CSSProperties) | CSSProperties;
-    rowEvents?: RowEventHandlerProps<any>;
+    rowEvents?: RowEventHandlerProps;
     rowClasses?: ((row: T, rowIndex: number) => string) | string;
     filtersClasses?: string;
     filterPosition?: FilterPosition;
     footerClasses?: string;
-    defaultSorted?: [{ dataField: string; order: SortOrder }];
+    defaultSorted?: [{ dataField: any; order: SortOrder }];
     sort?: {
-        dataField?: string;
+        dataField?: any;
         order: SortOrder;
         sortFunc?: any;
         sortCaret?: any;
@@ -408,10 +408,10 @@ export interface ExpandHeaderColumnRenderer {
 
 export interface ExpandRowProps<T> {
     renderer: (row: T, rowIndex: number) => JSX.Element;
-    expanded?: Array<number>;
+    expanded?: number[];
     onExpand?: (row: T, isExpand: boolean, rowIndex: number, e: SyntheticEvent) => void;
-    onExpandAll: (isExpandAll: boolean, results: Array<number>, e: SyntheticEvent) => void;
-    nonExpandable: Array<number>;
+    onExpandAll: (isExpandAll: boolean, results: number[], e: SyntheticEvent) => void;
+    nonExpandable: number[];
     showExpandColumn?: boolean;
     onlyOneExpanding?: boolean;
     expandByColumnOnly?: boolean;

types/react-bootstrap-table2-filter/index.d.ts

@@ -9,6 +9,14 @@
 import { TableColumnFilterProps, ColumnDescription } from 'react-bootstrap-table-next';
 import { CSSProperties, SyntheticEvent } from 'react';
 
+export enum FILTER_TYPES {
+    TEXT = 'TEXT',
+    SELECT = 'SELECT',
+    MULTISELECT = 'MULTISELECT',
+    NUMBER = 'NUMBER',
+    DATE = 'DATE',
+}
+
 /**
  * Filter comparators used for table filters
  */
@@ -88,8 +96,8 @@ export function multiSelectFilter(props: Partial<MultiSelectFilterProps>): Table
  * Number filter configuration options
  */
 export type NumberFilterProps<T extends object = any> = TableColumnFilterProps<TableColumnFilterProps, T> & {
-    options?: Array<number>;
-    comparators?: Array<Comparator>;
+    options?: number[];
+    comparators?: Comparator[];
     /**
      * When set to true comparator dropdown does not show a "no selection" option
      */
@@ -104,6 +112,35 @@ export type NumberFilterProps<T extends object = any> = TableColumnFilterProps<T
 
 export function numberFilter(props: Partial<NumberFilterProps>): TableColumnFilterProps;
 
+/**
+ * Date filter options
+ */
+export interface DateFilter<T extends object = any> extends TableColumnFilterProps<TableColumnFilterProps, T> {
+    withoutEmptyComparatorOption?: boolean;
+    defaultValue?: {
+        date: Date;
+        comparator: Comparator;
+    };
+    comparator?: Comparator[];
+    comparatorClassName?: string;
+    dateClassName?: string;
+    comparatorStyle?: CSSProperties;
+    dateStyle?: CSSProperties;
+}
+
+export function dateFilter(props: DateFilter): TableColumnFilterProps;
+
+/**
+ * Custom filter
+ */
+export interface CustomFilterProps {
+    type?: string | FILTER_TYPES;
+    comparator?: Comparator;
+    caseSensitive?: boolean;
+}
+
+export function customFilter(props: CustomFilterProps): TableColumnFilterProps;
+
 /**
  * declaration for table filter sub module
  */

types/react-bootstrap-table2-paginator/index.d.ts

@@ -6,10 +6,44 @@
 
 // documentation taken from https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/table-props.html
 
-import { PaginationOptions } from 'react-bootstrap-table-next';
+import { PaginationOptions, BootstrapTableProps } from 'react-bootstrap-table-next';
+
+export interface PaginationCtxOptions {
+    options?: PaginationOptions;
+}
 
 /**
  * declaration for table pagination sub module and factory
  */
-declare function paginationFactory(options: PaginationOptions): { options?: PaginationOptions };
+declare function paginationFactory(options: PaginationOptions): PaginationCtxOptions;
+
 export default paginationFactory;
+
+interface PaginationChildProps extends PaginationOptions {
+    tableId?: string;
+    bootstrap4?: boolean;
+}
+
+/**
+ * Pagination context provider
+ */
+export function PaginationProvider(props: {
+    pagination?: PaginationOptions;
+    children: (childProps: {
+        paginationProps: PaginationChildProps;
+        paginationTableProps: BootstrapTableProps;
+    }) => React.ReactElement | null;
+}): React.ReactElement | null;
+
+export const PaginationTotalStandalone: React.FC<PaginationChildProps>;
+export const PaginationListStandalone: React.FC<PaginationChildProps>;
+
+export interface SizePerPageDropdownStandaloneProps extends PaginationChildProps {
+    open?: boolean;
+    hidden?: boolean;
+    btnContextual?: boolean;
+    variation?: 'dropdown' | 'dropup';
+    className?: string;
+}
+
+export const SizePerPageDropdownStandalone: React.FC<SizePerPageDropdownStandaloneProps>;

types/react-bootstrap-table2-toolkit/index.d.ts

@@ -6,7 +6,8 @@
 
 // documentation taken from https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/table-props.html
 
-import { ColumnDescription, BootstrapTableProps } from 'react-bootstrap-table-next';
+import { CSSProperties, ReactNode } from 'react';
+import { ColumnDescription } from 'react-bootstrap-table-next';
 
 /**
  * declaration for table toolkit sub module
@@ -39,8 +40,81 @@ export interface TableToolkitProps<T extends object = any> {
     data: T[];
     ref?: any;
     columns: Array<ColumnDescription<T>>;
-    children: (props: { baseProps: BootstrapTableProps<T>; searchProps: InjectedSearchProps }) => JSX.Element;
+    children: (props: ToolkitContextType) => JSX.Element;
 }
 
-declare function ToolkitProvider(props: TableToolkitProps): JSX.Element;
+export interface ToolkitContextType {
+    searchProps: InjectedSearchProps;
+    csvProps: {
+        onExport: () => void;
+    };
+    columnToggleProps: {
+        columns: ColumnDescription[];
+        /**
+         * array of toggled columns
+         */
+        toggles: boolean[];
+        onColumnToggle: (dataField: string) => void;
+    };
+    baseProps: {
+        /**
+         * table key field
+         */
+        keyField: any;
+        columns: ColumnDescription[];
+        data: any[];
+        bootstrap4?: boolean;
+    };
+}
+
+export interface ToggleListProps {
+    columns: ColumnDescription[];
+    /**
+     * array of toggled columns
+     */
+    toggles: boolean[];
+    onColumnToggle: (dataField: string) => void;
+    btnClassName?: string;
+    className?: string;
+    contextual?: string;
+}
+
+export namespace ColumnToggle {
+    function ToggleList(props: ToggleListProps): React.ReactElement | null;
+}
+
+export interface ExportCSVButtonProps {
+    children: ReactNode;
+    onExport: () => void;
+    style?: CSSProperties;
+    className?: string;
+}
+
+export namespace CSVExport {
+    function ToggleList(props: ExportCSVButtonProps): React.ReactElement | null;
+}
+
+export interface SearchBarProps {
+    onSearch: (searchText: string) => void;
+    className?: string;
+    placeholder?: string;
+    style?: CSSProperties;
+    delay?: number;
+    searchText?: string;
+    tableId?: string;
+}
+export interface ClearSearchButtonProps {
+    onClear?: () => void;
+    className?: string;
+    text?: string;
+}
+
+export namespace Search {
+    function SearchBar(props: SearchBarProps): React.ReactElement | null;
+    function ClearSearchButton(props: ExportCSVButtonProps): React.ReactElement | null;
+}
+
+export const ToolkitContext: React.Context<ToolkitContextType>;
+
+declare function ToolkitProvider(props: TableToolkitProps): React.ReactElement | null;
 export default ToolkitProvider;