shinra-table v0.1.7

SHINRA REACT GENERIC TABLE

A generic ReactJS table based on react-table-6 developed by shinra dev team.

Example

    import React, {useState} from "react"
    import ShinraTable from "shinra-table"

    export default function App(){

      const [selectedRow, setSelectedRow] = useState()
      const [data, setData] = useState({})
      const [currentPage, setCurrentPage] = useState(1)
      const [loading, setLoading] = useState(false)

      const columns: any = [
        {
            ID: 0,
            Header: "N°",
            sortable: true,
            selector: (row: any) => row.num,
            accessor: "number",
        },
        {
            ID: 2,
            Header: "Date",
            sortable: true,
            selector: (row: any) => row.date,
            accessor: "date",
        },
    ];

     useEffect(() => {
       // api call to get data based on the current page
    }, []);

    const handleRowClick = (e: any, row: any) => {
        setSelectedRow(row._original.id)
        // do what you want 
    }

    const handlePagination = (event: any, page: number) => {
        // handle pagination based on the page 
    };

      return <div>
      <ShinraTable
       columns={columns}
       data={data[currentPage]}
       onRowClick={handleRowClick}
       selectedRows={[selectedRow]}
       dataLength={data.length} 
       currentPage={currentPage}
       handlePagination={handlePagination}
       loading={loading}
      />
      </div>
    }

Props

  type TableProps = {
   data: any[],
   columns: any[],
   sortable?: boolean,
   showPageSizeOptions?: boolean,
   onChange?: any,
   onColClick?: any,
   onColContextMenu?: any,
   onRowClick?: any,
   onRowContextMenu?: any,
   selectedRows?: any[],
   showHideCols?: boolean,
   pageSize?: number,
   SubComponent?: (row: any) => JSX.Element,
   title?: string,
   expanded?: any,
   dataLength?: number,
   currentPage?: number,
   handlePagination?: (event: any, page: number) => void,
   loading?: boolean
}