feat: adding cell attributes

Author: afshinm

docs/config/columns.md

@@ -34,13 +34,14 @@ new Grid({
 
 <div className="full-width">
 
-| Name                 | Description             |  Type             | Example                                         |
-|----------------------|-------------------------|-------------------|-------------------------------------------------|
-| id `optional`        | column ID for JSON data | string or function | `phoneNumber` or `(row) => row.name.firstName` |
-| name                 | column name             | string            | `Name`                                          |
-| width `optional`     | width of the column     | string            | `200px` or `30%`                                |
-| sort `optional`      | to enable/disable sort  | boolean           | `true` or `0`                                   |
-| formatter `optional` | custom cell formatting  | function          | `(cell: TCell, row: Row<TCell>, column: TColumn) => ComponentChild;` |
+| Name                  | Description             |  Type                        | Example                                         |
+|-----------------------|-------------------------|------------------------------|-------------------------------------------------|
+| id `optional`         | column ID for JSON data | `string` or function         | `phoneNumber` or `(row) => row.name.firstName`  |
+| name                  | column name             | `string`                     | `Name`                                          |
+| width `optional`      | width of the column     | `string`                     | `200px` or `30%`                                |
+| sort `optional`       | to enable/disable sort  | `boolean`                    | `true` or `0`                                   |
+| formatter `optional`  | custom cell formatting  | function                     | `(cell: TCell, row: Row<TCell>, column: TColumn) => ComponentChild;` |
+| attributes `optional` | custom cell attributes  | `HTMLAttributes` or function | `(cell: TCell, row: Row<TCell>, column: TColumn) => HTMLAttributes;` |
 
 </div>
 

docs/examples/cell-attributes.md

@@ -0,0 +1,73 @@
+---
+id: cell-attributes
+title: Cell Attributes
+keywords:
+ - javascript
+ - table
+ - javascript table
+ - gridjs
+ - grid js
+ - cell attributes
+ - cell attrs
+ 
+---
+
+import { LiveExample } from "../../lib/liveExample.js";
+
+Add custom attributes to each cell of your table using the `attributes` config. This example
+adds `data-field="name"` to all cells of the "Name" column:
+
+<LiveExample children={
+`
+const grid = new Grid({
+  columns: [
+      { 
+        name: 'Name',
+        attributes: {
+          'data-field':  'name'
+        }
+      },
+      'Email',
+   ],
+  data: Array(5).fill().map(x => [
+    faker.name.findName(),
+    faker.internet.email(),
+  ])
+});
+`
+} />
+
+:::info
+`attributes` config accepts callback function as well:
+
+```js
+{
+    'attributes': (cell, row, column) => { ... }
+}
+```
+:::
+
+<LiveExample children={
+`
+const grid = new Grid({
+  columns: [
+      { 
+        name: 'Name',
+        attributes: (cell) => {
+          return {
+            'data-cell-content': cell,
+            'onclick': () => alert(cell),
+            'style': 'cursor: pointer'
+          };
+        }
+      },
+      'Email',
+   ],
+  data: Array(5).fill().map(x => [
+    faker.name.findName(),
+    faker.internet.email(),
+  ])
+});
+`
+} />
+

package-lock.json

@@ -80,6 +80,7 @@ module.exports = {
       label: 'Customizing',
       items: [
         'examples/cell-formatting',
+        'examples/cell-attributes',
         'examples/row-buttons',
         'examples/html-cells',
         'examples/html-header-cells',