ZCComponents

Intended to be sued with zerion-custom-portal-starter projects

installation

npm install zccomponents-react

Implementation

Version 1.0.2 added ZCTable and ZCRecordTable

        <ZCTable 
            data-testid='table1'
            error={error}
            title="iForm Pages"
            columns = { [
                {title:"ID", field: "id"},
                {title:"NAME", field:"name"}
            ]}
            data = {pages}/>

        <ZCRecordTable
            data-testid='table1'
            title=''
            isEditable={true}
            page_id={page_id}
            columns = { [
                {title:'Task', field:'task'},
                {title:'Creator', field:'task_creator' },
                {title:'Status', field:'status', filter:'="complete"', editable: 'never'},
                {title:"Photo", field:"photo", editable: 'never', render: r => <img alt={r.id} src={r.photo} style={{width: 100}}/> }
            ]}
        />

            <ZCCard 
                data-testid='card1'
                headerIconColor="success" 
                headerIconName="check_box" 
                title="Completed Tasks" 
                text="TEXT" 
                footerIconName="thumb_down" 
                footerText="1400" 
                footerOnClickHandler={handleOnClick}
                />

        <ZCChart
            data-testid='chart1'
            headerIconColor="danger"
            headerIconName="phone"
            title="Pie Chart"
            data={pieData}
            type="Pie"
            options={pieChart.options}
        />    
        <ZCChart
          data-testid='chart1'
          headerIconColor="danger"
          headerIconName="phone"
          title="Gauge"
          data={0.5}
          type="Gauge"
          gaugeProps={{
            id: "Unque-ID", //Each gauge require a unique chart id
            //textColor:"#000000",
            //colors:["#d32f2f", "#4caf50"] 
          }}
          />    

            <ZCPdfTable 
                data-testid='pdf1'
                columns = { [
                {title:"ID", field: "id", weighting: 0.2},
                {title:"Task", field:"task"},
                {title:"Creator", field:"task_creator"},
                {title:"Due Date", field:"date_to_be_compelted"}
                ]}
                data = {todoList}
            />