diff --git a/src/renderer/components/table/table.tsx b/src/renderer/components/table/table.tsx index cb25901ba6..2a4b191e19 100644 --- a/src/renderer/components/table/table.tsx +++ b/src/renderer/components/table/table.tsx @@ -18,24 +18,73 @@ export type TableOrderBy = "asc" | "desc" | string; export type TableSortParams = { sortBy: SortingOption; orderBy: TableOrderBy }; export type TableSortCallback = (data: D) => string | number | (string | number)[]; -export interface TableProps extends React.DOMAttributes { - items?: ItemObject[]; // Raw items data +export interface TableProps extends React.DOMAttributes { + /** + * Raw items data + */ + items?: Entry[]; + + /** + * Optional className for the root element + */ className?: string; - autoSize?: boolean; // Setup auto-sizing for all columns (flex: 1 0) - selectable?: boolean; // Highlight rows on hover - scrollable?: boolean; // Use scrollbar if content is bigger than parent's height - storageKey?: string; // Keep some data in localStorage & restore on page reload, e.g sorting params - sortable?: { - // Define sortable callbacks for every column in - // @sortItem argument in the callback is an object, provided in - [sortBy: string]: TableSortCallback; - }; - sortSyncWithUrl?: boolean; // sorting state is managed globally from url params - sortByDefault?: Partial>; // default sorting params - onSort?: (params: TableSortParams) => void; // callback on sort change, default: global sync with url - noItems?: React.ReactNode; // Show no items state table list is empty - selectedItemId?: string; // Allows to scroll list to selected item - virtual?: boolean; // Use virtual list component to render only visible rows + + /** + * Setup auto-sizing for all columns (flex: 1 0) + */ + autoSize?: boolean; + + /** + * Highlight rows on hover + */ + selectable?: boolean; + + /** + * Use scrollbar if content is bigger than parent's height + */ + scrollable?: boolean + + /** + * Keep some data in localStorage & restore on page reload, e.g sorting params + */ + storageKey?: string; + + /** + * Define sortable callbacks for every column in + * @sortItem argument in the callback is an object, provided in + */ + sortable?: Record>; + + /** + * sorting state is managed globally from url params + */ + sortSyncWithUrl?: boolean; + + /** + * default sorting params + */ + sortByDefault?: Partial>; + + /** + * callback on sort change, default: global sync with url + */ + onSort?: (params: TableSortParams) => void; + + /** + * Show no items state table list is empty + */ + noItems?: React.ReactNode; + + /** + * Allows to scroll list to selected item + */ + selectedItemId?: string; + + /** + * Use virtual list component to render only visible rows + */ + virtual?: boolean; + rowPadding?: string; rowLineHeight?: string; customRowHeights?: (item: object, lineHeight: number, paddings: number) => number; @@ -43,8 +92,8 @@ export interface TableProps extends Re } @observer -export class Table extends React.Component> { - static defaultProps: TableProps = { +export class Table extends React.Component> { + static defaultProps: TableProps = { scrollable: true, autoSize: true, rowPadding: "8px", @@ -54,9 +103,9 @@ export class Table extends React.Component> { @observable sortParamsLocal = this.props.sortByDefault; - @computed get sortParams(): Partial { + @computed get sortParams(): Partial> { if (this.props.sortSyncWithUrl) { - const sortBy = navigation.searchParams.get("sortBy"); + const sortBy = navigation.searchParams.get("sortBy") as SortingOption; const orderBy = navigation.searchParams.get("orderBy"); return { sortBy, orderBy }; @@ -111,7 +160,7 @@ export class Table extends React.Component> { } @autobind() - protected onSort(params: TableSortParams) { + protected onSort(params: TableSortParams) { const { sortSyncWithUrl, onSort } = this.props; if (sortSyncWithUrl) { @@ -127,14 +176,14 @@ export class Table extends React.Component> { } @autobind() - sort(colName: TableSortBy) { + sort(colName: SortingOption) { const { sortBy, orderBy } = this.sortParams; const sameColumn = sortBy == colName; - const newSortBy: TableSortBy = colName; + const newSortBy: SortingOption = colName; const newOrderBy: TableOrderBy = (!orderBy || !sameColumn || orderBy === "desc") ? "asc" : "desc"; this.onSort({ - sortBy: String(newSortBy), + sortBy: newSortBy, orderBy: newOrderBy, }); } @@ -185,15 +234,13 @@ export class Table extends React.Component> { } render() { - const { selectable, scrollable, sortable, autoSize, virtual } = this.props; - let { className } = this.props; - - className = cssNames("Table flex column", className, { + const { selectable, scrollable, sortable, autoSize, virtual, className } = this.props; + const classNames = cssNames("Table flex column", className, { selectable, scrollable, sortable, autoSize, virtual, }); return ( -
+
{this.renderHead()} {this.renderRows()}