jb-grid 0.3.3 → 0.4.0

package/README.md

@@ -1,13 +1,26 @@
 # jb-grid
 
-> currently this component only available in react in full mode and web-component is only support parts of the data grid like pagination adn Row, Cell.
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/jb-grid)
+[![GitHub license](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://raw.githubusercontent.com/javadbat/jb-grid/main/LICENSE)
+[![NPM Version](https://img.shields.io/npm/v/jb-grid)](https://www.npmjs.com/package/jb-grid)
+![GitHub Created At](https://img.shields.io/github/created-at/javadbat/jb-grid)
 
-## using with JS frameworks
+> currently this component only available in react in full mode and web-component is only support parts of the data grid like pagination and Row, Cell.
 
-to use this component in **react** see [`jb-grid/react`](https://github.com/javadbat/jb-grid/tree/main/react);
+## Using With JS Frameworks
+- [<img src="https://img.shields.io/badge/React.js-jb--grid%2Freact-000.svg?logo=react&logoColor=%2361DAFB" height="30" />](https://github.com/javadbat/jb-grid/tree/main/react)
 
 ## Pagination
 for pagination we use `jb-pagination` web-component
+
+### jb-pagination API
+
+| name | type | description |
+| --- | --- | --- |
+| `pageIndex` | property | Current page index. |
+| `min` | property | Minimum page index. |
+| `max` | property | Maximum page index. |
+
 ```html
 <jb-pagination />
 ```
@@ -23,8 +36,16 @@ document.querySelector(`jb-pagination`).max = 10;
 document.querySelector(`jb-pagination`).min = 0;
 ```
 
+For the standalone pagination API and CSS variables, see [jb-pagination README](https://javadbat.github.io/design-system/?path=/docs/components-jbgrid-jbpagination-readme--docs).
+
+### jb-pagination CSS variables
+
+| CSS variable name | description |
+| --- | --- |
+| --jb-pagination-index-width | Width of each page index button. |
+
 ## Row & Cells
-`jb-row` is a row web-component that imply a grid template base on given config to below cells. it also accept expand row that you can open and close it.
+`jb-row` is a row web-component that imply a grid template based on given config to below cells. it also accept expand row that you can open and close it.
 
 here is a code overview:
 ```html
@@ -36,6 +57,7 @@ here is a code overview:
   <div slot="expand">expand window content</div>
 </jb-row>
 ```
+
 ### Set Column Size
 
 to set column size of the row you can pass a config that tell each column size. remember size is optional(default is `1fr`) but name is mandatory.
@@ -67,4 +89,13 @@ if you want to close and open by js you can use js mode:
 document.querySelector(`jb-row`).isOpen = true;
 // to close it
 document.querySelector(`jb-row`).isOpen = false;
+```
+
+### Ellipses Cell
+
+if your cell content is a long text need to get ellipses on overflow add `ellipsis` attribute to the `jb-cell` and `ellipsis="max line"` for multiline
+```html
+<jb-cell ellipsis>Put Long Text Here</jb-cell>
+<!-- Limited Browser Support for Multiline -->
+<jb-cell ellipsis="3">Put Long Text Here</jb-cell>
 ```

package/package.json

@@ -14,7 +14,7 @@
     "web component",
     "react component"
   ],
-  "version": "0.3.3",
+  "version": "0.4.0",
   "bugs": "https://github.com/javadbat/jb-grid/issues",
   "license": "MIT",
   "files": [

package/react/README.md

@@ -1,5 +1,10 @@
 # jb-grid React component
 
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/jb-grid)
+[![GitHub license](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://raw.githubusercontent.com/javadbat/jb-grid/main/LICENSE)
+[![NPM Version](https://img.shields.io/npm/v/jb-grid-react)](https://www.npmjs.com/package/jb-grid-react)
+![GitHub Created At](https://img.shields.io/github/created-at/javadbat/jb-grid)
+
 react mobx table grid with pagination, filtering and sorting functionality.
 
 - responsive
@@ -33,7 +38,7 @@ import {filterConfig} from './my-filter-config';
 ### config
 
 config is unique for each data table you want to show and contains information about columns,filters,sort,initData,...    
-you can create your own config from scratch using Mobx class Stores that implements `JBGridConfigInterface` or just create instance of `JBGridData` and start to config it's fields base on your need.
+you can create your own config from scratch using Mobx class Stores that implements `JBGridConfigInterface` or just create instance of `JBGridData` and start to config it's fields based on your need.
 
 ```js
 import { JBGridData } from "jb-grid/react";
@@ -68,7 +73,7 @@ yourConfig.table.columns = [
                 name: 'age',
                 title: 'سن',
                 sortable: false,
-                //if you dont set width , it will be '1fr' mean it get 1 share of width from free space
+                //if you don't set width , it will be '1fr' mean it get 1 share of width from free space
                 width: '1fr'
             },
             {
@@ -191,8 +196,12 @@ jb-grid by default is mobile friendly but when it turns to mobile view it show r
             </Row>
 ```
 
-## styling
-| css variable name                          | description                                                            |
+## Styling
+| CSS variable name                          | description                                                            |
 | -------------                              | -------------                                                          |
 | --jb-grid-loading-color                    | list loading color                                                     |
 | --jb-grid-page-active-color                | color of active page                                                   |
+
+## Shared Documentation
+
+For web-component behavior, events, slots, and CSS variables, see [`jb-grid`](https://github.com/javadbat/jb-grid).

package/react/dist/Components/module-declaration.d.ts

@@ -4,7 +4,9 @@ import type { JBPaginationDirectAttributeProps } from "./types";
 import type { JBCellWebComponent, JBRowWebComponent, JBExpandToggleWebComponent } from 'jb-grid';
 type JBPaginationAttributes = DetailedHTMLProps<HTMLAttributes<JBPaginationWebComponent>, JBPaginationWebComponent> & JBPaginationDirectAttributeProps;
 export type JBRowAttributes = DetailedHTMLProps<HTMLAttributes<JBRowWebComponent>, JBRowWebComponent>;
-export type JBCellAttributes = DetailedHTMLProps<HTMLAttributes<JBCellWebComponent>, JBCellWebComponent>;
+export type JBCellAttributes = DetailedHTMLProps<HTMLAttributes<JBCellWebComponent>, JBCellWebComponent> & {
+    ellipsis: boolean | number;
+};
 export type JBExpandToggleAttributes = DetailedHTMLProps<HTMLAttributes<JBExpandToggleWebComponent>, JBExpandToggleWebComponent>;
 declare module "react" {
     namespace JSX {