Ptg-react-ui NPM

Getting Started with ptg-react

Install the package

npm i ptg-react

Components available in this package

Calendar
Import calendar
import {PtgUiCalendar} from 'ptg-react;
Properties
The " ? " represents here that this property is optional
onChange?: any;
date?: any;
selected?: any;
className: any;
startDate?: any;
endDate?: any;
disabled?: boolean;
startRef?: any;
onKeyDown?: any;
accessKey?: string;
Charts
- D3 Charts
  Import charts
  import { PtgUiD3Line, PtgUiD3Bar, PtgUiD3Pie } from "ptg-react";
  1. Bar chart
    Properties
    The " ? " represents here that this property is optional. Data array must contain color property for its color in chart.
    data?:any,
    height?:any,
    width?:any,
    source?:any,
    title?:any,
    x_title:string,
    y_title:string,
    start?:any,
    end?:any
  2. Line chart
    Properties
    The " ? " represents here that this property is optional.
    data:any,
    height:any,
    width:any,
  3. Pie chart
    Properties
    The " ? " represents here that this property is optional.
    data: any;
    height?: any;
    width?: any;
    innerRadius?: any;
    outerRadius?: any;
    colorsArray?: any;
- HighCharts
  - 2D
    Import charts
    import { PtgUiColumn, PtgUiPie,PtgUiLine,PtgUiLineBar,PtgUiStackedColumn } from 'ptg-react';
    1. Column chart
      Properties
      The " ? " represents here that this property is optional.
      remainingOptions:any,
      highcharts?:any,
      title?:any,
      data?:any
    2. Line chart
      Properties
      The " ? " represents here that this property is optional.
      remainingOptions:any,
      highcharts?:any,
      title?:any,
      data?:any
    3. Linebar chart
      Properties
      The " ? " represents here that this property is optional.
      remainingOptions:any,
      highcharts?:any,
      title?:any,
      subtitle?:any,
      categories?:any
    4. Pie chart
      Properties
      The " ? " represents here that this property is optional.
      remainingOptions:any,
      highcharts?:any,
      title?:any,
      data?:any
    5. Stacked Column chart
      Properties
      The " ? " represents here that this property is optional.
      remainingOptions:any,
      highcharts?:any,
      title?:any,
      data?:any,
      yTitle?:any,
      categories?:any
  - 3D
    Import charts
    import { PtgUiColumn, PtgUiPie,PtgUiLine,PtgUiLineBar,PtgUiStackedColumn} from 'ptg-react';
    1. Column chart
      Properties
      The " ? " represents here that this property is optional.
      remainingOptions:any,
      highcharts?:any,
      title?:any,
      data?:any,
      categories?:any,
      xTitle?:any,
      yTitle?:any
    2. Line chart
      Properties
      The " ? " represents here that this property is optional.
      remainingOptions:any,
      highcharts?:any,
      title?:any,
      data?:any,
      categories?:any,
      xTitle?:any,
      yTitle?:any
    3. Pie chart
      Properties
      The " ? " represents here that this property is optional.
      remainingOptions:any,
      highcharts?:any,
      title?:any,
      data?:any,
      categories?:any,
      seriesName?:any,
Data Table
- Ag grid
  Import Ag Grid
  import { PtgUiAgGrid } from 'ptg-react'; Properties
  The " ? " represents here that this property is optional.
  data:any[],
  autoGroupColumnDef:any,
  columnDefs:any,
  defaultColDef:any,
  rowSelection?:string,
  groupSelectsChildren?:boolean,
  pagination?:boolean,
  paginationPageSize?:number,
  customPagination?: boolean,
  domLayout?:any
- React table
  Import React Table
  import { PtgUiReactTable } from 'ptg-react'; Properties
  The " ? " represents here that this property is optional.
  data?:any;
  columns?:any;
Download file Import Download
import { PtgUiDownload } from 'ptg-react'; Properties
The " ? " represents here that this property is optional.
columns?: any;
dataToDownload?: any;
allowFileTypes?: any;

Formats
1. PDF
2. Word
3. Image
4. Excel

Indeterminate Checkbox Import Indeterminate Checkbox
import { PtgUiIndeterminateCheckbox } from 'ptg-react'; Properties
items:any;
Input
Import input
import { PtgUiInput } from 'ptg-react'; Properties
The " ? " represents here that this property is optional.
type: string;
value?: any;
onChange?: any;
placeholder?: string;
disabled?: boolean;
required?: boolean;
className?: string;
inputsize?: string;
name?: string;
onBlur?: any;
ref?: any;
maxlength?: any;
onKeyUp?: any;
id?: string;
loader
Import Loader
import { PtgUiLoading } from 'ptg-react';
Multi Select
Import Multi Select
import { PtgUiMultiSelectbox } from 'ptg-react';
Properties
The " ? " represents here that this property is optional.
name?: string,
selectedValues?: any,
id?: string,
className?:string,
list: { value: any, label: any }[],
showCheckbox?: boolean,
placeholder?:string
singleSelect?: boolean,
onSelect?:any,
Radio
Import Radio
import { PtgUiRadio } from 'ptg-react';
Properties
The " ? " represents here that this property is optional.
name?: string;
value?: string;
id?: string;
htmlFor?: string;
onChange?: (event: React.ChangeEvent) => void;
list: { id: string; name: string; value: string }[];
children?: React.ReactNode;
checked?: boolean;
accessKey?: string;
Select
Import Select
import { PtgUiSelect } from 'ptg-react';
Properties
The " ? " represents here that this property is optional.
name?: string;
value?: string;
id?: string;
className?: string;
list: { label: any; value: any }[];
onBlur?: any;
htmlFor?: string;
onChange?: (event: React.ChangeEvent) => void;
Text Area
Import Text Area
import { PtgUiTextArea } from 'ptg-react';
Properties
The " ? " represents here that this property is optional.
value?: any;
onChange?: any;
placeholder?: string;
disabled?: boolean;
hasError?: boolean;
onFocus?: any;
dataTest?: string;
required?: boolean;
className?: string;
inputsize?: string;
name?: string;
onBlur?: any;
ref?: any;
rows?: any;
cols?: any;
form?: any;
maxlength?: any;
onKeyUp?: any;
id?: string;