Apply rounded corners to the table row

Currently, I am utilizing a datagrid to display information.

I have been attempting to implement border radius on all the table rows, but it doesn't seem to be working.

Does anyone have insight into how I can apply border-radius to all rows in the table?

Is there a method to align the text entirely to the left and "remove" the existing column without deleting indexing?

Thank you

VIEW DEMO

Code Snippet

<dx-data-grid class="tableTask" id="gridContainer" [dataSource]="Data" [remoteOperations]="false"
    [allowColumnReordering]="true" [showRowLines]="false" [showColumnLines]="false" [rowAlternationEnabled]="true"
    [showBorders]="false">   
    <dxo-group-panel [visible]="true"></dxo-group-panel>
    <dxo-grouping [autoExpandAll]="false"></dxo-grouping>
    <dxi-column dataField="name" [groupIndex]="0"></dxi-column>
    <dxi-column dataField="name" dataType="string"></dxi-column>
    <dxi-column dataField="name1" dataType="string"></dxi-column>
    <dxi-column dataField="name2" dataType="string"></dxi-column>
    <dxi-column dataField="name3" dataType="string" [width]="150"></dxi-column>
</dx-data-grid>

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

cssangulartypescriptdevextremedevextreme-angular

Answer №1

To achieve rounded corners on your table cells, apply the border-radius properties directly to the first and last children of the cells:

 ::ng-deep .tableTask .dx-datagrid-rowsview .dx-data-row td:first-child {
   border-bottom-left-radius: 8px;
   border-top-left-radius: 8px;
 }

  ::ng-deep .tableTask .dx-datagrid-rowsview .dx-data-row td:last-child {
   border-bottom-right-radius: 8px;
   border-top-right-radius: 8px;
 }

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

Issue with embedding icon within input field in Bootstrap version 4.1

I am currently implementing a project using Angular 6 along with the latest version of Bootstrap v4.1. I am attempting to create a reactive form with icons within input fields. As there is no direct way in bootstrap to place icons on the left side of input ...

htmlcsstwitter-bootstrapbootstrap-4angular-reactive-forms

Fix image that won't load in Firefox

My website features an <img /> element that initially lacks a src attribute. The src is added dynamically using JavaScript at a later point. While Chrome hides it, Firefox displays an empty space: https://i.sstatic.net/3eZJ4.png Is there a way to p ...

javascriptjqueryhtmlcss

How can you easily center content vertically on a web page?

There has been plenty of back-and-forth regarding this issue, with proposed solutions ranging from pure CSS to pure HTML. Some can get quite complex, involving deeply nested divs and intricate CSS rules. I'm looking for a simple and uncomplicated answ ...

htmlcss

What is the best way to utilize a negative glob pattern?

After our build process completes, we end up with both e2015 and es5 bundles. For example, in the dist directory, you will find files like these: /common-es2015.7765e11579e6bbced8e8.js /common-es5.7765e11579e6bbced8e8.js /custom.js We are trying to set u ...

angularprogressive-web-appsservice-worker-config

Issue with Thickbox - showing up towards the end of the page

I'm encountering a strange issue with a PHP page in Wordpress. When I include an inline Thickbox on the page and try to open it, the Thickbox appears at the very bottom of the page, below the footer. Interestingly, I copied the generated HTML code an ...

javascriptcsswordpressthickbox

What is the best way to retrieve the instance of a different component?

This question is not specifically referring to a child component, and therefore using ViewChild is not an option. The query here is if it's feasible to inject any component into another component. There was a related discussion on Stack Overflow, but ...

angulardependency-injection

Adjust the left margin to be flexible while keeping the right margin fixed at 0 to resolve the spacing

To create a responsive design that adjusts based on screen size, I initially set the content width to 500px with a margin of 0 auto. This meant that for a 700px screen, the content would remain at 500px with left and right margins of 100px each. Similarl ...

javascriptjqueryhtmlcss

The quantity of elements remains constant in the EventEmitter

