🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
reactstrap-react-lib
Advanced tools
reactstrap-react-lib - npm Package Compare versions
Comparing version 1.1.10 to 1.1.11
| import { ReactElement } from 'react'; | ||
| import { PaginationProps } from "./Pagination"; | ||
| /** | ||
@@ -24,20 +25,2 @@ * This column of table whoose array has to be passed as defination of table by user | ||
| } | ||
| /** | ||
| * type of request method | ||
| */ | ||
| declare type method = "POST" | "GET"; | ||
| /** | ||
| * this is data to passed on change of page in server side pagination | ||
| */ | ||
| declare type PageData = []; | ||
| /** | ||
| * This is applicable to server side pagination | ||
| * uri string for api call | ||
| * querydata is data to passed | ||
| */ | ||
| declare type ApiRequest = [method: method, uri: string, queryData: {}]; | ||
| /** | ||
| * size of the page in client side pagination | ||
| */ | ||
| declare type PageSize = number; | ||
| export interface Props { | ||
@@ -48,6 +31,5 @@ columns: column[]; | ||
| sort: boolean; | ||
| pagination?: ["ServerSide", PageData | ApiRequest] | ["ClientSide", PageSize]; | ||
| pagination?: PaginationProps; | ||
| } | ||
| export default function index({ columns, data, filter, sort, pagination }: Props): ReactElement; | ||
| export {}; | ||
| //# sourceMappingURL=index.d.ts.map |
@@ -28,2 +28,3 @@ "use strict"; | ||
| const Table_1 = __importDefault(require("./Table")); | ||
| const Pagination_1 = require("./Pagination"); | ||
| function index({ columns, data, filter = "Both", sort = true, pagination }) { | ||
@@ -57,6 +58,7 @@ const [search, setSearch] = react_1.useState(""); | ||
| react_1.default.createElement(reactstrap_1.Input, { type: "text", value: search, onChange: (e) => SerachHandle(e), placeholder: "Search" })) : ""), | ||
| react_1.default.createElement(reactstrap_1.Col, { sm: 12, md: 6 })), | ||
| react_1.default.createElement(Table_1.default, { data: stData, columns: columns, filter: filter, sort: sort }))); | ||
| react_1.default.createElement(reactstrap_1.Col, { sm: 12, md: 6 }, | ||
| react_1.default.createElement(Pagination_1.Pagination, { pageFrom: pagination === null || pagination === void 0 ? void 0 : pagination.pageFrom, pageNo: pagination === null || pagination === void 0 ? void 0 : pagination.pageNo, firstPage: pagination === null || pagination === void 0 ? void 0 : pagination.firstPage, lastPage: pagination === null || pagination === void 0 ? void 0 : pagination.lastPage, nextPage: pagination === null || pagination === void 0 ? void 0 : pagination.nextPage, previousPage: pagination === null || pagination === void 0 ? void 0 : pagination.previousPage }))), | ||
| react_1.default.createElement(Table_1.default, { data: stData, columns: columns, filter: filter, sort: sort, pagination: pagination }))); | ||
| } | ||
| exports.default = index; | ||
| //# sourceMappingURL=index.js.map |
| { | ||
| "name": "reactstrap-react-lib", | ||
| "version": "1.1.10", | ||
| "version": "1.1.11", | ||
| "description": "This is a lib for react and next", | ||
@@ -5,0 +5,0 @@ "main": "lib/index.js", |
173
README.md
| # reactstrap-react-lib | ||
| This is build with typescript for using with react and reactstrap | ||
@@ -11,2 +10,95 @@ | ||
| ## React-Table | ||
| ### This is react-table following code shows the implimentation. | ||
| #### 1. columns prop has to be assigned the way shown in code below. This has following properties | ||
| 1. Header | ||
| 2. accessor | ||
| 3. Cell | ||
| 4. dataType | ||
| #### 2. Filter props accepts one othe follwign strings `Filter : "Global" | "Column" | "Both" | "None"` | ||
| #### 3. sort prop is boolean by defualt it is true | ||
| #### 4. dataTyle | ||
| | Prop | Possible Values | Description | | ||
| |--------------|----------------------------------------------------|---------------------------| | ||
| | columns | { Header accessor Cell dataType} |see code below | | ||
| | filter | "Global" or "Column" or "Both"or "None" |These are filter for table | | ||
| | sort | boolean |true means allows false no | | ||
| ```javascript | ||
| import React from 'react' | ||
| import {Row, Col, Container} from "reactstrap" | ||
| import {LinkP, Table} from "reactstrap-react-lib" | ||
| export default function table() { | ||
| const columns = [ | ||
| { | ||
| Header : "Id", | ||
| accessor : "id", | ||
| Cell : ({value})=> <LinkP link = {`/edit/${value}`} value = {value} />, | ||
| dataType : "number" | ||
| }, | ||
| { | ||
| Header : "Name", | ||
| accessor : "name", | ||
| dataType : "string" | ||
| },{ | ||
| Header : "Age", | ||
| accessor : "age", | ||
| dataType : "number" | ||
| } | ||
| ,{ | ||
| Header : "Date", | ||
| accessor : "date", | ||
| Cell : ({value})=> new Date(value).toDateString(), | ||
| dataType : "Date" | ||
| } | ||
| ] | ||
| const data = [ | ||
| { id : 1, name : "Varun", age : 53, date : "1969-09-29"}, | ||
| { id : 2, name : "Ramesh", age : 38, date : "1983-08-11"}, | ||
| { id : 3, name : "Jhon", age : 21, date : "1999-12-03"}, | ||
| { id : 4, name : "Pamela", age : 21, date : "1999-12-03"}, | ||
| { id : 5, name : "Irfan", age : 11, date : "1999-01-02"}, | ||
| ] | ||
| return ( | ||
| <> | ||
| <Container> | ||
| <Row> | ||
| <Col> | ||
| <Table | ||
| columns={columns} | ||
| data={data} | ||
| filter= "Both" | ||
| // sort = {false} | ||
| /> | ||
| </Col> | ||
| </Row> | ||
| </Container> | ||
| </> | ||
| ) | ||
| } | ||
| ``` | ||
| ## FormSubmit | ||
@@ -92,82 +184,3 @@ This is for submiting data to server. it has inbuilt submit button and also reset button. | ||
| ## React-Table | ||
| ### This is react-table following code shows the implimentation. | ||
| 1. columns prop has to be assigned the way shown in code below | ||
| 2. Filter props accepts one othe follwign strings `Filter : "Global" | "Column" | "Both" | "None"` | ||
| 3. sort prop is boolean by defualt it is true | ||
| ```javascript | ||
| import React from 'react' | ||
| import {Row, Col, Container} from "reactstrap" | ||
| import {LinkP, Table} from "reactstrap-react-lib" | ||
| export default function table() { | ||
| const columns = [ | ||
| { | ||
| Header : "Id", | ||
| accessor : "id", | ||
| Cell : ({value})=> <LinkP link = {`/edit/${value}`} value = {value} />, | ||
| dataType : "number" | ||
| }, | ||
| { | ||
| Header : "Name", | ||
| accessor : "name", | ||
| dataType : "string" | ||
| },{ | ||
| Header : "Age", | ||
| accessor : "age", | ||
| dataType : "number" | ||
| } | ||
| ,{ | ||
| Header : "Date", | ||
| accessor : "date", | ||
| Cell : ({value})=> new Date(value).toDateString(), | ||
| dataType : "Date" | ||
| } | ||
| ] | ||
| const data = [ | ||
| { id : 1, name : "umesh", age : 53, date : "1969-09-29"}, | ||
| { id : 2, name : "Ramya", age : 38, date : "1983-08-11"}, | ||
| { id : 3, name : "Pradyumna", age : 21, date : "1999-12-03"}, | ||
| { id : 4, name : "Prajnya", age : 21, date : "1999-12-03"}, | ||
| { id : 5, name : "Nischita", age : 11, date : "1999-01-02"}, | ||
| ] | ||
| return ( | ||
| <> | ||
| <Container> | ||
| <Row> | ||
| <Col> | ||
| <Table | ||
| columns={columns} | ||
| data={data} | ||
| filter= "Both" | ||
| // sort = {false} | ||
| /> | ||
| </Col> | ||
| </Row> | ||
| </Container> | ||
| </> | ||
| ) | ||
| } | ||
| ``` | ||
| ## AdminPanel / Sidebar | ||
@@ -174,0 +187,0 @@ ### This is for admin panel |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
189985
12.09%- Number of package files
107
9.18%- Lines of code
3100
8.01%- Number of lines in readme file
280
4.87%No dependency changes