Table Grid View

Renders a SwitchableView pre-configured with a Table view and a ThumbnailGrid view, the views share the same data, selection and actions

• Import

  import { TableGridView } from '@smile/haring-react-table';
• Extends SwitchableView
• Source View Source Code
• Package @smile/haring-react-table
• Storybook Storybook

Storybook Docs

Props

Name	Type	Default	Description
data *	Record<string, unknown>[]	-	Array of data objects, loaded in both views
gridProps *	ITableGridViewGridProps	-	Props for the grid view, field mapping values are used to convert any data object in data into Thumbnails
tableProp *	Omit<ITablePropsData, 'data'>	-	Props for the table view, omitting data
actions	IAction<ITableData|IThumbnailData>	-	Array of actions for both views, either individual row/thumbnail or mass actions
defaultView	'grid' | 'table'	-	Data view that will be active by default, either grid or table
...	-	-	Extends SwitchableView props, omitting views

ITableGridViewGridProps

Attribute	Type	Description
iconTypeFieldName	string	Name of field in the data object that will be mapped to the Thumbnail's iconType field
idFieldName	string	Name of field in the data object that will be mapped to the Thumbnail's id field
imageFieldName	string	Name of field in the data object that will be mapped to the Thumbnail's image field
labelFIeldName	string	Name of field in the data object that will be mapped to the Thumbnail's label field
...	-	Extends IThumbnailGridProps, omitting thumbnails