@teamsnap/teamsnap-ui
Version:
a CSS component library for TeamSnap
95 lines (94 loc) • 3.83 kB
TypeScript
/**
* @name Table
*
* @description
* A Table component that works like a helper in composing the Panel components and various other options.
* See the Teamsnap patterns library for more information. https://teamsnap-ui-patterns.netlify.com/patterns/components/table.html
*
* @example
* <Table
* defaultSort='col2'
* columns=[
* { name: 'col1', label: 'Column One', isSortable: true },
* { name: 'col2', label: 'Column Two', isSortable: true },
* { name: 'col3', label: 'Column Three', render: (column, row) => <a href={`/path/to/${row.id}`}>{ row.col3 }</a> }
* ]
* rows=[
* { id: 1, col1: 'Row 1 Column One', col2: 'Row 1 Column 2', col3: 'Row 1 Column 3' },
* { id: 2, col1: 'Row 2 Column One', col2: 'Row 2 Column 2', col3: 'Row 2 Column 3' },
* { id: 3, col1: 'Row 3 Column One', col2: 'Row 3 Column 2', col3: 'Row 3 Column 3' }
* ] />
*
*/
import * as React from "react";
import * as PropTypes from "prop-types";
interface State {
items: any[];
sortByColumn?: any;
sortByReverse?: any;
}
declare class Table extends React.PureComponent<PropTypes.InferProps<typeof Table.propTypes>, State> {
static defaultProps: {
columns: any[];
rows: any[];
defaultSort: string;
isStriped: boolean;
className: string;
mods: any;
style: {};
otherProps: {};
placeHolder: string;
maxTableHeight: any;
isLoading: boolean;
};
static propTypes: {
columns: PropTypes.Requireable<PropTypes.InferProps<{
name: PropTypes.Validator<string>;
label: PropTypes.Requireable<string | PropTypes.ReactElementLike>;
render: PropTypes.Requireable<(...args: any[]) => any>;
isSortable: PropTypes.Requireable<boolean>;
sortType: PropTypes.Requireable<string>;
sortFn: PropTypes.Requireable<(...args: any[]) => any>;
align: PropTypes.Requireable<string>;
mods: PropTypes.Requireable<string>;
style: PropTypes.Requireable<object>;
otherProps: PropTypes.Requireable<object>;
}>[]>;
rows: PropTypes.Requireable<object[]>;
defaultSort: PropTypes.Requireable<string>;
externalSortingFunction: PropTypes.Requireable<(...args: any[]) => any>;
isStriped: PropTypes.Requireable<boolean>;
className: PropTypes.Requireable<string>;
mods: PropTypes.Requireable<string>;
style: PropTypes.Requireable<object>;
otherProps: PropTypes.Requireable<object>;
maxTableHeight: PropTypes.Requireable<string>;
isLoading: PropTypes.Requireable<boolean>;
placeHolder: PropTypes.Requireable<string | ((...args: any[]) => any)>;
};
constructor(props: any);
static getDerivedStateFromProps(props: any, state: any): {
items: any[];
sortByColumn: string;
sortByReverse: boolean;
} | {
items: any;
};
private static getTableState;
static sortItems: (props: PropTypes.InferProps<typeof Table.propTypes>, newItems: any[], sortByColumn: string, sortByReverse: boolean) => {
items: any[];
sortByColumn: string;
sortByReverse: boolean;
};
handleSortClick: (sortName: any) => void;
renderSortLabel: (label: any) => JSX.Element;
renderSortLink: (column: any) => JSX.Element;
renderPanelCell: (role: any, children: any, column: any) => JSX.Element;
renderColumn: (column: any, row: any) => JSX.Element;
renderHeaderColumn: (column: any) => JSX.Element;
renderRow: (row: any) => JSX.Element;
renderTableColumns: () => JSX.Element[];
renderTableRows: (placeHolder: any, isLoading: any) => JSX.Element | JSX.Element[];
render(): JSX.Element;
}
export default Table;