@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