{"id":28138018,"url":"https://github.com/Samuel-Pinheiro-C-Lopes/ngx-s-data-table","last_synced_at":"2025-05-14T17:05:02.998Z","repository":{"id":290088324,"uuid":"973333427","full_name":"Samuel-Pinheiro-C-Lopes/ngx-s-data-table","owner":"Samuel-Pinheiro-C-Lopes","description":"Angular module for a data table that maps automatically or, if needed, can receive customized mapping by the user, to render in table a source of data from a specified class.","archived":false,"fork":false,"pushed_at":"2025-05-04T22:16:43.000Z","size":21,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-04T22:32:54.841Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Samuel-Pinheiro-C-Lopes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-04-26T19:02:27.000Z","updated_at":"2025-05-04T22:16:46.000Z","dependencies_parsed_at":null,"dependency_job_id":"2958a424-08a6-45d9-b374-70a7aae1f5de","html_url":"https://github.com/Samuel-Pinheiro-C-Lopes/ngx-s-data-table","commit_stats":null,"previous_names":["samuel-pinheiro-c-lopes/ngx-s-data-table"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Samuel-Pinheiro-C-Lopes%2Fngx-s-data-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Samuel-Pinheiro-C-Lopes%2Fngx-s-data-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Samuel-Pinheiro-C-Lopes%2Fngx-s-data-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Samuel-Pinheiro-C-Lopes%2Fngx-s-data-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Samuel-Pinheiro-C-Lopes","download_url":"https://codeload.github.com/Samuel-Pinheiro-C-Lopes/ngx-s-data-table/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254190396,"owners_count":22029632,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-05-14T17:02:14.480Z","updated_at":"2025-05-14T17:05:02.986Z","avatar_url":"https://github.com/Samuel-Pinheiro-C-Lopes.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Data Grids"],"readme":"# Data table with filtering, pagination, checkbox selection, click event and expandable row.\n\n### Table of Contents\n---\n- [Description](#description)\n- [Features](#features)\n- [Getting Started](#getting-started)\n- [Usage](#usage)\n- [API](#api)\n\n# Description\nData table with support for essential features such as filtering, pagination, row selection, row expansion and checkbox based selection that works based on a class and data source provided. Has high customization and robust built-in validation.\nNeeds a class and its instances as a data source to work with.\n\n# Features\n - **Pagination**: The data is paginated based on the quantity per page provided.\n - **Filtering**: Generic or column based filters to specify the displayed data.\n - **Click**: Click event to handle actions based on an element selected by the user.\n - **Expand**: Expandable rows that display a property value and/or ng-template content specified as HTML.\n - **Checkbox Selection**: Emit a list of elements selected by the user.\n - **Composition of Classes**: Display data from composed objects based on a property mapping provided.\n - **Date Format**: Formats dates based on input provided.\n - **Built-in Validation**: Automatically performs multiple validations to ensure proper functionality, providing explanation in the console.\n - **Robust Customization**: Use the PropertyMapping exported class to specify how the table should handle the data provided.\n\n# Getting Started\n### Step 1 - Installing ngx-s-data-table:\n**NPM**\n```bash\nnpm install ngx-s-data-table\n```\n#### Step2 - Importing the module:\n**example.component.ts**\n```typescript\nimport  { Component }  from  '@angular/core';\nimport  { DataTableModule }  from  'ngx-s-data-table';\n\n@Component({\nselector:  'app-example',\nimports:  [DataTableModule],\ntemplateUrl:  './example.component.html',\nstyleUrl:  './example.component.css'\n})\n\nexport  class  ExampleComponent { }\n```\n**example.module.ts**\n```typescript\nimport  { NgModule }  from  '@angular/core';\nimport  { CommonModule }  from  '@angular/common';\nimport  { ExampleComponent }  from  './example.component';\nimport  { DataTableModule }  from  'ngx-s-data-table';\n\n@NgModule({\n\ndeclarations:  [ExampleComponent],\nimports:  [\nCommonModule,\nDataTableModule\n],\n\nexports:  [ExampleComponent]\n})\nexport  class  ExampleModule  {  }\n```\n# Usage\n***Basic***:\n\nUse the ngx-s-data-table component with a data source and corresponding class:\n\n```typescript\nimport  { Component }  from  '@angular/core';\nimport  { users }  from  './sample-data.data';\nimport  { User }  from  '../classes/user.class';\n\n@Component({\nselector:  'app-example',\nstandalone:  false,\ntemplateUrl:  './example.component.html',\nstyleUrl:  './example.component.css'\n\n})\n\nexport  class  ExampleComponent  {\n\t// Replace the class and data source with your own.\n\tdataClass  =  User;\n\tdataSource  =  users;\n}\n```\nIn template use the ngx-s-data-table providing the source and class\n\n```html\n\u003cngx-s-data-table\n\t[dataClass]=\"dataClass\"\n\t[dataSource]=\"dataSource\"\n\u003e\n\u003c/ngx-s-data-table\u003e\n```\nThe table should be filled with the data provided.\n\n***Customization and compositions***\nThe library exports a PropertyMapping class that allows you to specify how the table should handle the data. Especially useful when working with complex or nested data structures.\n\n```typescript\nimport  { Component }  from  '@angular/core';\nimport  { orders }  from  './sample-data.data';\nimport  { Order }  from  '../classes/order.class';\nimport  { PropertyMapping }  from  'ngx-s-data-table';\n\n@Component({\n\tselector:  'app-example',\n\tstandalone:  false,\n\ttemplateUrl:  './example.component.html',\n\tstyleUrl:  './example.component.css'\n})\n\nexport  class  ExampleComponent  {\n\tdataClass  =  Order;\n\tdataSource  =  orders;\n\n\tpropertyMappings:  PropertyMapping[]  =  [\n\t\t// both are compositions, this is telling the table to display the \"name\"\n\t\t// property for each one of them\n\t\tnew  PropertyMapping(\"user\")\n\t\t\t.withCompositionProperty(\"name\"),\n\t\tnew  PropertyMapping(\"products\")\n\t\t\t.withCompositionProperty(\"name\"),\n\t\t// this is adding a collumn that will display the price of each product\n\t\tnew  PropertyMapping(\"products\").namedAs(\"prices\")\n\t\t\t.withCompositionProperty(\"price\"),\n\t\t// this tells the table that the id will be unique and is meant to not\n\t\t// be displayed\n\t\tnew  PropertyMapping(\"id\")\n\t\t\t.beingPrimaryKey().beingIgnored()\n\t];\n}\n```\nAnd then input the mappings specified to the component\n```html\n\u003cngx-s-data-table\n\t[dataClass]=\"dataClass\"\n\t[dataSource]=\"dataSource\"\n\t[mappingParams]=\"propertyMappings\"\n\u003e\n\u003c/ngx-s-data-table\u003e\n```\nTo handle compositions with same property meant to be displayed, it's possible to input the component with a default one.\nMany more default behaviors can be assigned inputing data to the component, see the API for further information.\n```html\n\u003cngx-s-data-table\n\t[dataClass]=\"dataClass\"\n\t[dataSource]=\"dataSource\"\n\t[mappingParams]=\"propertyMappings\"\n\t[defaultCompositionProperty]=\"'name'\"\n\t[primaryKeyProperty]=\"'id'\"\n\t[expandableProperty]=\"'htmlDescription'\"\n\t[headBackgroundColor]=\"'rgb(150, 150, 150)'\"\n\u003e\n\u003c/ngx-s-data-table\u003e\n```\n***Options***\nThe table by default won't have click, expansion, filtering or pagination features enabled, needing you to specify which features to use and, possibly, define a valid primary key to assure proper behavior.\n```html\n\u003cngx-s-data-table\n\t[dataClass]=\"dataClass\"\n\t[dataSource]=\"dataSource\"\n\t[primaryKeyProperty]=\"'id'\"\n\n\t[expandableProperty]=\"'htmlDescription'\"\n\t[useExpantion]=\"true\"\n\t\n\t[useGeneralFilter]=\"true\"\n\t[useColumnsFilter]=\"true\"\n\t\n\t[usePagination]=\"true\"\n\t[pageSize]=\"25\"\n\t\n\t[useSelection]=\"true\"\n\t(selectedActionEvent)=\"handleSelectedItens($event)\"\n\u003e\n\u003c/ngx-s-data-table\u003e\n``` \nAgain, look for the API for further information.\n\n\n\n# API\n\n### DataTable component API\n| Input | Type| Usage \n|----------|----------|----------|\n| [dataClass] | new  (...args:  any[])  =\u003e  any | Class of the data source.  | \n| [dataSource] | Record\u003cstring,  any\u003e[] | Data source, an array of objects to be displayed. | \n| [mappingParams] | PropertyMapping[]  |  Specific configuration for the properties to be displayed. |   \n| [headBackgroundColor] |  string |  background-color css attribute value for the thead element. |   \n| [primaryKeyProperty] | string | Name of the property that is unique across the source of data. |\n|  [defaultCompositionProperty] | string | Name of the default property to be displayed whenever there is a composition.      |\n| [expandableProperty] | string  | Name of the property which value is to be displayed as HTML whenever a row is expanded.  |\n| [useExpantion] | boolean  | Enables the row expantion feature.  | \n| [useGeneralFilter] | boolean  | Enables a general filter.   |\n| [useColumnsFilter] | boolean  | Enables a column based filter. |\n| [useSelection] | boolean  | Enables a checkbox based selection.  |\n| [usePagination] | boolean  | Enables pagination.  |\n| [useClick] | boolean  |  Enables emitting click events by clicking a row. |               \n| [pageSize]  | number | Number of rows to be displayed by page. Default is 50. |\n| [dateFormat] | string  | Date format. Example: \"MM/dd/yyyy\".  |                \n---\n| [Output] | Event type | Usage  \n| -------|-------|------|\n| (clickEvent) |  any |  emits the value of the primary key property from the clicked row object | \n| (selectedActionEvent) | Record\u003cstring, any\u003e[]  | emits the selected rows objects  |                             \n\n\n\n### PropertyMapping class API\n| Method | Usage | \n|----------|----------|\n| new PropertyMapping(propertyName:  string,  isIgnored:  boolean  =  false)| PropertyMapping class constructor, defines the mapped property name | \n| namedAs(columnName: string) |  Defines the column name for the property specified  |\n| withCompositionProperty(compositionPropertyName:  string) | Defines which property within the object should be displayed by the table |\n| beingPrimaryKey(isPrimaryKey:  boolean  =  true) | Defines the property as a primary key |\n| beingIgnored(isIgnored:  boolean  =  true)  |  Defines that the property shouldn't be displayed |\n| beingExpandableContent(isExpandableContent:  boolean  =  true)  |  Defines the property as the content to be displayed when the row's object is expanded  |\n| get  propertyName() | gets the property name |\n| get columnName() | gets the column name |\n| isIgnored() | gets if the property is to be ignored |\n| isPrimaryKey | gets if the property is a primary key |\n| isExpandableContent | gets if the property is expandable content |\n| compositionPropertyName | gets the name of the property whose value is to be displayed  |\n|\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSamuel-Pinheiro-C-Lopes%2Fngx-s-data-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSamuel-Pinheiro-C-Lopes%2Fngx-s-data-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSamuel-Pinheiro-C-Lopes%2Fngx-s-data-table/lists"}