Skip to content

Commit 9cd1930

Browse files
rinturajrinturaj
committed
[refactor] readme updated
1 parent cd1ccb7 commit 9cd1930

File tree

4 files changed

+30
-93
lines changed

4 files changed

+30
-93
lines changed

‎README.md‎

Lines changed: 14 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
# NgxSimpleDatatable
1+
# NgxSimpleDatatables
22

33
A lightweight, high-performance Angular data table component with features like virtual scrolling, column freezing, and customizable templates.
44

5-
![NgxSimpleDatatable Screenshot](projects/ngx-simple-datatables/assets/image.png)
5+
![NgxSimpleDatatables Screenshot](/projects/ngx-simple-datatables/assets/image.png)
66

77
## Features
88

@@ -25,12 +25,12 @@ npm install ngx-simple-datatables --save
2525
1. Import the module in your `app.module.ts`:
2626

2727
```typescript
28-
import { NgxSimpleDatatableModule } from "ngx-simple-datatables";
28+
import { NgxSimpleDatatablesModule } from "ngx-simple-datatables";
2929

3030
@NgModule({
3131
imports: [
3232
// ... other imports
33-
NgxSimpleDatatableModule,
33+
NgxSimpleDatatablesModule,
3434
],
3535
})
3636
export class AppModule {}
@@ -42,8 +42,8 @@ export class AppModule {}
4242
<ngx-simple-datatables
4343
[columns]="columns"
4444
[data]="data"
45-
[rowHeight]="40"
46-
[headerHeight]="50"
45+
[rowHeight]="26"
46+
[headerHeight]="26"
4747
>
4848
</ngx-simple-datatables>
4949
```
@@ -228,38 +228,14 @@ Customize the table appearance using CSS custom properties:
228228

229229
### Column Configuration
230230

231-
| Property | Type | Description |
232-
| ---------- | ---------------------------- | -------------------------------- | ---------------------- |
233-
| `field` | `string` | Property name in the data object |
234-
| `header` | `string` | Column header text |
235-
| `width` | `string | number` | Column width (px or %) |
236-
| `freeze` | `'left' | 'right'` | Freeze column position |
237-
| `sortable` | `boolean` | Whether the column is sortable |
238-
| `sortFn` | `(a: any, b: any) => number` | Custom sort function |
239-
240-
## Styling
241-
242-
You can customize the table appearance by overriding the following CSS custom properties:
243-
244-
```css
245-
.dynamic-table-container {
246-
--ngx-simple-dt-bg: #ffffff;
247-
--ngx-simple-dt-border: 1px solid #e0e0e0;
248-
--ngx-simple-dt-border-radius: 8px;
249-
--ngx-simple-dt-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
250-
--ngx-simple-dt-transition: all 0.2s ease-in-out;
251-
}
252-
253-
.table-header {
254-
--ngx-simple-dt-header-bg: #f8f9fa;
255-
--ngx-simple-dt-header-hover-bg: #e9ecef;
256-
--ngx-simple-dt-header-border: 1px solid #e0e0e0;
257-
--ngx-simple-dt-header-text: #495057;
258-
--ngx-simple-dt-header-height: 48px;
259-
--ngx-simple-dt-header-font-weight: 600;
260-
--ngx-simple-dt-header-padding: 0 16px;
261-
}
262-
```
231+
| Property | Type | Description | details |
232+
| ---------- | ---------------------------- | -------------------------------- | ------------ |
233+
| `field` | `string` | Property name in the data object | string |
234+
| `header` | `string` | Column header text | string |
235+
| `width` | `string \| number` | Column width (px or %) | |
236+
| `freeze` | `'left' \| 'right'` | Freeze column position | |
237+
| `sortable` | `boolean` | Whether the column is sortable | true / false |
238+
| `sortFn` | `(a: any, b: any) => number` | Custom sort function | function |
263239

264240
## Development
265241

