Embedded ngx-datatable

Is it possible to nest ngx-datatables within another ngx-datatable? For example, can a separate ngx-datatable be added within a column of another datatable?

Here is my attempt:

rows = [
    {
        "name": "Ethel Price",
        "gender": "female",
        "company": "Johnson, Johnson and Partners, LLC CMP DDC",
        "age": 22
    },
    {
        "name": "Claudine Neal",
        "gender": "female",
        "company": "Sealoud",
        "age": 55
    },
    {
        "name": "Beryl Rice",
        "gender": "female",
        "company": "Velity",
        "age": 67
    },
    {
        "name": "Wilder Gonzales",
        "gender": "male",
        "company": "Geekko"
    }] ;
<ngx-datatable class="table-bordered schedule-work-grid" [columnMode]="'force'" [rowHeight]="'auto'" [headerHeight]="150"
  *ngIf="locations.length > 0" [rows]="rows">
  <ngx-datatable-column name="Name"></ngx-datatable-column>
  <ngx-datatable-column>
    <template>
      <ngx-datatable class="table-bordered schedule-work-grid" [columnMode]="'force'" [rowHeight]="'auto'" [headerHeight]="150"
        *ngIf="locations.length > 0" [rows]="rows">
        <ngx-datatable-column name="Name"></ngx-datatable-column>
      </ngx-datatable>
    </template>
  </ngx-datatable-column>
  <ngx-datatable-column name="Age"></ngx-datatable-column>
</ngx-datatable>

Can anyone confirm if nesting datatables is supported and if so, how can I accomplish this?

Edit

I am looking to create the following structure:

https://i.sstatic.net/gjUlN.png

As far as I know, colspan and rowspan functionality are not currently available in ngx-datatable. Any suggestions on how I can proceed with implementation would be greatly appreciated.

angularjstypescriptngx-datatable

Answer №1

If you're looking for an example of nested ngx-datatable, I found one on the internet that might be useful: Nested Ngx-Datatable Example

 <ngx-datatable
    #nestedDatatableExample
    class='material expandable'
    columnMode="force"
    [headerHeight]="0"
    [footerHeight]="42"
    [rowHeight]="'auto'"
    [scrollbarV]="false"
    [scrollbarH]="false"
    [rows]='displayedData'
    [sortType]="multi"
    [limit]="5">

    <!-- Manage display data columns of first table -->
    <!-- Group rows by date and display the date -->
    <ngx-datatable-column 
      *ngFor="let col of columnsNameTableOne"
      [prop]="col.prop"
      [name]="col.name">
      <ng-template let-row="row" ngx-datatable-cell-template>
        <div style="font-size: 20px; font-weight: bold;" [ngStyle]="{'paddingLeft.px': rowTitleCentered}" (click)="toggleExpandRow(row)">
          {{ row.date }}
        </div>
      </ng-template>
    </ngx-datatable-column>

    <!-- Manage actions columns of first table -->
    <!-- Add an action column with icon to open or close specific rows -->
    <ngx-datatable-column
      [width]="50"
      [resizeable]="false"
      [sortable]="false"
      [draggable]="false"
      [canAutoResize]="false"
      [frozenLeft]="true">
      <ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template>
        <a
           href="javascript:void(0)"
          [class.datatable-icon-right]="!expanded"
          [class.datatable-icon-down]="expanded"
          [ngClass]="{'hide': isHidden(row)}"
          title="Expand/Collapse Row"
          class="expand-color"
          (click)="toggleExpandRow(row)">
        </a>
      </ng-template>
    </ngx-datatable-column>

    <!-- Row Detail Template -->
    <!-- Configure each row detail to be a separate table -->
    <ngx-datatable-row-detail [rowHeight]="'auto'" class="test">
      <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
        <div class="offset-subarray">
          <ngx-datatable
            class="material"
            columnMode="force"
            [headerHeight]="60"
            [footerHeight]="42"
            [rowHeight]="'auto'"
            [scrollbarV]="false"
            [scrollbarH]="true"
            [rows]="row.value"
            [sortType]="multi"
            [limit]="10">

            <!-- Manage display data columns -->
            <!-- Customize cells of specific columns-->
            <ngx-datatable-column 
              *ngFor="let col of columnsName"
              [prop]="col.prop" 
              [name]="col.name"
              [width]="col.width"
              [ngSwitch]="col.prop">
              <ng-template *ngSwitchCase="'case1'" let-row="row" ngx-datatable-cell-template>
                <span *ngFor="let x of row.x; let last = last">
                  {{ x }}<span *ngIf="!last">, </span>
                </span>
              </ng-template>
            </ngx-datatable-column>
          </ngx-datatable>
        </div>
      </ng-template>
    </ngx-datatable-row-detail>
    
  </ngx-datatable>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The generic type does not narrow correctly when using extends union

I'm working with the isResult function below: export function isResult< R extends CustomResult<string, Record<string, any>[]>, K extends R[typeof _type] >(result: R, type: K): result is Extract<R, { [_type]: K }> { ...

typescript

Revamping a function

