Skip to content

Commit 50d8227

Browse files
basithbahibasithbahi
committed
Initial commit
0 parents  commit 50d8227

99 files changed

Lines changed: 18475 additions & 0 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.github/dependabot.yml‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
version: 2
2+
updates:
3+
- package-ecosystem: npm
4+
directory: "/"
5+
schedule:
6+
interval: daily
7+
open-pull-requests-limit: 10
8+
ignore:
9+
- dependency-name: "@docusaurus/core"
10+
versions:
11+
- 2.0.0-alpha.73
12+
- dependency-name: "@docusaurus/preset-classic"
13+
versions:
14+
- 2.0.0-alpha.71
15+
- 2.0.0-alpha.72
16+
- 2.0.0-alpha.73
17+
- dependency-name: "@docusaurus/theme-live-codeblock"
18+
versions:
19+
- 2.0.0-alpha.71
20+
- 2.0.0-alpha.72
21+
- 2.0.0-alpha.73
22+
- dependency-name: gridjs-react
23+
versions:
24+
- 3.4.0
25+
- dependency-name: y18n
26+
versions:
27+
- 4.0.1
28+
- 4.0.2
29+
- dependency-name: classnames
30+
versions:
31+
- 2.3.0
32+
- dependency-name: faker
33+
versions:
34+
- 5.2.0
35+
- 5.5.0
36+
- 5.5.1
37+
- 5.5.2
38+
- dependency-name: "@types/faker"
39+
versions:
40+
- 5.5.0

‎.gitignore‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# Dependencies
2+
/node_modules
3+
4+
# Production
5+
/build
6+
7+
# Generated files
8+
.docusaurus
9+
.cache-loader
10+
11+
# Misc
12+
.DS_Store
13+
.env.local
14+
.env.development.local
15+
.env.test.local
16+
.env.production.local
17+
18+
npm-debug.log*
19+
yarn-debug.log*
20+
yarn-error.log*
21+
22+
.idea

