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