Ways to adjust the column width in ngx data table when the column mode is set to 'force'

When using ngx data tables, I encountered an issue with the column widths exceeding the grid width and requiring a scroll bar. I attempted to set the column widths using an array as follows:

  displayColumns = [
    { name: 'S.No', value: 'SNo', width: '10' }, { name: 'Item', value: 'ProductName' , width: '10'  },
    { name: 'HSN Code', value: 'HCNCode', width: '10'  }, { name: 'GST%', value: 'GSTRate', width: '100'  },
    { name: 'Touch', value: 'PTouch', width: '10'  },
    { name: 'Qty', value: 'Quantity', width: '10'  }, { name: 'MCP Rate', value: 'MCPRate', width: '10'  }, 
    { name: 'MCP Amt', value: 'MCPAmount', width: '10'  },
    { name: 'Weight', value: 'Weight', width: '10'  }, { name: 'MCG Rate', value: 'MCGRate', width: '10'  },
     { name: 'MCG Amt', value: 'MCGAmount', width: '10'  },
    { name: 'Wastage', value: 'STouch', width: '10'  }, { name: 'Purity', value: 'Purity', width: '10'  }, { name: 'Total MC', value: 'TotalMC', width: '10'  },
    { name: 'Gram Rate', value: 'Rate', width: '10'  }, { name: 'Total Amt', value: 'TotalAmount' , width: '10' },
    { name: 'Actions', value: 'Actions' }];

The table structure is defined below:

   <ngx-datatable class="bootstrap" [rows]="roleList" [headerHeight]="80"
                                        [footerHeight]="50" [rowHeight]="'45'" [scrollbarH]="true"
                                        [columnMode]="'force'" [limit]="limit" [loadingIndicator]="loadingIndicator"
                                        [columns]="displayColumns" [reorderable]="reorderable">
                                        <ngx-datatable-column *ngFor="let column of displayColumns"
                                            [name]="column.name">
                                           // Content for ngx datatable columns here
                                        </ngx-datatable>

However, the column widths specified in the array are not taking effect, resulting in a misaligned grid like the image provided here.

The expected grid layout should resemble the one displayed here, featuring draggable headers.

Unfortunately, my attempts to fix the column widths have been unsuccessful. If you have any suggestions on how to address this issue, please let me know.

Answer №1

It seems like you're looking to assign a specific width to your columns. One way to achieve this is by using the following code snippet:

<ngx-datatable-column *ngFor="let column of displayColumns" [name]="column.name" [width]="100">
<!-- Add the rest of your code here -->
</ngx-datatable-column>

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

Update the min-width for col-xl @media in Bootstrap 4 by modifying the HTML styles exclusively

Is there a way to set the min-width for .col-xl to 1600px in @media using only inline HTML styling, without having to modify any Less or Sass files? I simply want to keep Bootstrap's official CDN URLs for loading the library. ...

The .wrapper CSS class is effective for adjusting the width of my bootstrap card, but it doesn't impact the