In my React project, I have split a function into two different components. This function highlights a value if it matches the one being searched for. const generateHighlightedText = useMemo(() => { const regex = new RegExp(`(${highlightValue} ...

reactjstypescriptfunctionreact-hooksrefactoring

Incorporating npm packages with Typescript

I'm facing a challenge in my Typescript project where I want to incorporate an npm module that doesn't have typings or tsd files. When I attempt to use import Module from 'module', I encounter the error: Cannot find module 'module& ...

typescriptnpm

Obtain the data from a service that utilizes observables in conjunction with the Angular Google Maps API

In my Angular project, I needed to include a map component. I integrated the Google Maps API service in a file called map.service.ts. My goal was to draw circles (polygons) on the map and send values to the backend. To achieve this, I added event listeners ...

angulartypescriptgoogle-mapsrxjsobservable

Executing multiple queries in a node.js transaction with Sequelize using an array

I am looking to include the updates on the clothingModel inside a transaction, with the condition that if it successfully commits, then update the reservationModel. This is the snippet of code I am attempting to refactor using sequelize.transaction tr ...

node.jstypescriptsequelize.js

Creating a TypeScript declaration file for a singular module

Consider the following directory structure: src/ ├── foo.ts ├── bar.ts ├── baz.ts ├── index.ts If foo.ts, bar.ts, and baz.ts each export a default class or object, for example in foo.ts: export default class Foo { x = 2; } I ...

typescriptnpmtype-declaration

Implementing easy-fit in an AngularJS application without the need for requirejs

I am currently exploring the use of an interesting JavaScript library called easy-fit (https://github.com/pierremtb/easy-fit) within an AngularJS application (https://github.com/khertan/forrunners). Easy-fit relies on gulp and babel. My goal is to transpi ...

javascriptangularjsrequirejsbabeljs

Elements can only be added to the array at the 0th index

In the process of developing a function, I encountered an issue where all elements added to the array were only stored in Array[0] of the rowData. The data is retrieved from a database. private createRowData() { var rowData:any[] = []; thi ...

javascriptangulartypescript

The field Mutation.createMovement in GraphQL cannot be null for non-nullable fields

I'm currently developing a React/Postgres/Graphql application and encountering the error message "Cannot return null for non-nullable field Mutation.createMovement" when trying to execute the mutation in the frontend. I am using Apollo Client for Grap ...

sqlreactjstypescriptgraphql

The Angular Material date picker unpredictably updates when a date is manually changed and the tab key is pressed

My component involves the use of the Angular material date picker. However, I have encountered a strange issue with it. When I select a date using the calendar control, everything works fine. But if I manually change the date and then press the tab button, ...

javascripthtmlangulartypescriptangular-material

React with Typescript - Type discrepancies found in Third Party Library

Recently, I encountered a scenario where I had a third-party library exporting a React Component in a certain way: // Code from the third party library that I cannot alter export default class MyIcon extends React.Component { ... }; MyIcon.propTypes = { ...

javascriptreactjstypescripttypes

In TypeScript, what is the format in which the final type result of a generic utility type is shown?

After utilizing the provided code, I have encountered an issue with retrieving the ultimate type of type A in the editor. Despite my efforts, the editor persistently showcases the composite form of the generic utility, complicating the process of verifyi ...

typescript

A Guide on Adding Excel-Like Filtering Functionality to AngularJS

I am struggling to implement a simple Excel-like filter for a table using AngularJS (v.1). I have shared my code snippet below and would appreciate any help to show filtered data in the table after checking a checkbox and clicking on the OK button. I have ...

javascriptjqueryhtmlangularjs

Logging information on a single page web application created with AngularJs using the Server (IIS) platform

I'm working on a single-page web app that consists of around 10 different sections including: discussions profile video Each section has its own state in the router, controller, and template with URLs like: 1. http://myapp/#/discussions 2. http: ...

angularjsiisloggingweb-applicationsangular-ui-router

Guide on clearing filters in Angular 4

I'm facing an issue where I have implemented multiple filters but resetting them is not working as expected. showOnlyMyRequest(){ this.requests = this.requests.filter(request => request.requestedBy === 'John Doe'); } showAllReques ...

javascriptangulartypescript

The error thrown by Handsontable is that it cannot locate the modules numbro, moment, pikaday, and ZeroClipboard

I've included handsontable-pro, numbro, moment, pikaday, and ZeroClipboard in my application's dependencies listed within the package.json file, for example: "dependencies": { "numbro": "^1.9.0", "moment": "^2.14.1", ... } I have a ...

angularjsnode.jsnpmhandsontable

Is there a way to inform TypeScript of the existence of a value?

I am facing an issue with the code below: options: { url?: string } = {}; if (!Checker.present(this.options.url)) { throw new Error('Options must have a url'); } new CustomUrl(this.options) This error is occurring because Custo ...

typescript

Does the JavaScript Amazon Cognito Identity SDK offer support for the Authorization Code Grant flow?

Is there a way to configure and utilize the Amazon Cognito Identity SDK for JavaScript in order to implement the Authorization Code Grant flow instead of the Implicit Grant flow? It appears that the SDK only supports Implicit Grant, which means that a Clie ...

typescriptamazon-web-servicesamazon-cognito

Manage the appearance of a component using props

Here is the code snippet that I am working with: export type BreadcrumbItemProps = { isCurrent?: boolean; }; const isCurrent = (props: { isCurrent?: boolean }) => props.isCurrent ? 'normal' : 'bold'; export const Item = styled.s ...

reactjstypescriptstyled-components

How to toggle between checked and unchecked states using jQuery within AngularJS?

After reloading, the checkbox should maintain its checked or unchecked state. This functionality can be achieved using a directive controller. var checkboxValues = JSON.parse(localStorage.getItem('checkboxValues')) || {}, $checkboxes = $("#c ...

javascriptjqueryhtmlangularjscheckbox