chore(console): add comments for table component (#5421)

packages/console/src/ds-components/Table/index.tsx

@@ -19,24 +19,56 @@ export type Props<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = {
+  /** The table data groups of the table. */
   rowGroups: Array<RowGroup<TFieldValues>>;
+  /** The table's column definitions. */
   columns: Array<Column<TFieldValues>>;
+  /**
+   * The key of the table row.
+   * It will be used as the unique identifier of the row data and is indexed by the field name of the data from the row group.
+   */
   rowIndexKey: TName;
+  /** The filter component that will be rendered on the top of the table. */
   filter?: ReactNode;
+  /** Determines whether the row has a hover effect or not. */
   isRowHoverEffectDisabled?: boolean;
+  /** The function to determine whether the row is clickable or not. */
   isRowClickable?: (row: TFieldValues) => boolean;
+  /** The function to handle the row click event. */
   rowClickHandler?: (row: TFieldValues) => void;
+  /** The function to customize the CSS className for the row. */
   rowClassName?: (row: TFieldValues, index: number) => string | undefined;
+  /** The CSS className for the table container. */
   className?: string;
+  /** The CSS className for the header table. */
   headerTableClassName?: string;
+  /** The CSS className for the body table wrapper. */
   bodyTableWrapperClassName?: string;
+  /**
+   * Determines whether the table is in the loading state or not.
+   * When the table is in the loading state, it will render the loading skeleton which is provided by the `loadingSkeleton` prop.
+   */
   isLoading?: boolean;
+  /**
+   * The pagination component props.
+   * If it's provided, the pagination component will be rendered on the bottom-right of the table.
+   */
   pagination?: PaginationProps;
+  /** The placeholder that will be rendered in the table when the table is empty. */
   placeholder?: ReactNode;
+  /** The loading skeleton that will be rendered in the table when the table is in the loading state. */
   loadingSkeleton?: ReactNode;
+  /**
+   * The error message that will be rendered in the table when the table has an error.
+   * If it's provided, the table will render the error message instead of the table data.
+   */
   errorMessage?: string;
   /** The inline style table that is usually embedded in other card containers, has rounded-corner border */
   hasBorder?: boolean;
+  /**
+   * The retry button handler for the table.
+   * When the table has an error, there will be a retry button inside the table, this handler will be called when the retry button is clicked.
+   */
   onRetry?: () => void;
   /** A footer that will be rendered on the bottom-left of the table. */
   footer?: ReactNode;

packages/console/src/ds-components/Table/types.ts

@@ -2,17 +2,69 @@ import type { Key, ReactNode } from 'react';
 import type { FieldValues } from 'react-hook-form';
 
 export type Column<TFieldValues extends FieldValues = FieldValues> = {
+  /** The title of the column. It will be rendered as the column name of the table column. */
   title: ReactNode;
+  /** The key of the data for the table data cell in the column. It will be used as the unique identifier. */
   dataIndex: string;
+  /**
+   * The render function of the table data cell in the column. It will be used to render the content of the cell by the row data.
+   * @param row the row data
+   * @param rowIndex the index of the row data in the row group
+   * @returns the content of the cell
+   */
   render: (row: TFieldValues, rowIndex: number) => ReactNode;
+  /**
+   * The column span value for the table data cell of the column.
+   * This value is used to control the width of the column.
+   */
   colSpan?: number;
+  /** The CSS className for the rendered table data cell in the column. */
   className?: string;
 };
 
+/**
+ * Table row group
+ *
+ * Table row data needs in a grouped, and will be rendered as a separate section in the table.
+ * If the row data group has a label, the label it will be rendered as the title of the section.
+ */
 export type RowGroup<TFieldValues extends FieldValues = FieldValues> = {
+  /**
+   * The key of the row group. It will be used as the unique identifier of the row group.
+   */
   key: Key;
+  /**
+   * The label of the group. It's the title of the group section if it's provided, and will be rendered a separate row in the table.
+   * ```jsx
+   * <tr>
+   *   <td>
+   *     {label}
+   *   </td>
+   * </tr>
+   * ```
+   */
   label?: ReactNode;
+  /**
+   * The CSS className for the separate group label row.
+   * ```jsx
+   * <tr className={labelRowClassName}>
+   *   <td className={labelClassName}>
+   *     {label}
+   *   </td>
+   * </tr>
+   * ```
+   */
   labelRowClassName?: string;
+  /**
+   * The CSS className for the label content.
+   * ```jsx
+   * <tr className={labelRowClassName}>
+   *   <td className={labelClassName}>
+   *     {label}
+   *   </td>
+   * </tr>
+   * ```
+   */
   labelClassName?: string;
   data?: TFieldValues[];
 };