Search code examples
reactjsantd

How to know all props keys of Table cell (ant design)


What are the keys of props object

render: (_, record) => {
        return {
          props: {...}, <------------ what can I add here? 
        };
},

Solution

  • Short Answer You can pass following keys in props: (Antd v4.23.2)

    key?: Key;
    className?: string;
    style?: React.CSSProperties;
    children?: React.ReactNode;
    column?: ColumnsType<RecordType>[number];
    colSpan?: number;
    rowSpan?: number;
    /** Only used for table header */
    hasSubColumns?: boolean;
    colStart?: number;
    colEnd?: number;
    

    TLDR

    If you know typescript then it can help you what type of props you can pass by hovering over the key (if you VSCode, it'll show the type for that key and by clicking on that key, it'll open the type definition file for that key).

    But if you are not familier with typescript then you can follow the example below.

    The following is type definition of render:

    render?: (value: any, record: RecordType, index: number) => React.ReactNode | RenderedCell<RecordType>;
    

    render is a function which returns either a ReactNode i.e. <p>Cell</p> or an object with following keys: props & children

    Type definition of RenderedCell

    export interface RenderedCell<RecordType> {
        props?: CellType<RecordType>;
        children?: React.ReactNode;
    }
    

    In props, you can pass the following keys:

    export interface CellType<RecordType> {
        key?: Key;
        className?: string;
        style?: React.CSSProperties;
        children?: React.ReactNode;
        column?: ColumnsType<RecordType>[number];
        colSpan?: number;
        rowSpan?: number;
        /** Only used for table header */
        hasSubColumns?: boolean;
        colStart?: number;
        colEnd?: number;
    }