antd-table-loader

import TableWithLoader from "antd-table-loader"

<TableWithLoader
  loader={{ rows: 2, component: "Wait.." }} // Remove me to see the Skeleton effect
  columns={columns} // Your classic antd columns
  dataSource={data} // Your data (Now you don't care if it is null)
/>

When the dataSource is null || undifined the table instead of showing No Data it renders the collumns and the data loading using Skeleton

API

ADDED PROPS

| Name | Type | Default Value | Description | | ------ | -------------------------------------------- | ----------------------------------------------------- | ----------------- | | loader | { rows: Number, component: React.Component } | {rows: 10, component: <Skeleton loading active /> } | The loader values |

Table Props

All Classic props from antd are availble -- AntD Table

| Name | Type | Default Value | Description | | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | bordered | boolean | false | Whether to show the table border | | columns | ColumnProps[] | - | Column configuration for the table | | dataSource | Record<string, any>[] | - | Data source for the table | | footer | () => ReactNode | - | Render the table footer | | loading | boolean | { delay?: number } | false | Whether to show a loading indicator | | locale | object | - | Customized text strings for table components, such as filter, emptyText, etc. See Locale for available options | | pagination | TablePaginationConfig | false | - | Pagination configuration for the table | | rowClassName | (record: T, index: number) => string | - | Set the row's className | | rowKey | string \| ((record: T, index: number) => React.Key) | - | Key property for each record in the dataSource | | rowSelection | TableRowSelection<T> | - | Configurations for row selection | | scroll | { x?: boolean \| number \| string \| TableScrollConfig; y?: boolean \| number \| string \| TableScrollConfig; } | - | Configurations for scrollable table | | showHeader | boolean | true | Whether to show the table header | | size | TableSize | 'default' | Size of the table | | summary | (data: T[]) => ReactNode | - | Render the summary row at the bottom of the table | | sticky | boolean | TableSticky | - | Configurations for sticky table headers and columns | | tableLayout | TableLayout | - | Specify the layout mode of the table | | title | () => ReactNode | - | Render the table title | | toolbarRender | (props: { columns: ColumnsType<T>; table: ComponentType<TableProps<T>>; }) => ReactNode | - | Customized toolbar render function | | onChange | (pagination: TablePaginationConfig, filters: Record<string, React.ReactText[] \| null>, sorter: SorterResult<T> \| SorterResult<T>[], extra: TableCurrentDataSource<T>) => void | - | Callback for table change events | | onExpand | (expanded: boolean, record: T) => void | - | Callback when expanding or collapsing a row | | onHeaderRow | (columns: ColumnsType<T>, index: number) => React.HTMLAttributes<HTMLElement> | - | Callback for the row attributes on the table header | | onRow | (record: T, index: number) => React.HTMLAttributes<HTMLElement> | - | Callback for the row attributes on each table row | | onRowClick | (record: T, index: number, event: Event) => void | - | Callback for row click event | | onRowDoubleClick | (record: T, index: number, event: Event) => void | - | Callback for row double click event | | onRowMouseEnter | (record: T, index: number, event: Event) => void | - | Callback for row mouse enter event | | onRowMouseLeave | (record: T, index: number, event: Event) => void | - | Callback for row mouse leave event | | components | { table?: any; header?: { wrapper?: any; row?: any; cell?: any; }; body?: { wrapper?: any; row?: any; cell?: any; }; } | - | Customized components for the table, header, body, etc. | | expandIcon | ((props: ExpandIconProps<T>) => ReactNode) \| ReactNode | - | Customized expand icon for each row | | expandIconColumnIndex | number | - | The index of the column that contains the expand icon | | expandable | ExpandableConfig<T> | - | Configurations for row expandable | | transformColumns | (columns: ColumnsType<T>) => ColumnsType<T> | - | Callback to transform the columns before rendering | | getPopupContainer | (triggerNode: HTMLElement) => HTMLElement | - | Return the mount node for Popover and Dropdown to attach to. | | indentSize | number | 15 | Indent size for each level of nested rows | | expandIconProps | { expandIcon?: (props: ExpandIconProps<T>) => ReactNode; prefixCls?: string; expanded?: boolean; record?: T; onExpand?: (expanded: boolean, record: T) => void; } | - | Props for the expand icon component |