Data Display

Grid display information in a way that’s easy to scan, so that users can look for patterns and insights. They can be embedded in primary content, such as cards.


Install

// with npm
npm install @itsy-ui/data

// with yarn
yarn add @itsy-ui/data


Usage

<Grid className="grid" schema={schema} />

const gridSchema = {
	"id": "food-items",
	"displayName": "Food items",
	"propertyDefinitions": {
		"id": {
			"id": "id",
			"displayName": "Dessert (100g serving)",
			"propertyType": "string",
			"ui:widget": "string"
		},
		"calories": {
			"id": "calories",
			"displayName": "Calories",
			"propertyType": "string",
			"ui:widget": "string"
		},
		"fat": {
			"id": "fat",
			"displayName": "Fat (g)",
			"propertyType": "string",
			"ui:widget": "string"
		},
		"carbs": {
			"id": "carbs",
			"displayName": "Carbs",
			"propertyType": "string",
			"ui:widget": "string"
		},
		"protein": {
			"id": "protein",
			"displayName": "Protein",
			"propertyType": "string",
			"ui:widget": "string"
		}
	}
};

const schema = {
	typeId: "food_items",
	gridSchema: gridSchema
};

<Grid className="grid" schema={schema} />


API

name type default description
className String additional class name of root node.
style Object {} Inline style object
schema Object {} Schema which contains information to be displayed.


Schema API’s

name type default description
typeId String Unique key for the grid schema
gridSchema Object {} Schema object which contains the grid column definitions and view attributes. Each column definition object in "propertyDefinition" contains following attributes,
  • id - key name of the column
  • propertyType - Type of the column (string/integer/datetime)
  • displayName - Header text of the column
"viewAttributes" contains following attributes,
  • orderBy - Default column to be sorted in grid
  • defaultFilter - Default filter to be applied in grid.
  • filterColumns - Searchable columns array
  • viewType - View type of the grid (Card/List/Table)
  • customActions - Custom actions to be included in each row
selectedRecords Array [] Set default selected records in grid.
rowSelectionMode number 1 0-None, 1- Single selection, 2- Multi selection
dataSource string Set custom datasource for form instead of using default one
emptyRecordMessage string No data Message to be displayed when no data present in grid
primaryColumn string Column key which act as a unique column in data


Compatibility

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Electron
Electron
Edge last 2 versions last 2 versions last 2 versions last 2 versions