ise-react-mui/README.md

Made with create-react-library

# ise-react-mui

[![NPM](https://img.shields.io/npm/v/ise-react-mui.svg)](https://www.npmjs.com/package/ise-react-mui) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save ise-react-mui
```

## Usage Grid

```tsx
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

```tsx

<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](https://github.com/ise-it-team)