‎angular.json‎

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,7 @@
2828
"builder": "@angular-devkit/build-angular:karma",
2929
"options": {
3030
"tsConfig": "projects/ngx-simple-datatables/tsconfig.spec.json",
31-
"polyfills": [
32-
"zone.js",
33-
"zone.js/testing"
34-
]
31+
"polyfills": ["zone.js", "zone.js/testing"]
3532
}
3633
}
3734
}
@@ -49,17 +46,13 @@
4946
"outputPath": "dist/example-app",
5047
"index": "projects/example-app/src/index.html",
5148
"browser": "projects/example-app/src/main.ts",
52-
"polyfills": [
53-
"zone.js"
54-
],
49+
"polyfills": ["zone.js"],
5550
"tsConfig": "projects/example-app/tsconfig.app.json",
5651
"assets": [
5752
"projects/example-app/src/favicon.ico",
5853
"projects/example-app/src/assets"
5954
],
60-
"styles": [
61-
"projects/example-app/src/styles.css"
62-
],
55+
"styles": ["projects/example-app/src/styles.css"],
6356
"scripts": [],
6457
"server": "projects/example-app/src/main.server.ts",
6558
"prerender": true,
@@ -112,18 +105,13 @@
112105
"test": {
113106
"builder": "@angular-devkit/build-angular:karma",
114107
"options": {
115-
"polyfills": [
116-
"zone.js",
117-
"zone.js/testing"
118-
],
108+
"polyfills": ["zone.js", "zone.js/testing"],
119109
"tsConfig": "projects/example-app/tsconfig.spec.json",
120110
"assets": [
121111
"projects/example-app/src/favicon.ico",
122112
"projects/example-app/src/assets"
123113
],
124-
"styles": [
125-
"projects/example-app/src/styles.css"
126-
],
114+
"styles": ["projects/example-app/src/styles.css"],
127115
"scripts": []
128116
}
129117
}

‎projects/example-app/src/app/app.component.html‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,7 @@ <h1>Dynamic Table Example</h1>
33
<div class="table-wrapper">
44
<ngx-simple-datatables [columns]="columns" [data]="data" [rowHeight]="26" [headerHeight]="26">
55
<ng-template #headerTemplate let-column="column">
6-
76
<span class="custom-header">{{ column?.header }}</span>
8-
9-
107
</ng-template>
118
<ng-template #cellTemplate let-row="row" let-column="column">
129
<div [ngSwitch]="column.field">

‎projects/ngx-simple-datatables/README.md‎

Lines changed: 11 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
A lightweight, high-performance Angular data table component with features like virtual scrolling, column freezing, and customizable templates.
44

5-
![NgxSimpleDatatables Screenshot](projects/ngx-simple-datatables/assets/image.png)
5+
![NgxSimpleDatatables Screenshot](../ngx-simple-datatables/assets/image.png)
66

77
## Features
88

@@ -42,8 +42,8 @@ export class AppModule {}
4242
<ngx-simple-datatables
4343
[columns]="columns"
4444
[data]="data"
45-
[rowHeight]="40"
46-
[headerHeight]="50"
45+
[rowHeight]="26"
46+
[headerHeight]="26"
4747
>
4848
</ngx-simple-datatables>
4949
```
@@ -228,38 +228,14 @@ Customize the table appearance using CSS custom properties:
228228

229229
### Column Configuration
230230

231-
| Property | Type | Description |
232-
| ---------- | ---------------------------- | -------------------------------- | ---------------------- |
233-
| `field` | `string` | Property name in the data object |
234-
| `header` | `string` | Column header text |
235-
| `width` | `string | number` | Column width (px or %) |
236-
| `freeze` | `'left' | 'right'` | Freeze column position |
237-
| `sortable` | `boolean` | Whether the column is sortable |
238-
| `sortFn` | `(a: any, b: any) => number` | Custom sort function |
239-
240-
## Styling
241-
242-
You can customize the table appearance by overriding the following CSS custom properties:
243-
244-
```css
245-
.dynamic-table-container {
246-
--ngx-simple-dt-bg: #ffffff;
247-
--ngx-simple-dt-border: 1px solid #e0e0e0;
248-
--ngx-simple-dt-border-radius: 8px;
249-
--ngx-simple-dt-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
250-
--ngx-simple-dt-transition: all 0.2s ease-in-out;
251-
}
252-
253-
.table-header {
254-
--ngx-simple-dt-header-bg: #f8f9fa;
255-
--ngx-simple-dt-header-hover-bg: #e9ecef;
256-
--ngx-simple-dt-header-border: 1px solid #e0e0e0;
257-
--ngx-simple-dt-header-text: #495057;
258-
--ngx-simple-dt-header-height: 48px;
259-
--ngx-simple-dt-header-font-weight: 600;
260-
--ngx-simple-dt-header-padding: 0 16px;
261-
}
262-
```
231+
| Property | Type | Description | details |
232+
| ---------- | ---------------------------- | -------------------------------- | ------------ |
233+
| `field` | `string` | Property name in the data object | string |
234+
| `header` | `string` | Column header text | string |
235+
| `width` | `string \| number` | Column width (px or %) | |
236+
| `freeze` | `'left' \| 'right'` | Freeze column position | |
237+
| `sortable` | `boolean` | Whether the column is sortable | true / false |
238+
| `sortFn` | `(a: any, b: any) => number` | Custom sort function | function |
263239

264240
## Development
265241

0 commit comments

Comments
 (0)