react-angrid v2.0.3

react-angrid

react-angrid is a free and light component in react for data grid with supporting:

• type script
• paging
• sortable
• rtl
• other language

Installation

react-angrid requires react "^18.2.0", react-dome "^18.2.0" to run.

npm i react-angrid --save

Usage

Minimal Usage:

import {Angrid} from "rect-angrid";
...
  const columns = [
    {
      field: "fullname",
      headerName: "First & last Name",
      description: "name of user",
      width: 50,
    },
    {
      field: "age",
      headerName: "Age",
      description: "age of user",
      width: 50,
    },
    .
    .
    .
    ];
    const rows = [
    {
      key:"1",
      fullname:"shahrooz bazrafshan"
    },
    {
        
    }
    ];
      <AnGrid
        columns={columns}
        rows={rows}
        showRowNumber={true}
        disabledPaging={true}
      />
...

Advanced Usage:

    import {Angrid} from "rect-angrid";

    const columns = [
    {
      field: "fullname",
      headerName: "First & last Name",
      description: "name of user",
      width: 50,
    },
    {
      field: "age",
      headerName: "Age",
      description: "age of user",
      width: 50,
      renderCell:(info)=><strong>Age is : {info.data.age}</strong>
    },
    .
    .
    .
    ];
    ...
    //some required states
    const [loading, setLoading] = useState(false);
    const [rows, setRows] = useState([]);
    const [filter, setFilter] = useState({
        pageSize: 4,
        pageNumber: 1,
    });
    const [totalCount, setTotalCount] = useState(3);
  
    let active = true;
    const _delete = (data) => {
    setRows(rows.filter(x => x.userId !== data.userId))
  }
  
    const _fetchData = async () => {
    console.log('=== fetch data');
    if (!active) return;
    //mock api, you can call your api then set data to table like commented line below
    return new Promise((resolve) => {
      setLoading(true);
      setTimeout(() => {
          setRows(data);// SetRows, note that data comes from api and must be array of objects
        setTotalCount(7);//=== set total page size for pagination part
        resolve();
        setLoading(false);
      }, 2000);
    });
  }

  useEffect(() => {
    _fetchData();
    return () => {
      active = false;
    }
  }, [filter]);
    ...
      <AnGrid
        loading={loading}
        columns={columns}
        rows={rows}
        pageSize={filter.pageSize}
        pageNumber={filter.pageNumber}
        totalCount={totalCount}
        onPageChange={_handlePageChange}
        theme="dark"
        minHeight={300}
        emptyList={<strong>There Is No Info</strong>}
      />

Props

• columns: must be array of object like:

     [{
       field: ,//name of property that in data must be shown(string)
       headerName: ,the string that shows in header.(string)
       description: ,//tooltip string
       width: ,//column width(int),
       sortable:,//indicate that by clicking on culmn it can b sorted or not(bool)
       renderCell:(rowInfo)=>{return xxx;}//an optional function that returns a component for each cell, it recieve an object that conatins row data,if this be defined, then the return component of it be shown in each column cell,
       cellClass:an optional function that recieve data and returns a class object to be set on each row cells
     },
     .
     .
     .
     ]

- **rows:** must be array of object that contains field property to be shown, and each row must ahve a unique key
- **loading:** toggle loader overlay when fetching data
- **showRowNumber:** if true append a row number as first column(bool,default is false)
- **pageSize:** the page size of data, you can set it after api fetch(int)
- **pageNumber:** the page Size of data,you can set it after api fetch(int)
- **totalCount:** total count of data rows,you can set it after api fetch(int)
- **onPageChange:** this is a function that triggers after changeing a page number in component and gives it new page number as parameter,you can use to call api and set new data
- **strings:** an object of used strings that can be change in other languages:

{ notFound:'There Is No Data', indexTitle:'Row Number', pageNumber:'Page Number' }

- **emptyList:** a component that renred if rows length is zero
- **minHeight:** minimum height of component(int, default 300px)
- **theme:** theme for component(string,default is dark)
- **customPagination:** if exist, the component show up instead od default pagination
 
##### Todos

 - Add Responsive configuration
 - Add More Theme