react-select-table
Version:
React table component with selectable items
391 lines (390 loc) • 15.7 kB
TypeScript
export namespace componentEventHandlersPropTypes {
const onColumnResizeEnd: PropTypes.Requireable<(...args: any[]) => any>;
const onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
const onItemsOpen: PropTypes.Requireable<(...args: any[]) => any>;
}
export namespace reduxEventHandlersPropTypes {
const onContextMenu: PropTypes.Requireable<(...args: any[]) => any>;
const onSelectionChange: PropTypes.Requireable<(...args: any[]) => any>;
const onActionDispatched: PropTypes.Requireable<(...args: any[]) => any>;
}
export namespace tablePropTypes {
const namespace: PropTypes.Validator<string>;
const columns: PropTypes.Validator<(PropTypes.InferProps<{
/**
* The text that will be displayed in the header
*/
title: PropTypes.Requireable<string>;
/**
* The path of a row property that will be passed as the first argument to the {@link render} function,
* and also to {@link Options.itemComparator} when sorting by this column.
* If defined, it makes the column sortable. If that is not desirable, read and return the property from
* the row argument inside the render function, instead of defining path.
*/
path: PropTypes.Requireable<string>;
/**
* A unique identifier for the column.
* Must be defined if {@link path} is not, or if multiple columns use the same path
*/
key: PropTypes.Requireable<string>;
/**
* Returns the content to be displayed in the cell.
* If not defined, the defaultContent argument will be displayed directly.
*
* @param {number|*} defaultContent The row's property at {@link path}, or the row index if path is falsy
* @param {object} row The entire row object
* @param {object} options Extra options you can set for the cell
* @param {string} options.className A class to be given to the cell
*/
render: PropTypes.Requireable<(...args: any[]) => any>;
/**
* Use a th instead of a td element
*/
isHeader: PropTypes.Requireable<boolean>;
/**
* The default width percentage for the column. The default is: 100 / <column count>
*/
defaultWidth: PropTypes.Requireable<number>;
}> | null | undefined)[]>;
const initColumnWidths: PropTypes.Requireable<{
[x: string]: number | null | undefined;
}>;
const errorComponent: PropTypes.Requireable<PropTypes.ReactComponentLike>;
const paginationComponent: React.FC<import("./PaginationProps").PaginationProps>;
const loadingIndicator: PropTypes.Requireable<PropTypes.ReactNodeLike>;
const emptyPlaceholder: PropTypes.Requireable<PropTypes.ReactNodeLike>;
const id: PropTypes.Requireable<string>;
const className: PropTypes.Requireable<string>;
const autoFocus: PropTypes.Requireable<boolean>;
const dragSelectScrollFactor: PropTypes.Requireable<number>;
const columnResizeScrollFactor: PropTypes.Requireable<number>;
const getRowClassName: PropTypes.Requireable<(...args: any[]) => any>;
}
export namespace slaveTablePropTypes {
const name: PropTypes.Validator<string>;
}
/**
* The column properties
*/
export type Column = PropTypes.InferProps<{
/**
* The text that will be displayed in the header
*/
title: PropTypes.Requireable<string>;
/**
* The path of a row property that will be passed as the first argument to the {@link render} function,
* and also to {@link Options.itemComparator} when sorting by this column.
* If defined, it makes the column sortable. If that is not desirable, read and return the property from
* the row argument inside the render function, instead of defining path.
*/
path: PropTypes.Requireable<string>;
/**
* A unique identifier for the column.
* Must be defined if {@link path} is not, or if multiple columns use the same path
*/
key: PropTypes.Requireable<string>;
/**
* Returns the content to be displayed in the cell.
* If not defined, the defaultContent argument will be displayed directly.
*
* @param {number|*} defaultContent The row's property at {@link path}, or the row index if path is falsy
* @param {object} row The entire row object
* @param {object} options Extra options you can set for the cell
* @param {string} options.className A class to be given to the cell
*/
render: PropTypes.Requireable<(...args: any[]) => any>;
/**
* Use a th instead of a td element
*/
isHeader: PropTypes.Requireable<boolean>;
/**
* The default width percentage for the column. The default is: 100 / <column count>
*/
defaultWidth: PropTypes.Requireable<number>;
}>;
/**
* The props of {@link Components.Table }
*/
export type TableProps = PropTypes.InferProps<{
/**
* Called on right-click or two-finger tap
*
* @param {ContextMenuArgType} target See {@link EventsTypes.ContextMenuArg}
* @see Actions.setActive
*/
onContextMenu: PropTypes.Requireable<(...args: any[]) => any>;
/**
* Called when the selection changes
*
* @param {SelectionArgType} selection See {@link EventsTypes.SelectionArg}
*/
onSelectionChange: PropTypes.Requireable<(...args: any[]) => any>;
/**
* Called when any redux action is dispatched
*
* @param {boolean} internal Indicates whether the action was dispatched internally by the library
*/
onActionDispatched: PropTypes.Requireable<(...args: any[]) => any>;
/**
* Used to link a table component with a reducer.
* Must match to the one passed as {@link createTable}
* A Table component can share a namespace with multiple SlaveTable components.
*/
namespace: PropTypes.Validator<string>;
/**
* All columns
*
* @see Column
*/
columns: PropTypes.Validator<(PropTypes.InferProps<{
/**
* The text that will be displayed in the header
*/
title: PropTypes.Requireable<string>;
/**
* The path of a row property that will be passed as the first argument to the {@link render} function,
* and also to {@link Options.itemComparator} when sorting by this column.
* If defined, it makes the column sortable. If that is not desirable, read and return the property from
* the row argument inside the render function, instead of defining path.
*/
path: PropTypes.Requireable<string>;
/**
* A unique identifier for the column.
* Must be defined if {@link path} is not, or if multiple columns use the same path
*/
key: PropTypes.Requireable<string>;
/**
* Returns the content to be displayed in the cell.
* If not defined, the defaultContent argument will be displayed directly.
*
* @param {number|*} defaultContent The row's property at {@link path}, or the row index if path is falsy
* @param {object} row The entire row object
* @param {object} options Extra options you can set for the cell
* @param {string} options.className A class to be given to the cell
*/
render: PropTypes.Requireable<(...args: any[]) => any>;
/**
* Use a th instead of a td element
*/
isHeader: PropTypes.Requireable<boolean>;
/**
* The default width percentage for the column. The default is: 100 / <column count>
*/
defaultWidth: PropTypes.Requireable<number>;
}> | null | undefined)[]>;
/**
* The widths of the columns on the first load
*/
initColumnWidths: PropTypes.Requireable<{
[x: string]: number | null | undefined;
}>;
/**
* Displayed instead of the table rows when there is an error, with the error as a child
*
* @see Actions.setError
*/
errorComponent: PropTypes.Requireable<PropTypes.ReactComponentLike>;
/**
* Custom component for navigating between pages
*
* @type {React.FC<import("./PaginationProps").PaginationProps>}
* @see Actions.setPageSize
*/
paginationComponent: React.FC<import("./PaginationProps").PaginationProps>;
/**
* Displayed below header when loading
*
* @see Actions.startLoading
*/
loadingIndicator: PropTypes.Requireable<PropTypes.ReactNodeLike>;
/**
* Displayed below header when there are no rows
*/
emptyPlaceholder: PropTypes.Requireable<PropTypes.ReactNodeLike>;
/**
* Element id for the table container
*/
id: PropTypes.Requireable<string>;
/**
* Element class for the table container
*/
className: PropTypes.Requireable<string>;
/**
* Send focus to the table container after rendering
*/
autoFocus: PropTypes.Requireable<boolean>;
/**
* Speed of automatic scrolling when drag-selecting
*/
dragSelectScrollFactor: PropTypes.Requireable<number>;
/**
* Speed of automatic scrolling when resizing columns
*/
columnResizeScrollFactor: PropTypes.Requireable<number>;
/**
* Returns a class for the tr element
*
* @param {object} row The row object
* @param {RowKeyType} key The key of the row
*/
getRowClassName: PropTypes.Requireable<(...args: any[]) => any>;
/**
* Called when column resizing ends
*
* @param {Object<string, number>} widths The new column width percentages
*/
onColumnResizeEnd: PropTypes.Requireable<(...args: any[]) => any>;
/**
* Pass-through of the keydown event, with added selection argument
*
* @param {KeyboardEvent<HTMLDivElement>} e The original keydown event argument
* @param {SelectionArgType} selection See {@link EventsTypes.SelectionArg}
* @returns {boolean|void} Return false to prevent default behaviour
*/
onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
/**
* Called on double-click or enter-press
*
* @param {SelectionArgType} selection See {@link EventsTypes.SelectionArg}
* @param {boolean} fromKeyboard Indicates whether the event was caused by keyboard input
*/
onItemsOpen: PropTypes.Requireable<(...args: any[]) => any>;
}>;
/**
* The props of {@link Components.SlaveTable }
*/
export type SlaveTableProps = PropTypes.InferProps<{
/**
* Used to differentiate between multiple slave tables within the same {@link namespace}.
*/
name: PropTypes.Validator<string>;
/**
* Used to link a table component with a reducer.
* Must match to the one passed as {@link createTable}
* A Table component can share a namespace with multiple SlaveTable components.
*/
namespace: PropTypes.Validator<string>;
/**
* All columns
*
* @see Column
*/
columns: PropTypes.Validator<(PropTypes.InferProps<{
/**
* The text that will be displayed in the header
*/
title: PropTypes.Requireable<string>;
/**
* The path of a row property that will be passed as the first argument to the {@link render} function,
* and also to {@link Options.itemComparator} when sorting by this column.
* If defined, it makes the column sortable. If that is not desirable, read and return the property from
* the row argument inside the render function, instead of defining path.
*/
path: PropTypes.Requireable<string>;
/**
* A unique identifier for the column.
* Must be defined if {@link path} is not, or if multiple columns use the same path
*/
key: PropTypes.Requireable<string>;
/**
* Returns the content to be displayed in the cell.
* If not defined, the defaultContent argument will be displayed directly.
*
* @param {number|*} defaultContent The row's property at {@link path}, or the row index if path is falsy
* @param {object} row The entire row object
* @param {object} options Extra options you can set for the cell
* @param {string} options.className A class to be given to the cell
*/
render: PropTypes.Requireable<(...args: any[]) => any>;
/**
* Use a th instead of a td element
*/
isHeader: PropTypes.Requireable<boolean>;
/**
* The default width percentage for the column. The default is: 100 / <column count>
*/
defaultWidth: PropTypes.Requireable<number>;
}> | null | undefined)[]>;
/**
* The widths of the columns on the first load
*/
initColumnWidths: PropTypes.Requireable<{
[x: string]: number | null | undefined;
}>;
/**
* Displayed instead of the table rows when there is an error, with the error as a child
*
* @see Actions.setError
*/
errorComponent: PropTypes.Requireable<PropTypes.ReactComponentLike>;
/**
* Custom component for navigating between pages
*
* @type {React.FC<import("./PaginationProps").PaginationProps>}
* @see Actions.setPageSize
*/
paginationComponent: React.FC<import("./PaginationProps").PaginationProps>;
/**
* Displayed below header when loading
*
* @see Actions.startLoading
*/
loadingIndicator: PropTypes.Requireable<PropTypes.ReactNodeLike>;
/**
* Displayed below header when there are no rows
*/
emptyPlaceholder: PropTypes.Requireable<PropTypes.ReactNodeLike>;
/**
* Element id for the table container
*/
id: PropTypes.Requireable<string>;
/**
* Element class for the table container
*/
className: PropTypes.Requireable<string>;
/**
* Send focus to the table container after rendering
*/
autoFocus: PropTypes.Requireable<boolean>;
/**
* Speed of automatic scrolling when drag-selecting
*/
dragSelectScrollFactor: PropTypes.Requireable<number>;
/**
* Speed of automatic scrolling when resizing columns
*/
columnResizeScrollFactor: PropTypes.Requireable<number>;
/**
* Returns a class for the tr element
*
* @param {object} row The row object
* @param {RowKeyType} key The key of the row
*/
getRowClassName: PropTypes.Requireable<(...args: any[]) => any>;
/**
* Called when column resizing ends
*
* @param {Object<string, number>} widths The new column width percentages
*/
onColumnResizeEnd: PropTypes.Requireable<(...args: any[]) => any>;
/**
* Pass-through of the keydown event, with added selection argument
*
* @param {KeyboardEvent<HTMLDivElement>} e The original keydown event argument
* @param {SelectionArgType} selection See {@link EventsTypes.SelectionArg}
* @returns {boolean|void} Return false to prevent default behaviour
*/
onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
/**
* Called on double-click or enter-press
*
* @param {SelectionArgType} selection See {@link EventsTypes.SelectionArg}
* @param {boolean} fromKeyboard Indicates whether the event was caused by keyboard input
*/
onItemsOpen: PropTypes.Requireable<(...args: any[]) => any>;
}>;
export type RowKeyType = import('../store/store').StoreTypes.RowKey;
export type SelectionArgType = import('../models/Events').EventsTypes.SelectionArg;
export type ContextMenuArgType = import('../models/Events').EventsTypes.ContextMenuArg;
import PropTypes from "prop-types";
import React from "react";