[Docs, EuiBasicTable] Recreating props tables with props loader (#4125)

* Using prop loader to create props table for basic table

* Added CL

* Reverting criteria types

* More improvements

* More improvements

* Fixing DefaultItemAction prop table not showing

* Es lint fix

* Update src-docs/src/views/tables/basic/props.tsx

Co-authored-by: Greg Thompson <[email protected]>

* CL

Co-authored-by: Greg Thompson <[email protected]>

CHANGELOG.md

@@ -3,6 +3,7 @@
 - Added `minWidth` prop to `EuiButton` ([4056](https://github.com/elastic/eui/pull/4056))
 - Added `isSelected` prop to easily turn `EuiButton`, `EuiButtonEmpty`, and `EuiButtonIcon` into toggle buttons ([4056](https://github.com/elastic/eui/pull/4056))
 - Updated `EuiButtonGroup` props and render for better accessibility ([4056](https://github.com/elastic/eui/pull/4056))
+- Added more exports for `EuiBasicTable` types ([#4125](https://github.com/elastic/eui/pull/4125))
 
 **Breaking changes**
 

src-docs/src/views/tables/basic/basic_section.js

@@ -2,9 +2,22 @@ import React from 'react';
 import { GuideSectionTypes } from '../../../components';
 import { renderToHtml } from '../../../services';
 import { EuiCode } from '../../../../../src/components';
-import { propsInfo } from './props_info';
-
 import { Table } from './basic';
+import { EuiBasicTable } from '../../../../../src/components/basic_table';
+import {
+  Criteria,
+  CriteriaWithPagination,
+} from '!!prop-loader!../../../../../src/components/basic_table/basic_table';
+import { Pagination } from '!!prop-loader!../../../../../src/components/basic_table/pagination_bar';
+import {
+  EuiTableFieldDataColumnType,
+  EuiTableComputedColumnType,
+  EuiTableActionsColumnType,
+  EuiTableSelectionType,
+  EuiTableSortingType,
+} from '!!prop-loader!../../../../../src/components/basic_table/table_types';
+import { CustomItemAction } from '!!prop-loader!../../../../../src/components/basic_table/action_types';
+import { DefaultItemActionProps as DefaultItemAction } from './props';
 
 const source = require('!!raw-loader!./basic');
 const html = renderToHtml(Table);
@@ -81,6 +94,18 @@ export const section = {
       </ul>
     </div>
   ),
-  props: propsInfo,
+  props: {
+    EuiBasicTable,
+    Criteria,
+    CriteriaWithPagination,
+    Pagination,
+    EuiTableSortingType,
+    EuiTableSelectionType,
+    EuiTableFieldDataColumnType,
+    EuiTableComputedColumnType,
+    EuiTableActionsColumnType,
+    DefaultItemAction,
+    CustomItemAction,
+  },
   demo: <Table />,
 };

src-docs/src/views/tables/basic/props.tsx

@@ -0,0 +1,9 @@
+import React, { FunctionComponent } from 'react';
+import { DefaultItemAction } from '../../../../../src/components/basic_table/action_types';
+
+// Simulating the `item` generic
+type T = {};
+
+export const DefaultItemActionProps: FunctionComponent<DefaultItemAction<
+  T
+>> = () => <div />;

src/components/basic_table/action_types.ts

@@ -27,28 +27,52 @@ type IconFunction<T> = (item: T) => EuiIconType;
 type ButtonColor = EuiButtonIconColor | EuiButtonEmptyColor;
 type EuiButtonIconColorFunction<T> = (item: T) => ButtonColor;
 
-interface DefaultItemActionBase<T> {
+export interface DefaultItemActionBase<T> {
+  /**
+   * The display name of the action (will be the button caption)
+   */
   name: ReactNode | ((item: T) => ReactNode);
+  /**
+   * Describes the action (will be the button title)
+   */
   description: string;
+  /**
+   * A handler function to execute the action
+   */
   onClick?: (item: T) => void;
   href?: string;
   target?: string;
+  /**
+   * A callback function that determines whether the action is available
+   */
   available?: (item: T) => boolean;
+  /**
+   * A callback function that determines whether the action is enabled
+   */
   enabled?: (item: T) => boolean;
   isPrimary?: boolean;
   'data-test-subj'?: string;
 }
 
 export interface DefaultItemEmptyButtonAction<T>
   extends DefaultItemActionBase<T> {
+  /**
+   * The type of action
+   */
   type?: 'button';
   color?: EuiButtonEmptyColor | EuiButtonIconColorFunction<T>;
 }
 
 export interface DefaultItemIconButtonAction<T>
   extends DefaultItemActionBase<T> {
   type: 'icon';
+  /**
+   * Associates an icon with the button
+   */
   icon: EuiIconType | IconFunction<T>;
+  /**
+   * Defines the color of the button
+   */
   color?: EuiButtonIconColor | EuiButtonIconColorFunction<T>;
 }
 
@@ -58,8 +82,17 @@ export type DefaultItemAction<T> = ExclusiveUnion<
 >;
 
 export interface CustomItemAction<T> {
+  /**
+   * The function that renders the action. Note that the returned node is expected to have `onFocus` and `onBlur` functions
+   */
   render: (item: T, enabled: boolean) => ReactElement;
+  /**
+   * A callback that defines whether the action is available
+   */
   available?: (item: T) => boolean;
+  /**
+   * A callback that defines whether the action is enabled
+   */
   enabled?: (item: T) => boolean;
   isPrimary?: boolean;
 }

src/components/basic_table/basic_table.tsx

@@ -177,17 +177,26 @@ export type EuiBasicTableColumn<T> =
   | EuiTableActionsColumnType<T>;
 
 export interface Criteria<T> {
+  /**
+   * If the shown items represents a page (slice) into a bigger set, this describes this page
+   */
   page?: {
     index: number;
     size: number;
   };
+  /**
+   * If the shown items are sorted, this describes the sort criteria
+   */
   sort?: {
     field: keyof T;
     direction: Direction;
   };
 }
 
 export interface CriteriaWithPagination<T> extends Criteria<T> {
+  /**
+   * If the shown items represents a page (slice) into a bigger set, this describes this page
+   */
   page: {
     index: number;
     size: number;
@@ -198,24 +207,81 @@ type CellPropsCallback<T> = (item: T, column: EuiBasicTableColumn<T>) => object;
 type RowPropsCallback<T> = (item: T) => object;
 
 interface BasicTableProps<T> extends Omit<EuiTableProps, 'onChange'> {
+  /**
+   * Describes how to extract a unique ID from each item, used for selections & expanded rows
+   */
   itemId?: ItemId<T>;
+  /**
+   * Row expansion uses the itemId prop to identify each row
+   */
   itemIdToExpandedRowMap?: ItemIdToExpandedRowMap;
+  /**
+   * A list of objects to who in the table - an item per row
+   */
   items: T[];
+  /**
+   * Applied to `EuiTableRowCell`
+   */
   cellProps?: object | CellPropsCallback<T>;
+  /**
+   * An array of one of the objects: #EuiTableFieldDataColumnType, #EuiTableComputedColumnType or #EuiTableActionsColumnType.
+   */
   columns: Array<EuiBasicTableColumn<T>>;
+  /**
+   * Error message to display
+   */
   error?: string;
+  /**
+   * Describes the content of the table. If not specified, the caption will be "This table contains {itemCount} rows."
+   */
   tableCaption?: string;
+  /**
+   * Indicates which column should be used as the identifying cell in each row. Should match a "field" prop in FieldDataColumn
+   */
   rowHeader?: string;
   hasActions?: boolean;
   isExpandable?: boolean;
   isSelectable?: boolean;
+  /**
+   * Provides an infinite loading indicator
+   */
   loading?: boolean;
+  /**
+   * Message to display if table is empty
+   */
   noItemsMessage?: ReactNode;
+  /**
+   * Called whenever pagination or sorting changes (this property is required when either pagination or sorting is configured). See #Criteria or #CriteriaWithPagination
+   */
   onChange?: (criteria: Criteria<T>) => void;
+  /**
+   * Configures #Pagination
+   */
   pagination?: undefined;
+  /**
+   * If true, will convert table to cards in mobile view
+   */
+  responsive?: boolean;
+  /**
+   * Applied to `EuiTableRow`
+   */
   rowProps?: object | RowPropsCallback<T>;
+  /**
+   * Configures #EuiTableSelectionType
+   */
   selection?: EuiTableSelectionType<T>;
+  /**
+   * Configures #EuiTableSortingType
+   */
   sorting?: EuiTableSortingType<T>;
+  /**
+   * Sets the table-layout CSS property. Note that auto tableLayout prevents truncateText from working properly.
+   */
+  tableLayout?: 'fixed' | 'auto';
+  /**
+   * Applied to table cells => Any cell using render function will set this to be false, leading to unnecessary word breaks. Apply textOnly: true in order to ensure it breaks properly
+   */
+  textOnly?: boolean;
 }
 
 type BasicTableWithPaginationProps<T> = Omit<

src/components/basic_table/index.ts

@@ -21,6 +21,8 @@ export {
   EuiBasicTable,
   EuiBasicTableProps,
   EuiBasicTableColumn,
+  Criteria,
+  CriteriaWithPagination,
 } from './basic_table';
 export { EuiInMemoryTable, EuiInMemoryTableProps } from './in_memory_table';
 export {
@@ -32,3 +34,5 @@ export {
   EuiTableSelectionType,
   EuiTableSortingType,
 } from './table_types';
+export { Pagination } from './pagination_bar';
+export { DefaultItemAction, CustomItemAction } from './action_types';

src/components/basic_table/pagination_bar.tsx

@@ -26,10 +26,25 @@ import {
 } from '../table/table_pagination/table_pagination';
 
 export interface Pagination {
+  /**
+   * The current page (zero-based) index
+   */
   pageIndex: number;
+  /**
+   * The maximum number of items that can be shown in a single page
+   */
   pageSize: number;
+  /**
+   * The total number of items the page is "sliced" of
+   */
   totalItemCount: number;
+  /**
+   * Configures the page size dropdown options
+   */
   pageSizeOptions?: number[];
+  /**
+   * Hides the page size dropdown
+   */
   hidePerPageOptions?: boolean;
 }