Antd-table-loader NPM

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