ise-react-mui

ise-react-mui

Install

npm install --save ise-react-mui

Usage Grid

import React, { Component } from 'react'

import MRT_Grid, { IMrt_RowActions } from 'ise-react-mui';
import 'ise-react-mui/dist/index.css'

const columns: MRT_ColumnDef<IRequestReportDto>[] = [
    
    {
      accessorKey: 'statusDesc', 
      header: 'آخرين وضعيت',     
      filterFn: 'fuzzy',
      size: 180,
    },
    {
      accessorKey: 'priorityDesc', 
      header: 'اولويت',
      filterVariant: 'select',
      filterFn: 'equals',
      filterSelectOptions: [
        { text: "اضطراري", value: "اضطراري" },
        { text: "عادي", value: "عادي" },
        { text: "بحراني", value: "بحراني" },
      ],
      enableColumnFilterModes: false,
      size: 160,
    },
    
    {
      accessorKey: 'destDesc', 
      header: 'مقصد',
      filterFn: 'fuzzy',
    },
  ];


const RequestReportList = () => {

    return (<Ise.MRT_Grid
      enablePinning
      enableRowActions
      enableRowSelection={false}
      enableSelectAll
      rowActions={[]}
      enableStickyFooter 
      stickyOffset={ 250}
      isLoading= {refetch}
      initialState_columnPinning_left  = {['statusDesc']}
      initialState_columnPinning_right = {['']}
      initialState_showColumnFilters = {false}
      columns={columns} 
      data={data} 
      onNeedData={setRefetch}
      onCustomFilterClick={() => {}}
      enableExcelExport
    />);
  }

Usage JalaliDatePicker

<JalaliDatePicker
  mode='dateTime' // "time" | "dateTime" | "date"
  error={formik.touched.needDateTime && Boolean(formik.errors.needDateTime)}
  helperText={formik.touched.needDateTime && formik.errors.needDateTime}
  name="needDateTime"
  disabled={readOnly}
  disablePast={true}
  fullWidth={true}
  label="تاريخ نياز"
  value={formik.values.needDateTime || ''}
  onChange={(value: any) => {
      formik.setFieldValue("needDateTime", value, true);
  }} 
/>

License

MIT © ise-it-team