‎README.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# Grid.js Website
2+
3+
Grid.js website is built using [Docusaurus 2](https://v2.docusaurus.io/).
4+
5+
### Installation
6+
7+
```
8+
$ yarn
9+
```
10+
11+
### Local Development
12+
13+
```
14+
$ yarn start
15+
```
16+
17+
This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server.
18+
19+
### Build
20+
21+
```
22+
$ yarn build
23+
```
24+
25+
This command generates static content into the `build` directory and can be served using any static contents hosting service.
26+
27+
### Deployment
28+
29+
```
30+
$ GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy
31+
```
32+
33+
If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

‎blog/gridjs-v3.md‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
---
2+
slug: gridjs-v3
3+
title: Grid.js v3
4+
author: Afshin Mehrabani
5+
author_title: Maintainer of Grid.js
6+
author_url: https://github.com/afshinm
7+
author_image_url: https://avatars0.githubusercontent.com/u/314326?s=460&u=6e7cccefcba3691e96b4ee539c0f2288ff127fce&v=4
8+
tags: [announcements]
9+
---
10+
11+
Today, we have released the third major version of Grid.js. v3-beta1 is now available on NPM and CDNs.
12+
13+
## Selection plugin
14+
15+
Grid.js supports *row selection* now. A dedicated plugin for Grid.js is available now: `gridjs-selection`.
16+
This plugin is available on NPM and various CDNs.
17+
18+
Read more about the [selection plugin here](/docs/plugins/selection/index).
19+
20+
This is the first version of this plugin and more features such as cell selection, radio buttons, etc. will be added soon.
21+
In order to integrate this plugin, I have changed the internal structure of the Plugin class and PluginRenderer.
22+
23+
## Lerna
24+
25+
Grid.js now uses [Lerna](https://lerna.js.org/) to manage the internal and external packages. This enhancement has enabled us
26+
to extend Grid.js easier and to release the core and plugin packages using a unified release pipeline.
27+
28+
<center>
29+
<img alt="Lerna" src="https://lerna.js.org/images/lerna-hero.svg" width="300px" />
30+
</center>
31+
32+
33+
`gridjs-selection` is the first external package and more will be added soon (e.g. cell editing, data export).
34+
35+
## Table width algorithm
36+
37+
I have also improved the table width calculator function. Previously, the `autoWidth` function had to render the entire table
38+
**again** using a Shadow DOM in order to calculate the widths.
39+
40+
With this change, the function takes a snapshot of the rendered table and resets the CSS attributes to guess
41+
the minimum width required to render each cell. This should improve the overall render time especially when `columns` is large.
42+
43+
And many other minor changes. Please read the changelog before upgrading to v3 since a few backward incompatible changes
44+
have been introduced in this release.
45+
46+
47+
Thank you folks!

‎blog/hello-world.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
slug: hello-world
3+
title: Hello, World!
4+
author: Afshin Mehrabani
5+
author_title: Maintainer of Grid.js
6+
author_url: https://github.com/afshinm
7+
author_image_url: https://avatars0.githubusercontent.com/u/314326?s=460&u=6e7cccefcba3691e96b4ee539c0f2288ff127fce&v=4
8+
tags: [announcements]
9+
---
10+
11+
Hello, World! We will be using this blog to publish announcements, future releases and Grid.js tutorials. Stay tuned!

‎docs/community.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
---
2+
title: Community
3+
---
4+
5+
## Discussion Forums
6+
7+
### StackOverflow
8+
9+
Explore [existing questions](https://stackoverflow.com/questions/tagged/gridjs) or [ask your own](https://stackoverflow.com/questions/ask?tags=gridjs).
10+
11+
### GitHub Discussions
12+
13+
Explore [existing discussions](https://github.com/grid-js/gridjs/discussions) or [start a new discussion](https://github.com/grid-js/gridjs/discussions/new).
14+
15+
16+
## Bug report
17+
18+
Please open a [bug report](https://github.com/grid-js/gridjs/issues/new?assignees=&labels=&template=bug_report.md&title=) ticket on GitHub.
19+
20+
## Feature request
21+
22+
Please file a [feature request](https://github.com/grid-js/gridjs/issues/new?assignees=&labels=&template=feature_request.md&title=) issue on GitHub.
23+
24+
25+
## Chat
26+
27+
Join our [Discord channel](https://discord.gg/K55BwDY).
28+
29+
## Blog
30+
31+
Read our [blog](/blog) for the latest updates and annoucements or follow our Twitter account
32+
[@grid_js](https://twitter.com/grid_js)
33+

‎docs/config.md‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
---
2+
title: Configuration
3+
---
4+
5+
In order to use a Grid.js instance, you need to configure it first. Grid.js accepts a configuration object which can be updated using:
6+
7+
- `Grid` constructor
8+
- `updateConfig` method
9+
10+
11+
## `Grid` constructor
12+
13+
Simply pass your configuration object to the `Grid` constructor to configure the instance. It is possible to update this
14+
config later on.
15+
16+
```js
17+
new Grid({
18+
columns: ['Name', 'Email', 'Phone Number'],
19+
data: [
20+
['John', 'john@example.com', '(353) 01 222 3333'],
21+
['Mark', 'mark@gmail.com', '(01) 22 888 4444']
22+
]
23+
});
24+
```
25+
26+
:::info
27+
A full list of config object properties is defined in the [Config](./config/data.md) section of this document
28+
:::
29+
30+
31+
## `updateConfig`
32+
33+
It is also possible to create an empty Grid.js instance and update the configs later on (and before calling the `render` method):
34+
35+
```js
36+
new Grid().updateConfig({
37+
columns: ['Name', 'Email', 'Phone Number'],
38+
data: [
39+
['John', 'john@example.com', '(353) 01 222 3333'],
40+
['Mark', 'mark@gmail.com', '(01) 22 888 4444']
41+
]
42+
});
43+
```
44+
45+
Or to just simply update an existing key in the config object:
46+
47+
```js
48+
new Grid({
49+
columns: ['Name', 'Email', 'Phone Number'],
50+
data: [
51+
['John', 'john@example.com', '(353) 01 222 3333'],
52+
['Mark', 'mark@gmail.com', '(01) 22 888 4444']
53+
]
54+
}).updateConfig({
55+
// lets update the columns field only
56+
columns: ['First Name', 'Email', 'Phone']
57+
});
58+
```
59+
60+
:::tip
61+
The [examples directory](./examples/hello-world.md) has an interactive editor that
62+
you can use to see the effect config properties live.
63+
:::
64+

‎docs/config/autoWidth.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
id: autoWidth
3+
title: autoWidth
4+
---
5+
6+
To calculate the width of each column automatically
7+
8+
- Default: `true`
9+
- Type: `boolean`

‎docs/config/className.md‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
---
2+
id: className
3+
title: className
4+
---
5+
6+
To add CSS classname to a Grid.js instance
7+
8+
- `optional`
9+
- Type: `object`
10+
- Example: [CSS ClassName](../examples/css-classname.md) and [CSS-in-JS](../examples/css-in-js.md)
11+
12+
`className` type has the following properties:
13+
14+
<div className="full-width">
15+
16+
| Name | Description | Type |
17+
|----------------------------|-----------------------------------|--------|
18+
| container `optional` | className of the main container | string |
19+
| table `optional` | className of table | string |
20+
| td `optional` | className of the TD elements | string |
21+
| th `optional` | className of the TH elements | string |
22+
| header `optional` | className of the header container | string |
23+
| footer `optional` | className of the footer container | string |
24+
| thead `optional` | className of the thead element | string |
25+
| tbody `optional` | className of the tbody element | string |
26+
| search `optional` | className of the search container | string |
27+
| sort `optional` | className of the sort button | string |
28+
| pagination `optional` | className of the pagination container | string |
29+
| paginationSummary `optional` | className of the pagination summary | string |
30+
| paginationButton `optional` | className of pagination buttons | string |
31+
| paginationButtonNext `optional` | className of the pagination next button | string |
32+
| paginationButtonCurrent `optional` | className of the pagination current button | string |
33+
| paginationButtonPrev `optional` | className of the pagination previous button | string |
34+
| loading `optional` | className of the loading container | string |
35+
| notfound `optional` | className of the empty table container | string |
36+
| error `optional` | className of the error container | string |
37+
38+
</div>
39+
40+
```js
41+
new Grid({
42+
data: [
43+
['John', 'john@example.com', '(353) 01 222 3333'],
44+
['Mark', 'mark@gmail.com', '(01) 22 888 4444']
45+
],
46+
className: {
47+
td: 'my-td-class',
48+
table: 'custom-table-class'
49+
}
50+
});
51+
```

‎docs/config/columns.md‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
---
2+
id: columns
3+
title: columns
4+
---
5+
6+
To define the columns of the table
7+
8+
- `optional` (you can render a table without the header)
9+
- Type: `string[]` or `TColumn[]`
10+
11+
```js
12+
new Grid({
13+
columns: ["Name", "Email", "Phone Number"]
14+
});
15+
```
16+
17+
or
18+
19+
```js
20+
new Grid({
21+
columns: [{
22+
name: "Name",
23+
sort: true,
24+
}, {
25+
name: "Email"
26+
}, {
27+
name: "Phone Number",
28+
width: '50%'
29+
}]
30+
});
31+
```
32+
33+
`TColumn` type has the following properties:
34+
35+
<div className="full-width">
36+
37+
| Name | Description | Type | Example |
38+
|-----------------------|----------------------------|------------------------------|-------------------------------------------------|
39+
| id `optional` | column ID | `string` | `phoneNumber` |
40+
| data `optional` | Cell default data | `function` or TCell | `(row) => row.name.firstName` or `myData` |
41+
| name | column name | `string` | `Name` |
42+
| width `optional` | width of the column | `string` | `200px` or `30%` |
43+
| sort `optional` | to enable/disable sort | `boolean` | `true` or `0` |
44+
| hidden `optional` | to show/hide the column | `boolean` | `true` or `0` |
45+
| formatter `optional` | custom cell formatting | function | `(cell: TCell, row: Row<TCell>, column: TColumn) => ComponentChild;` |
46+
| attributes `optional` | custom cell attributes | `HTMLAttributes` or function | `(cell: TCell, row: Row<TCell>, column: TColumn) => HTMLAttributes;` |
47+
48+
</div>
49+
50+
:::info
51+
See [Cell formatting](../examples/cell-formatting.md) example for more details.
52+
:::

0 commit comments

Comments
 (0)