import { default as React } from 'react'; import { EmptyStateProps } from '../EmptyState/EmptyState'; import { SortColumnProps } from '../SortColumn/SortColumnProps'; import { default as TableFilter } from './TableFilter/TableFilter'; import { CustomizeTableColumnsProps } from './CustomizeTableColumns/CustomizeTableColumns'; import { TableHeaderProps } from './TableHeader/TableHeader'; import { SelectDisplayProps, TooltipProps } from '../ComponentTypes.models'; import { SelectDisplayOption } from '../Selects/SelectDisplay/SelectDisplay'; import { BadgeProps } from '../Badge/Badge'; import { TagProps } from '../Tag/Tag'; type TableFilterProps = React.ComponentProps; export type GroupColorType = 'red' | 'gray' | 'yellow' | 'blue' | 'green'; export type groupAccordionType = { /** To add a `collapsed` class to expand/collapse the current clicked group's subrows */ isCollapsed: boolean; /** Unique key to identify each group */ groupKey: string; }; /** * Optional row-level styling properties that can be added to data items. * These styles will be applied to all cells in the row, including checkboxes and action buttons. * * @example * ```typescript * type MyData = { id: number; name: string } & RowStylingProps * * const data: MyData[] = [ * { id: 1, name: 'Item 1', rowClassName: 'bgc-light-red' }, * { id: 2, name: 'Item 2', rowStyle: { backgroundColor: 'yellow' } } * ] * ``` */ export type RowStylingProps = { /** CSS class names applied to all cells in the row */ rowClassName?: string; /** Inline styles applied to all cells in the row */ rowStyle?: React.CSSProperties; }; type StickyTableConfigType = { /** The default for this is 1. If you need more than 1 sticky header, then use this prop. */ header?: number; /** The default for this is 1. If you need more than 1 sticky left column, then use this prop. */ left?: number; /** This should be set to 1 or more if the far right column has an action button in it. */ right?: number; }; type WithPagination = { /** Flag to determine if the table has more data that needs to be called */ hasMore: boolean; /** Function to get the next set of data when scrolling threshold is reached */ getData: () => void; }; type WithoutPagination = { hasMore?: never; getData?: never; }; type PaginationProps = WithPagination | WithoutPagination; type WithSorting = { noSort?: never; /** Function to update the state of the sortBy prop */ sort: SortColumnProps['sorter']; /** Currently active sort column and direction */ sortBy: SortColumnProps['active']; }; type WithoutSorting = { /** Remove sorting from the table */ noSort: boolean; sort?: never; sortBy?: never; }; export type TableSortingProps = WithSorting | WithoutSorting; type WithExpandableAccordion = { /** Optional prop to enable the rows to expand on click of accordion. */ hasExpandableContent: true; /** Optional prop to allow rows to expand using the accordion. Used in cases where more details of a row needs to be shown. */ expandedAccordionContent: { id: keyof DataItem | null; isLoading: boolean; content: React.ReactNode; callout: (key: DataItem[keyof DataItem] | null) => void; }; }; type WithoutExpandableAccordion = { hasExpandableContent?: never; expandedAccordionContent?: never; }; type ExpandableAccordionProps = WithExpandableAccordion | WithoutExpandableAccordion; export type ConfigItemType = { /** Unique name for the column. Should be associated with the name that you are sorting on for the column. */ name: SortColumnProps['propName']; /** Unique label for the column headers. */ label: SortColumnProps['label']; /** Optionally add custom JSX. This will be rendered to the right of the column header. */ columnHeaderSubContent?: React.ReactNode; /** Used if you have multiple options to sort on within a column. */ options?: SortColumnProps['options']; /** The JSX that will be rendered in a cell. */ cell: { className?: string | ((data: DataItem) => string); children: (data: DataItem, index?: number) => React.ReactNode; /** Optional style overrides for a cell. */ style?: StyleGeneric; }; /** Determines the static first column in mobile and also the column that will not be able to be removed in column customizations. */ mainColumn?: boolean; /** Used if the API requires a lowercase parameter to be passed in. */ lowerCaseParam?: SortColumnProps['lowerCaseParam']; /** Define the tooltip for a column. */ tooltip?: SortColumnProps['tooltip']; /** Class name for a column. */ className?: string; /** Prevent sorting for a column. */ noSort?: boolean; /** Column that has a single button. Used for display purposes in mobile. */ isButton?: boolean; /** Filter for a column. */ filter?: SortColumnProps['filter']; /** Style overrides for a column. */ style?: StyleGeneric; /** Adds a beta tag to the column header */ beta?: boolean; /** Optional badge props to render a badge. If provided, badgeProps takes precedence over beta. */ badgeProps?: BadgeProps; /** Optional tag props to render a tag. If provided, tagProps takes precedence over badgeProps. */ tagProps?: TagProps; }; export type StandardTableProps>, FilterOption> = PaginationProps & TableSortingProps & ExpandableAccordionProps & { /** * Array of data passed into the Table. * * **Row-level styling**: Each data item automatically includes `RowStylingProps`: * - Use `rowClassName` to apply CSS classes to all cells in a row (including checkboxes) * - Use `rowStyle` to apply inline styles to all cells in a row * - Row styles take precedence over active column highlighting */ data: DataItem[]; /** Table configuration that will handle column headers and rendering column children. */ config: ConfigItem[]; /** Optional flag to enable two line label display in the column headers */ twoLineLabel?: boolean; /** Unique key from our data objects. Used for `key` in our `map` functions. */ dataKey: keyof DataItem; /** Unique key from our nested data objects. Used for `key` in our `map` functions. */ nestedDataKey?: keyof DataItem; /** Flag to determine if the table has data available */ hasData: boolean; /** Flag to let the table know that the api call was successful */ successStatus: boolean; /** Flag to determine if the data is being fetched */ loading: boolean; /** Each table needs a unique id to be able to handle setting the sort values in localStorage correctly */ tableId: string; /** This is the text that is displayed when no data is available */ noDataFields: EmptyStateProps; /** We need to know if there is a custom child (such as a checkbox) so that we can correctly determine which column headers should have the sticky classes. This is necessary to have the correct styles in the header. */ headerChildren?: { jsx: React.ReactNode; count: number; }; /** * @description used when the table has nested rows of data. The nestedRows data is fetched * when the parent row is expanded. * * @required nested data (once fetched), method for fetching nested data, loading state for nested data * @optional array of initially expanded rows, method to remove nested data, override to hide the caret icon for expanding nested rows */ nestedRowProps?: { /** Method to fetch nested data. The method should accept the parent row key and should add returned data to the nestedData object. */ getNestedData: (key: DataItem[keyof DataItem]) => void; /** Boolean value to indicate if the selected nested data has been fetched. */ nestedLoading: { [key: string]: boolean; }; /** Nested data object. The key should be the parent row key to identify where the nested data should be displayed. Nested rows also support RowStylingProps. */ nestedData: { [key: string]: DataItem[]; }; /** Optional: Method to remove nested data. Method accepts a key and should remove the nested data for that key from the nestedData object. */ removeNestedData?: (key: DataItem[keyof DataItem]) => void; /** Optional: Override if the nested rows expand/collapse caret icon should appear (default is always show) */ showCaret?: (data: DataItem) => boolean; /** Optional: Array of Keys of Nested Rows to be expanded initially */ initiallyExpandedRows?: DataItem[keyof DataItem][]; /** Unique key used to identify the nested sub row data */ subRowDataKey?: keyof DataItem; /** When true, nested rows show checkboxes (hasCheckboxes still applies to parent rows). Defaults to false when omitted. */ showCheckboxes?: boolean; }; customColumnProps?: CustomizeTableColumnsProps; /** This value allows opt-in to the checkAll / checkAllLoaded experience. (default: false) */ enableCheckAll?: boolean; /** This value allows the checkAll to be shown, but in a disabled state */ disableCheckAll?: boolean; /** When true, the header "select all" checkbox is hidden */ hideCheckAll?: boolean; /** The total number of options to be included in the table when using checkboxes; if not provided, it will default to the PageHeaderProps.header.value if it exists */ totalCheckboxOptions?: number | null; /** To include checkboxes for selection as the first column of the table */ hasCheckboxes?: boolean; /** Optionally have an array of options when checkboxes are enabled */ checkboxSelectOptions?: SelectDisplayProps; /** This is a check to determine if any checkboxes should be disabled */ disableCheckboxes?: (data: DataItem) => boolean; /** The table needs to know which columns and rows are sticky. This object is where we define that. */ stickyTableConfig?: StickyTableConfigType; /** You may define a set height for the table - optional */ customHeight?: number | string; /** You may define a set width for the table - optional */ customWidth?: number | string; /** If the table is next to another element, the computed width of the table will be incorrect. Use this to input the width of the element (including padding, margin, and other spacing) to have the correct width for the table. */ widthOffset?: number; /** Table filters that are currently in use. A table does not have to have filters, but if they do have filters, we need to know which are the active filters. */ /** @deprecated: Use tableHeaderProps instead */ activeFilters?: TableFilterProps['activeFilters']; /** Function to remove the currently active filters. */ /** @deprecated: Use tableHeaderProps instead */ removeFilters?: TableFilterProps['remove']; /** Override the breakpoint that switches the table from the MobileTable to Desktop table. */ largeMobileBreakpoint?: boolean; /** Unique key from our data objects to identify total row. Value should be boolean */ totalRowKey?: keyof DataItem; /** Callout when a checkbox is selected; provides an array of selected checkedbox items (including RowStylingProps) and the checkAll boolean (`true` if all items are selected) */ handleCheckedBoxes?: (checkedBoxes: DataItem[], checkAll?: boolean) => void; /** This is temporary fix until we refactor the standard table - reset selected checkedboxes list */ isResetCheckboxes?: boolean; /** Determine if/when the groups should be displayed, dynamic value */ showGroups?: boolean; /** To ensure that all checkboxes on the list are checked upon the initial rendering */ isDefaultCheckedAll?: boolean; /** Allows data to be grouped by a given criteria; Each list item determines the criteria by which to group by */ groups?: Array<{ /** The string value or react node to display in the group Header row */ groupHeader: string | ((count: number) => string) | React.ReactNode; /** Custom JSX to display info icon in the group Header row (groupHeader) */ tooltipContent?: TooltipProps['tooltipContent']; /** Determines the background color of the row (Default: grey) */ type?: GroupColorType; /** Method to determine if a data set belongs to the group */ check: (dataItem: DataItem, checkedBoxes?: DataItem[]) => boolean; /** boolean to add Clear button in the selection */ includeClearButton?: boolean; /** Function to perform the required action after clearing the selections */ clearCallout?: () => void; /** Custom JSX at the last column of the group header to replace clearButton */ customClearButton?: React.ReactNode; /** Adds an expand/collapse functionality to entire groups */ groupAccordion?: groupAccordionType; /** Optional prop to always show group regardless of checkbox state */ alwaysShowGroups?: boolean; }>; /** Mobile Table Only - this is an optional class name that is applied to the Main Column dropdown */ mainColumnClassName?: string; /** Shows a short list loading experience */ shortListLoading?: boolean; /** Prevents displaying the mobile version of the table */ noMobileView?: boolean; /** Table header configuration - this includes information about a table: header text and value, searching, CSV download, filtering, informational tooltips, and other configurations for a table. */ tableHeaderProps?: TableHeaderProps; /** Optional prop to add a test id to the StandardTable for QA testing */ qaTestId?: string; }; export type NestedRowPropsType>> = { /** data passed into the nested row (supports RowStylingProps) */ data: DataItem; /** Table configuration that will handle column headers and rendering column children. */ config: ConfigItem[]; /** Unique key from our nested data objects. Used for `key` in our `map` functions. */ nestedDataKey?: keyof DataItem; /** This gets passed down to SortColumn's 'active' prop */ sortBy?: SortColumnProps['active']; nestedRowProps?: { /** Function to get array of records which are associated with parent record */ getNestedData: (key: DataItem[keyof DataItem]) => void; /** Flag to determine if the nested data is being fetched */ nestedLoading: { [key: string]: boolean; }; /** Array of nested rows data for selected parent record. Nested rows also support RowStylingProps. */ nestedData: { [key: string]: (DataItem & RowStylingProps)[]; }; /** Unique key used to identify the nested sub row data */ subRowDataKey?: keyof DataItem; /** When true, nested rows show checkboxes. Defaults to false when omitted. */ showCheckboxes?: boolean; }; customColumnProps?: CustomizeTableColumnsProps; getRightStickyStyles?: ({ colNumFromRight }: { colNumFromRight: number; }) => { position: 'sticky'; right: number; zIndex: number; } | { position?: undefined; right?: undefined; zIndex?: undefined; }; getLeftStickyStyles?: ({ colNum }: { colNum: number; }) => { position: 'sticky'; left: number; zIndex: number; } | { position?: undefined; left?: undefined; zIndex?: undefined; }; /** Boolean value to determine if we want to show sticky column borders and shadow */ isRowScrollable?: boolean; /** The table needs to know which columns and rows are sticky. This object is where we define that. */ stickyTableConfig?: StickyTableConfigType; /** Unique key from our data objects to identify total row. Value should be boolean */ totalRowKey?: keyof DataItem; /** Selected row for showing the nested list */ selectedNestedRowData?: DataItem[keyof DataItem][]; showStickyClasses: boolean; stickyRightCount: number; /** When false (e.g. feature toggle on + no checkboxes), parent has no leading column; nested row must not render one either to avoid column shift */ hasLeadingColumn?: boolean; }; export type DesktopTableProps>, FilterOption> = Omit, 'tableId' | 'noDataFields'> & { localStorageName: string; totalRowKey: string; isGroupHeader?: boolean; }; export type GroupHeader = DataItem & { /** The string value or react node to display in the group Header row (groupHeader) */ groupHeader?: string | ((count: number) => string) | React.ReactNode; /** Custom JSX to display info icon in the group Header row (groupHeader) */ tooltipContent?: TooltipProps['tooltipContent']; /** The color of the group header row */ type?: GroupColorType; /** boolean to add Clear button in the selection */ includeClearButton?: boolean; /** Function to perform the required action after clearing the selections */ clearCallout?: () => void; /** indicates if the item has been selected by the user using a checkbox */ checked?: boolean; /** Custom JSX at the last column of the group header to replace clearButton */ customClearButton?: React.ReactNode; /** Boolean value; only added to Header rows */ isGroupHeader?: boolean; /** Toggle to display header details if header details exist */ displayHeaderData?: boolean; /** Custom JSX to display in the last column of the table */ lastColumn?: React.ReactNode; /** * Number to associate the group header with the right group; groups are identified in order * of appearance in the table (index + 1, so the first group is 1, the second is 2, etc.) */ groupNum?: number; /** Adds an expand/collapse functionality to entire groups */ groupAccordion?: groupAccordionType; /** Unique key to identify each group */ groupDataKey?: string; }; export {};