Merge the header cells of table in details view

Question

Hi Team,

We want to merge the header cells Icon and File Name of the table in details view as in our implementation , the icon cell in header is hidden.

Please find below the the classes of the header cells

class="e-headercell e-templatecell e-fe-grid-icon e-mousepointer"

class="e-headercell e-fe-grid-name e-mousepointer"

Is there any proper solution available to achieve the requirement shown below:

We want to show the Header and table rows as shown in the following imager (Filename header and the folder/file icons in the table rows aligned at same line vertically.

Thanks in Advance,

Indhumathy Loganathan · Answer

Hi Rohit, 
 
Greetings from Syncfusion support. 
 
We have validated your reported query in File Manager component. We suspect that you want to remove the folder icon of header text and wants to align the files and folders at layout in a same column. You can achieve this by adding some style customizations. 
 
We have rendered the File Manager with Name column using detailViewSettings. Check out the style customizations performed to achieve your requirement below. 
 




#overview .e-headercell.e-fe-grid-icon { 
  display: none; 
} 
#overview .e-headercell.e-fe-grid-name { 
  display: inline-block; 
  padding: 10px; 
} 
#overview .e-sortfilterdiv.e-icons.e-ascending.e-icon-ascending, 
.e-sortfilterdiv.e-icons.e-descending.e-icon-descending { 
  padding-left: 10px; 
} 
 
You can find the sample demonstrating the solution below. 
 
https://stackblitz.com/edit/angular-6cscmb?file=app.component.ts 
 
Please check the sample and let us know if you need any further assistance. 
 
Regards, 
Indhumathy L