@paprika/data-field

@paprika/data-field

Description

Field Types package is a set of components that help the Table and DataGrid to enhance the cell property to display different value in a ease manner

Installation

yarn add @paprika/data-field

or with npm:

npm install @paprika/data-field

Props

DataField

Prop	Type	required	default	Description
children	node	true	-

DataField.Numeric

Prop	Type	required	default	Description
value	[string,number]	true	-	The value to be localize
align	[ DataField.types.align.LEFT, DataField.types.align.RIGHT, DataField.types.align.CENTER]	false	DataField.types.align.RIGHT	Text alignment for the number default is right
intl	object	false	{}	The window.Intl.numberFormat option object https://mzl.la/3iW0ioQ
currency	string	false	null	When passing a currency string as 'EUR' or 'JPY' will display the correct currency symbol, is a short version instead of using the intl prop.
color	string	false	null	Add a color to the number, accept any kind of html color #F60, rgba(100,100,100, 0.5), etc.
hasOnlyRadixSeparator	bool	false	true	Controls if the number should be display with full delimiter or only the decimal separators

#DataField

DataField component helps during your Table or DataGrid implementation providing you with small components that encapsulate specific stylings for specific types that adapts to our Design System.

Uses

Once the component is imported:

import DataField from "@paprika/data-field";

You can make use of different Fields in the following way:

/**
 *  Using the Numeric field. The following applies either for the <Table /> or <DataGrid /> component
 */

import DataField from "@paprika/data-field";

function App() {
  return <DataField.Numeric align={DataField.types.align.LEFT} currency="USD" number={1240} />;
}

Links

• Storybook Showcase
• GitHub source code
• Create GitHub issue
• CHANGELOG