# ng-table-sculptor

> NgTableSculpt is an Angular component library for huge amounts of data. Seamlessly integrated into your Angular projects, NgTableSculpt offers a sophisticated solution for displaying data in beautifully designed tables, while also providing an enhanced us

Latest version **0.0.4** (published 2023-09-02) · 0 weekly downloads

## Install

```sh
npm install ng-table-sculptor
pnpm add ng-table-sculptor
yarn add ng-table-sculptor
bun add ng-table-sculptor
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2023-09-02 |
| First published | 2023-09-01 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 351 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | antoniok |

## Links

- npm: https://www.npmjs.com/package/ng-table-sculptor
- npm.io page: https://npm.io/package/ng-table-sculptor

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0

## Recent versions

- 0.0.4 (latest) — 2023-09-02
- 0.0.3 — 2023-09-02
- 0.0.2 — 2023-09-01
- 0.0.1 — 2023-09-01

## README

# NgTableSculpt

NgTableSculpt is an Angular component library for huge amounts of data. Seamlessly integrated into your Angular projects, NgTableSculpt offers a sophisticated solution for displaying data in beautifully designed tables, while also providing an enhanced user experience.

Features:

🌟 Sleek Design: With meticulous attention to detail, NgTableSculpt delivers a polished and modern table design that seamlessly fits into a wide range of application aesthetics.

⚙️ Customization Powerhouse: Tailor the table to your exact needs with customizable headers, cell styling, and data formats. Craft a table that aligns perfectly with your application's branding and user interface.

🔍 Data Visibility: Designed to reduce visual clutter, NgTableSculpt incorporates smart features that minimize the appearance of dust, hair, and other minor debris, ensuring a clean and professional presentation at all times.

📊 Data Handling: Beyond aesthetics, NgTableSculpt excels in data handling. With support for sorting, filtering, and pagination, users can effortlessly navigate through extensive datasets without sacrificing performance.

💡 Intuitive Interaction: NgTableSculpt enhances user interaction with intuitive UI components such as context menus, tooltips, and interactive headers. Users can enjoy a seamless and productive experience when working with complex data.

📱 Responsiveness: Whether on a large desktop screen or a mobile device, NgTableSculpt's responsive design ensures that your tables maintain their readability and functionality across various screen sizes.

🔄 Angular Integration: Built from the ground up with Angular developers in mind, NgTableSculpt seamlessly integrates into your Angular projects, following best practices and leveraging the power of Angular's architecture.

With NgTableSculpt, presenting and interacting with data has never been this refined and efficient. Elevate your data representation to a new level of sophistication by integrating NgTableSculpt into your Angular applications. Get started today and unlock a world of beautiful, functional, and user-friendly tables.

Table at the moment supports sorting, filtering, category filtering, advanced pagination, multi selections and much more.

Next update will be **Pagination API**

## Install

```
npm i ng-table-sculptor
```

## Import

```
import { NgTableSculptModule } from 'ng-table-sculptor';

@NgModule({
  declarations: [...],
  imports: [
    BrowserModule,
	  NgTableSculptModule
  ]
})
```

## Using the library

> Prerequisites: Library was built with tailwind, so in order to work, download the tailwind library for angular

```js
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

//tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
    "./node_modules/ng-table-sculptor/**/*.{html,ts,mjs}", // IMPORTANT
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

## Simple usage

```
<ng-table-sculpt [statusArr]="[
{ status: 'all', field: '' },
{ status: 'activate', field: 'status' },
{ status: 'deactivate', field: 'status' }
]" [rootPath]="'customers'" [searchFilter]="
'status,accountNumber,route,monthlyPay,contactNumber,name,priceCategory'
" [selectAllColumn]="false" [tableData]="customers" [columns]="displayedColumns"></ng-table-sculpt>


  displayedColumns: NgTableSculpt[] = [
    { caption: 'Account Number', field: 'accountNumber' },
    { caption: 'Name', field: 'name' },
    { caption: 'Contact Number', field: 'contactNumber' },
    { caption: 'Route', field: 'route' },
    { caption: 'Price Category', field: 'priceCategory' },
    { caption: 'Status', field: 'status', type: 'status' },
    { caption: 'Monthly Pay', field: 'monthlyPay' },
  ];

```

## Properties

| Name                | Type    | Required | Default |
| ------------------- | ------- | -------- | ------- |
| tableData           | array   | Required | []      |
| columns             | array   | Required | []      |
| searchFilter        | string  | Optional | ""      |
| rootPath            | string  | Optional | ""      |
| statusArr           | array   | Optional | []      |
| selectAllColumn     | boolean | Optional | true    |
| includeSearchOption | boolean | Optional | true    |

Define the html template with `<ng-table-sculpt>`. Currently supports these inputs:

1.  `Input [tableData]` which takes your data.
2.  `Input [columns]` which takes your item keys of table, use the table typings below:

```js
export interface NgTableSculpt {
  caption: string; // label
  field: string; // item key
  nested?: string; // nested item key, like nested object
  symbol?: string; // if you have currency symbol
  type?: string; // type => date
  nestedArray?: string; // nested array
}
```

3. `Input [searchFilter]` which takes any key you want and make it searchable within search box
4. `Input [rootPath]` which takes your root url, and table assumes you have ID on specific item, when you click on item it will route you to the next component
5. `Input [statusArr]` which takes any key you want and create a separate filter, these filters have to match the item value

These are the most critical one for your table to be fully functional, there are plenty more which will be added later

## Code scaffolding

Run `ng generate component component-name --project NgTableSculpt` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project NgTableSculpt`.

> Note: Don't forget to add `--project NgTableSculpt` or else it will be added to the default project in your `angular.json` file.

## Build

Run `ng build NgTableSculpt` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build NgTableSculpt`, go to the dist folder `cd dist/ng-table-sculpt` and run `npm publish`.

## Running unit tests

Run `ng test NgTableSculpt` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

---
_Source: https://npm.io/package/ng-table-sculptor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._