npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-angrid

v2.0.3

Published

a react data grid with supporting for paging, sorting, rtl, etc

Downloads

9

Readme

react-angrid

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

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

sample

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