[Table] Move prop docs into IntelliSense (#21530)

docs/pages/api-docs/table-container.md

@@ -28,7 +28,7 @@ The `MuiTableContainer` name can be used for providing [default props](/customiz
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The table itself, normally `<Table />` |
+| <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The table itself, normally `<Table />`. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'div'</span> | The component used for the root node. Either a string to use a HTML element or a component. |
 

docs/pages/api-docs/table-pagination.md

@@ -41,7 +41,7 @@ The `MuiTablePagination` name can be used for providing [default props](/customi
 | <span class="prop-name">onChangeRowsPerPage</span> | <span class="prop-type">func</span> |  | Callback fired when the number of rows per page is changed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback. |
 | <span class="prop-name required">page<abbr title="required">*</abbr></span> | <span class="prop-type">number</span> |  | The zero-based index of the current page. |
 | <span class="prop-name required">rowsPerPage<abbr title="required">*</abbr></span> | <span class="prop-type">number</span> |  | The number of rows per page. |
-| <span class="prop-name">rowsPerPageOptions</span> | <span class="prop-type">array</span> | <span class="prop-default">[10, 25, 50, 100]</span> | Customizes the options of the rows per page select field. If less than two options are available, no select field will be displayed. |
+| <span class="prop-name">rowsPerPageOptions</span> | <span class="prop-type">Array&lt;number<br>&#124;&nbsp;{ label: string, value: number }&gt;</span> | <span class="prop-default">[10, 25, 50, 100]</span> | Customizes the options of the rows per page select field. If less than two options are available, no select field will be displayed. |
 | <span class="prop-name">SelectProps</span> | <span class="prop-type">object</span> | <span class="prop-default">{}</span> | Props applied to the rows per page [`Select`](/api/select/) element. |
 | <span class="prop-name">showFirstButton</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, show the first-page button. |
 | <span class="prop-name">showLastButton</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, show the last-page button. |

docs/pages/api-docs/table.md

@@ -28,11 +28,11 @@ The `MuiTable` name can be used for providing [default props](/customization/glo
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span class="prop-name required">children<abbr title="required">*</abbr></span> | <span class="prop-type">node</span> |  | The content of the table, normally `TableHead` and `TableBody`. |
+| <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The content of the table, normally `TableHead` and `TableBody`. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'table'</span> | The component used for the root node. Either a string to use a HTML element or a component. |
-| <span class="prop-name">padding</span> | <span class="prop-type">'default'<br>&#124;&nbsp;'checkbox'<br>&#124;&nbsp;'none'</span> | <span class="prop-default">'default'</span> | Allows TableCells to inherit padding of the Table. |
-| <span class="prop-name">size</span> | <span class="prop-type">'small'<br>&#124;&nbsp;'medium'</span> | <span class="prop-default">'medium'</span> | Allows TableCells to inherit size of the Table. |
+| <span class="prop-name">padding</span> | <span class="prop-type">'checkbox'<br>&#124;&nbsp;'default'<br>&#124;&nbsp;'none'</span> | <span class="prop-default">'default'</span> | Allows TableCells to inherit padding of the Table. |
+| <span class="prop-name">size</span> | <span class="prop-type">'medium'<br>&#124;&nbsp;'small'</span> | <span class="prop-default">'medium'</span> | Allows TableCells to inherit size of the Table. |
 | <span class="prop-name">stickyHeader</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Set the header sticky.<br>⚠️ It doesn't work with IE 11. |
 
 The `ref` is forwarded to the root element.

packages/material-ui/src/Table/Table.d.ts

@@ -7,8 +7,23 @@ export type Size = 'small' | 'medium';
 
 export interface TableTypeMap<P = {}, D extends React.ElementType = 'table'> {
   props: P & {
+    /**
+     * The content of the table, normally `TableHead` and `TableBody`.
+     */
+    children?: React.ReactNode;
+    /**
+     * Allows TableCells to inherit padding of the Table.
+     */
     padding?: Padding;
+    /**
+     * Allows TableCells to inherit size of the Table.
+     */
     size?: Size;
+    /**
+     * Set the header sticky.
+     *
+     * ⚠️ It doesn't work with IE 11.
+     */
     stickyHeader?: boolean;
   };
   defaultComponent: D;

packages/material-ui/src/Table/Table.js

@@ -56,15 +56,19 @@ const Table = React.forwardRef(function Table(props, ref) {
 });
 
 Table.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
   /**
    * The content of the table, normally `TableHead` and `TableBody`.
    */
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
   /**
    * Override or extend the styles applied to the component.
    * See [CSS API](#css) below for more details.
    */
-  classes: PropTypes.object.isRequired,
+  classes: PropTypes.object,
   /**
    * @ignore
    */
@@ -77,11 +81,11 @@ Table.propTypes = {
   /**
    * Allows TableCells to inherit padding of the Table.
    */
-  padding: PropTypes.oneOf(['default', 'checkbox', 'none']),
+  padding: PropTypes.oneOf(['checkbox', 'default', 'none']),
   /**
    * Allows TableCells to inherit size of the Table.
    */
-  size: PropTypes.oneOf(['small', 'medium']),
+  size: PropTypes.oneOf(['medium', 'small']),
   /**
    * Set the header sticky.
    *

packages/material-ui/src/TableBody/TableBody.d.ts

@@ -2,7 +2,12 @@ import * as React from 'react';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
 export interface TableBodyTypeMap<P = {}, D extends React.ElementType = 'tbody'> {
-  props: P;
+  props: P & {
+    /**
+     * The content of the component, normally `TableRow`.
+     */
+    children?: React.ReactNode;
+  };
   defaultComponent: D;
   classKey: TableBodyClassKey;
 }

packages/material-ui/src/TableBody/TableBody.js

@@ -33,6 +33,10 @@ const TableBody = React.forwardRef(function TableBody(props, ref) {
 });
 
 TableBody.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
   /**
    * The content of the component, normally `TableRow`.
    */
@@ -41,7 +45,7 @@ TableBody.propTypes = {
    * Override or extend the styles applied to the component.
    * See [CSS API](#css) below for more details.
    */
-  classes: PropTypes.object.isRequired,
+  classes: PropTypes.object,
   /**
    * @ignore
    */

packages/material-ui/src/TableContainer/TableContainer.d.ts

@@ -2,7 +2,12 @@ import * as React from 'react';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
 export interface TableContainerTypeMap<P = {}, D extends React.ElementType = 'div'> {
-  props: P;
+  props: P & {
+    /**
+     * The table itself, normally `<Table />`.
+     */
+    children?: React.ReactNode;
+  };
   defaultComponent: D;
   classKey: TableContainerClassKey;
 }

packages/material-ui/src/TableContainer/TableContainer.js

@@ -18,15 +18,19 @@ const TableContainer = React.forwardRef(function TableContainer(props, ref) {
 });
 
 TableContainer.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
   /**
-   * The table itself, normally `<Table />`
+   * The table itself, normally `<Table />`.
    */
   children: PropTypes.node,
   /**
    * Override or extend the styles applied to the component.
    * See [CSS API](#css) below for more details.
    */
-  classes: PropTypes.object.isRequired,
+  classes: PropTypes.object,
   /**
    * @ignore
    */

packages/material-ui/src/TableFooter/TableFooter.d.ts

@@ -2,7 +2,12 @@ import * as React from 'react';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
 export interface TableFooterTypeMap<P = {}, D extends React.ElementType = 'tfoot'> {
-  props: P;
+  props: P & {
+    /**
+     * The content of the component, normally `TableRow`.
+     */
+    children?: React.ReactNode;
+  };
   defaultComponent: D;
   classKey: TableFooterClassKey;
 }

packages/material-ui/src/TableFooter/TableFooter.js

@@ -33,6 +33,10 @@ const TableFooter = React.forwardRef(function TableFooter(props, ref) {
 });
 
 TableFooter.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
   /**
    * The content of the component, normally `TableRow`.
    */
@@ -41,7 +45,7 @@ TableFooter.propTypes = {
    * Override or extend the styles applied to the component.
    * See [CSS API](#css) below for more details.
    */
-  classes: PropTypes.object.isRequired,
+  classes: PropTypes.object,
   /**
    * @ignore
    */

packages/material-ui/src/TableHead/TableHead.d.ts

@@ -2,7 +2,12 @@ import * as React from 'react';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
 export interface TableHeadTypeMap<P = {}, D extends React.ElementType = 'thead'> {
-  props: P;
+  props: P & {
+    /**
+     * The content of the component, normally `TableRow`.
+     */
+    children?: React.ReactNode;
+  };
   defaultComponent: D;
   classKey: TableHeadClassKey;
 }

packages/material-ui/src/TableHead/TableHead.js

@@ -33,6 +33,10 @@ const TableHead = React.forwardRef(function TableHead(props, ref) {
 });
 
 TableHead.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
   /**
    * The content of the component, normally `TableRow`.
    */
@@ -41,7 +45,7 @@ TableHead.propTypes = {
    * Override or extend the styles applied to the component.
    * See [CSS API](#css) below for more details.
    */
-  classes: PropTypes.object.isRequired,
+  classes: PropTypes.object,
   /**
    * @ignore
    */

packages/material-ui/src/TablePagination/TablePagination.d.ts

@@ -16,8 +16,20 @@ export interface LabelDisplayedRowsArgs {
 export interface TablePaginationTypeMap<P, D extends React.ElementType> {
   props: P &
     TablePaginationBaseProps & {
+      /**
+       * The component used for displaying the actions.
+       * Either a string to use a HTML element or a component.
+       */
       ActionsComponent?: React.ElementType<TablePaginationActionsProps>;
+      /**
+       * Props applied to the back arrow [`IconButton`](/api/icon-button/) component.
+       */
       backIconButtonProps?: Partial<IconButtonProps>;
+      /**
+       * The total number of rows.
+       *
+       * To enable server side pagination for an unknown number of items, provide -1.
+       */
       count: number;
       /**
        * Accepts a function which returns a string value that provides a user-friendly name for the current page.
@@ -28,14 +40,52 @@ export interface TablePaginationTypeMap<P, D extends React.ElementType> {
        * @returns {string}
        */
       getItemAriaLabel?: (type: 'first' | 'last' | 'next' | 'previous') => string;
+      /**
+       * Customize the displayed rows label. Invoked with a `{ from, to, count, page }`
+       * object.
+       *
+       * For localization purposes, you can use the provided [translations](/guides/localization/).
+       */
       labelDisplayedRows?: (paginationInfo: LabelDisplayedRowsArgs) => React.ReactNode;
+      /**
+       * Customize the rows per page label.
+       *
+       * For localization purposes, you can use the provided [translations](/guides/localization/).
+       */
       labelRowsPerPage?: React.ReactNode;
+      /**
+       * Props applied to the next arrow [`IconButton`](/api/icon-button/) element.
+       */
       nextIconButtonProps?: Partial<IconButtonProps>;
+      /**
+       * Callback fired when the page is changed.
+       *
+       * @param {object} event The event source of the callback.
+       * @param {number} page The page selected.
+       */
       onChangePage: (event: React.MouseEvent<HTMLButtonElement> | null, page: number) => void;
+      /**
+       * Callback fired when the number of rows per page is changed.
+       *
+       * @param {object} event The event source of the callback.
+       */
       onChangeRowsPerPage?: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
+      /**
+       * The zero-based index of the current page.
+       */
       page: number;
+      /**
+       * The number of rows per page.
+       */
       rowsPerPage: number;
+      /**
+       * Customizes the options of the rows per page select field. If less than two options are
+       * available, no select field will be displayed.
+       */
       rowsPerPageOptions?: Array<number | { value: number; label: string }>;
+      /**
+       * Props applied to the rows per page [`Select`](/api/select/) element.
+       */
       SelectProps?: Partial<SelectProps>;
       /**
        * If `true`, show the first-page button.
@@ -78,7 +128,7 @@ export type TablePaginationClassKey =
   | 'selectIcon'
   | 'actions';
 
-export type TablePaginationBaseProps = Omit<TableCellProps, 'classes' | 'component'>;
+export type TablePaginationBaseProps = Omit<TableCellProps, 'classes' | 'component' | 'children'>;
 
 export type TablePaginationProps<
   D extends React.ElementType = React.ComponentType<TablePaginationBaseProps>,

packages/material-ui/src/TablePagination/TablePagination.js

@@ -120,6 +120,7 @@ const TablePagination = React.forwardRef(function TablePagination(props, ref) {
             {labelRowsPerPage}
           </Typography>
         )}
+
         {rowsPerPageOptions.length > 1 && (
           <Select
             classes={{
@@ -144,6 +145,7 @@ const TablePagination = React.forwardRef(function TablePagination(props, ref) {
             ))}
           </Select>
         )}
+
         <Typography color="inherit" variant="body2" className={classes.caption}>
           {labelDisplayedRows({
             from: count === 0 ? 0 : page * rowsPerPage + 1,
@@ -170,6 +172,10 @@ const TablePagination = React.forwardRef(function TablePagination(props, ref) {
 });
 
 TablePagination.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
   /**
    * The component used for displaying the actions.
    * Either a string to use a HTML element or a component.
@@ -183,7 +189,7 @@ TablePagination.propTypes = {
    * Override or extend the styles applied to the component.
    * See [CSS API](#css) below for more details.
    */
-  classes: PropTypes.object.isRequired,
+  classes: PropTypes.object,
   /**
    * @ignore
    */
@@ -269,7 +275,15 @@ TablePagination.propTypes = {
    * Customizes the options of the rows per page select field. If less than two options are
    * available, no select field will be displayed.
    */
-  rowsPerPageOptions: PropTypes.array,
+  rowsPerPageOptions: PropTypes.arrayOf(
+    PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.shape({
+        label: PropTypes.string.isRequired,
+        value: PropTypes.number.isRequired,
+      }),
+    ]),
+  ),
   /**
    * Props applied to the rows per page [`Select`](/api/select/) element.
    */

packages/material-ui/src/TableRow/TableRow.d.ts

@@ -3,7 +3,17 @@ import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
 export interface TableRowTypeMap<P = {}, D extends React.ElementType = 'tr'> {
   props: P & {
+    /**
+     * Should be valid <tr> children such as `TableCell`.
+     */
+    children?: React.ReactNode;
+    /**
+     * If `true`, the table row will shade on hover.
+     */
     hover?: boolean;
+    /**
+     * If `true`, the table row will have the selected shading.
+     */
     selected?: boolean;
   };
   defaultComponent: D;