body { padding-right: 30px; padding-left: 30px; padding-bottom: 30px; background-color: #228B9D; } div.tron { padding-bottom: 40px; padding-right: 250px; padding-left: 250px; } .wrapper{ width: 1000px; margin: 0 auto; } div. ...

angular-cli build error in monorepo: TS2451: 'ngDevMode' variable cannot be redeclared

In my development environment, I have organized a monorepo with two distinct packages. The first package is the primary application, known as app, while the second package is a shared library that is utilized by the main application, referred to as lib. Bo ...

Why is the div element within the container not automatically occupying 12 columns, but rather only 1?

I'm struggling to comprehend the bootstrap grid system, as explained in Murach's .Net book. Please take the time to read through the entire post. I am aware of the solution (<div class="col-lg-12">Col x</div> works), but I am curious ...

How can I ensure that a pop-up is shown only once per day in Vue.js

I am facing an issue with a method that is supposed to display a modal window 4 seconds after the user logs onto the website. If the modal is closed, it should not be displayed again for the next 24 hours. However, I am encountering problems with LocalSt ...

Determine whether the last column in bootstrap is an even number or an odd number

In a loop, I have Bootstrap columns and I want the last column to be 12 (col-12) if it's odd. I know how to check if a number is even or odd, but I specifically want to check the last number in this case. If the last column is odd, make it col-12; oth ...

What could be causing the default dropdown option to vanish once another selection is made?

Check out this GIF to illustrate my query. Is there a way to ensure that when an option is selected, the default choice "Watching" appears in the dropdown menu? For the direct link to the codepen, click here. <!DOCTYPE html> <html lang="en& ...

The error message "TypeError: render is not a function" is encountered when attempting to call and display information

I am currently working on a movie app using React JS and I encountered an error while trying to render a component based on API data. TypeError: Render is not a function The code works perfectly fine for TvListProvider, but I'm facing this error wi ...

Updating the JWT token in Angular 6 and making a new request with the updated token

When my JWT authentication token expires (verified by the backend), I need to call a refresh token API and resend the last failed request due to the expired token. I have an Interceptor in place, but I must update the authentication header before sending ...

Issue with Bootstrap 4 Navigation Bar Toggle Functionality Resolved

I am experiencing an issue with my responsive nav bar code from Bootstrap documentation. When I resize the browser window to mobile size in Chrome/Safari, the toggle dropdown feature does not work as expected. <nav class="navbar navbar-expand-lg navb ...

Angular: Stop additional input from being processed in Child Component and disable Change Detection

Is there a way to limit the number of inputs a child input in Angular receives before stopping further changes? For example, I want the child input to accept only 3 updates from ngOnChanges and then ignore any subsequent ones. I am currently using an inpu ...

Discovering the Object with the Lowest Key Value in Typescript

Within my TypeScript code, I have defined a List as myList: Package[]. The structure of the Package model is outlined below - export class Package { ID: Number; Price: Number; } I am trying to retrieve a Package object with the lowest Price value using ...

No type checking errors present in React Typescript

I've come across a peculiar issue with React and TypeScript. After running npm start or npm build, I'm not seeing any errors. In the code snippet below, I intentionally assign invalid values to function arguments and variables, but strangely, the ...

The value specified as type '{ value: BigNumber; }' cannot be assigned to the parameter type 'Overrides & { from?: string | Promise<string> | undefined; }'

I am currently working on a smart contract using Solidity (version 0.8.0) at my buildspace project. Below is a snippet of my code written in TypeScript (4.5.x)/JavaScript and Node.js 16.13.x: ... const waveContractFactory = await hre.ethers.getContractFact ...

Issue with saving date values accurately in Nestjs/Prisma

After logging the response body before saving it to the database, I noticed that the shape is correct. Here's what it looks like: //console.log response body CreateOpenHourDto { day: 'WEDNESDAY', startTime: 1663858800000, endTime: 16638786 ...

Javascript is malfunctioning when trying to import Bootstrap library

I've been attempting to integrate this search bar into my webpage from the following source: https://github.com/jeffersonRibeiro/jquery-simpleSelect However, it seems to encounter issues when I import bootstrap. I've double-checked the import pr ...

Nest JS is currently experiencing difficulties with extending multiple classes to include columns from other entities

Currently, I am immersed in a new project that requires me to enhance my entity class by integrating common columns from another class called BASEMODEL. import { Index, PrimaryGeneratedColumn } from "typeorm"; export class BaseModel { @Prima ...

The type '{}' does not have all the properties required by type MeshTransmissionMaterial

While attempting to utilize the MeshTransmissionMaterial from the react-three-drei library, I encountered the following error: Type '{}' is missing the following properties from type 'Pick<Omit<MeshTransmissionMaterialType, "arg ...

How to Cut Off Canvas Label in the Latest Version of ChartJS (v3.5.1)

Help! I'm struggling with a bar chart that has long labels causing the canvas to shrink. To fix this, I attempted to truncate any label with more than 10 characters using a solution from a previous post: options: { responsive: true, ma ...

Verify the type of email domain (personal or corporate)

Here's an example: isPersonalEmail("<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c0aea1ada580a7ada1a9aceea3afad">[email protected]</a>") // true isPersonalEmail("<a href="/cdn-cgi/l/email- ...