@paprika/data-field

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

Usage no npm install needed!

<script type="module">
  import paprikaDataField from 'https://cdn.skypack.dev/@paprika/data-field';
</script>

README

@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