The Grid component is structured as follows: export class GridComponent { @Output('modelChanged') modelChangedEmitter = new EventEmitter(); private valueChanged(newValue: any, item: Object, prop: string) { item[prop] = newValue; ...

angulartypescripteventemitter

Can one designate something as deprecated in TypeScript?

Currently, I am in the process of creating typescript definitions for a JavaScript API that includes a deprecated method. The documentation mentions that the API is solely for compatibility purposes and has no effect: This API has no effect. It has been ...

typescriptdeprecateddeprecation-warningtypescript-definitions

Weird Android CSS problem: mysterious white overlay appearing in all browsers, both zoomable and touch-sensitive

After testing my website in various browsers, I discovered that while it looks fine on most platforms, there is a persistent issue on Android devices. The problem occurs when the user scrolls down around 30% of the page - a white overlay appears and exten ...

androidhtmlcssweb

Error! Unable to Inject ComponentFactoryResolver

Recently, I attempted to utilize ComponentFactoryResolver in order to generate dynamic Angular components. Below is the code snippet where I am injecting ComponentFactoryResolver. import { Component, ComponentFactoryResolver, OnInit, ViewChild } from "@an ...

javascriptangulartypescript

Optimal method for storing text descriptions across two platforms (react native and react)

Hello, I hope you are doing well. I have a question regarding two platforms that I am using - React Native and React (NextJS). Both platforms have forms to save data, one of which is a "text description." Here's the issue: When I input a long passag ...

htmlcssreactjsreact-nativenext.js

Is there a way to circumvent the Cors policy in my Spring Boot application once it has been deployed?

I have developed a small website that I am trying to deploy. The backend is built using Spring Boot 3 and the frontend uses Angular 15. However, I am facing an issue where my frontend cannot communicate with the backend due to Cors restrictions. Despite re ...

javaangularspring-bootjwtcors

Is there a way to retrieve the previously selected mat-tab in an Angular component, even after navigating to other components, without relying on localstorage or services?

Preserving mat-tab selection state between Angular components without relying on localStorage or a service Query: I'm currently developing an Angular application that features multiple components with mat-tab-groups. I would like to maintain the sele ...

angularmat-tab

The blur() function in -webkit-filter does not seem to function properly in Vue.js

I'm having trouble implementing the -webkit-filter: blur() property. I tried using "filter" instead, but it still isn't working. Could this be a limitation of Vue.js or are there any other solutions available? <template> <div class=&qu ...

javascriptcssvue.jsfilterwebkit

Is it possible to bind browser keyboard scrolling to a div without explicit instructions?

Here is a question that closely relates to this one: Enable div to scroll by keyboard without clicking I am aware that explicitly focusing on the element will enable the desired behavior. My inquiry is whether there is a way to achieve this implicitly. ...

htmlcssscroll

How can a class be imported into a Firebase Cloud function in order to reduce cold start time?

When optimizing cold start time for Firebase Cloud functions, it is recommended in this Firebase Tutorial to import modules only where necessary. But can you also import a class with its own dependencies inside a function? In my scenario, I need to use Bc ...

node.jstypescriptfirebasegoogle-cloud-functions

Developing a Generic API Invocation Function

I'm currently working on a function that has the capability to call multiple APIs while providing strong typing for each parameter: api - which represents the name of the API, route - the specific route within the 'api', and params - a JSON ...

javascripttypescriptgenerics

Ways to retrieve the key of an enum based on its value within Typescript

Here's an example of an enum: export enum Colors { RED = "RED COLOR", BLUE = "BLUE COLOR", GREEN = "GREEN COLOR" } Can you help me figure out how to retrieve the enum key based on a specific value? For instance, if I input "BLUE COLOR", ...

typescriptenums

Missing expected property in TypeScript casting operation

I recently came across this intriguing playground example outlining a scenario where I attempted to convert an object literal into an object with specific properties, but encountered unexpected results. class X { y: string; get hi(): string { ...

typescript