Is there a way that I can set columns in a responsive table to have proportional widths, by that I mean a description column would be wider than a date column. Or is there a way that the table can set itself based upon the content being displayed? I have thought about setting percentage widths on each of the columns, but not sure that would be the best way of doing it.
Thank you.
yes you can do it!
there is a sample project
https://stackblitz.com/edit/angular-primeng-width?file=src/app/app.component.ts
in the component file add width in column definition:
this.columns = [
{ field: 'vin', header: 'Vin', width: '10%' },
{ field: 'year', header: 'Year', width: '20%' },
{ field: 'brand', header: 'Brand', width: '15%' },
{ field: 'color', header: 'Color', width: '5%' }
];
in templet file use [ngStyle]="{'width': col.width}
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns" [ngStyle]="{'width': col.width}">
{{col.header}}
</th>
</tr>
</ng-template>
Try to set table-layout: auto; for PrimeNG table element.
It works for me
Related
I'm trying to disable sorting of selected columns based on Boolean value in PrimeNG table.
Below is my columns array
cols = [
{ field: 'name', header: 'Name', sort: true },
{ field: 'age', header: 'Age', sort: true },
{ field: 'gender', header: 'Gender', sort: false },
{ field: 'status', header: 'Status', sort: false }
];
Some of the columns having sort value as false and I need to disable those columns from sorting.
<p-table [columns]="cols" [value]="persons" [resizableColumns]="true" sortField="name" sortMode="single">
<ng-template pTemplate="header" let-columns>
<tr>
<th pResizableColumn *ngFor="let col of columns" [pSortableColumn]="col.field" [pSortableColumnDisabled]="col.field === 'name' || col.field === 'age'">
<div class="tb-heading">{{col.header}}</div>
<div class="sort-icons-container">
</div>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr [pSelectableRow]="rowData">
<td *ngFor="let col of columns">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
</p-table>
I can use above code for disabling columns i.e., name and age by using pSortableColumnDisabled but I don't want to hardcode the column names like above as these columns will be passed dynamically by parent component.
Is there any way to disable the columns based on respective sort Boolean value?
After spending sometime on internet found the solution for above problem https://embed.plnkr.co/egBhS1DJhY2Ud1ByfGBp/
Changed the hardcoded condition from
[pSortableColumn]="col.field" [pSortableColumnDisabled]="col.field === 'name' || col.field === 'age'"
to
[pSortableColumnDisabled]="!col.sort ? true : false"
i wont to use angulars bootstrap tooltip in header cell of ui-grid
$scope.gridOptions = {
//some settings
columnDefs: [
{
field: someId,
displayName: 'Name',
headerCellTemplate: 'linkToTemplate' //default headerCellTemplate with uib-tooltip={{tooltipDescription}},
tooltipDescription: 'Tooltip description' //it's not working
}
]
}
headerCellTemplate:
<div role="columnheader">
....
<span class="ui-grid-header-cell-label">
{{col.displayName}}
</span>
<span class="icon" uib-toolotp='{{col.tooltipDescription}}' tooltip-placement='right'></span>//it's not working
....
</div>
what is the right way to put tooltip description in each header cell?
Each cell has col.colDef property with access to all properties like field, displayName, tooltipDescription etc.
I dynamically generate angular html table. Actually, I generate several tables on page with different column numbers and sizes, and expandable editable cells is a must. Here is a simplified template I use:
<table>
<colgroup ng-repeat="col in field.cols track by $index">
<col width="{{col}}%" />
</colgroup>
<thead ng-hide="true"></thead>
<tbody>
<tr ng-repeat="row in field.rows track by $index" >
<td ng-repeat="cell in row track by $index">
<span class="text-container" ng-show="!cell.isEditing" >{{cell.text}}</span>
<input type="text" ng-show="cell.isEditing" ng-model="cell.text" ng-blur="cell.isEditing = false" />
</td>
</tr>
</tbody>
</table>
and the very simplified directive is:
app.directive('tableField', function() {
return {
templateUrl: 'views/table.html',
replace: true,
restrict: 'A',
scope: {
field: '='
},
link: function($scope, $element, $attr){
var init = function() {
$scope.appendRow = function addRow() {
var newRow = [];
$scope.field.rows[0].forEach(function(col) {
newRow.push({'text': 'new'});
});
$scope.field.rows.push(newRow);
};
};
};
init();
}
};
}]);
this is how it looks before edits or page orientation change:
When I append a new row or edit cells and they expand, or rotate the device, the borders ruin - see the images:
Ideally I need to generate several tables on page with different column numbers and widths, with editable expandable cells. What shall I do to achieve proper result? I somehow need the table rows to update the row height upon any changes. Please help. I also could not find a library to do all I need.
Some part of the stylesheet:
table {
width: 100%;
border: 1px solid #000000;
}
table > tbody > tr > td {
line-height: 1.42857143;
border: 1px solid #000000;
}
table .text-container {
word-wrap: break-word;
word-break: break-all;
}
the rest regards colors and other stuff not influencing the table layout.
Finally I ended up rewriting the table on flexboxes. Thus now it is not a <table> but a set of <div>s with flexbox styles. Though it looks nice and which is more works fine on all devices.
I am working in an application where i attach dynamic form attributes with parent element. Sample data will look like this
$scope.uploadedFiles = [{
name: sample.jpg,
attr: [{
id: "caption",
display: "Title",
value: "",
placeHolder: "Enter title",
type: "textbox",
},
{
id: "description",
display: "Description",
placeHolder: "Enter description",
type: "textarea",
rows: 8,
value: "",
}]
},
{
name: sample2.jpg,
attr: [{
id: "caption",
display: "Title",
value: "",
placeHolder: "Enter title",
type: "textbox",
},
{
id: "description",
display: "Description",
placeHolder: "Enter description",
type: "textarea",
rows: 8,
value: "ttttt",
}]
}]
In template i am using code like this
<div class="col-md-4" ng-repeat="item in uploadedFiles">
<div style="padding:10px 4px;">
<img class="{{photocss}}" style="width:100%; height:auto;" src="{{item.name}}" />
<div ng-repeat="config in item.attr">
<input ng-if="config.type=='textbox'" type="text" ng-blur="validate(config)" class="form-control" ng-model="config.value" placeholder="{{config.placeHolder}}"></input>
<textarea ng-if="config.type=='textarea'" rows="config.rows" class="form-control" ng-model="config.value" placeholder="{{config.placeHolder}}"></textarea>
</div>
</div>
When i run application and upload some files. list of uploaded photos appear along with dynamic attributes defined in array e.g Title and Description.
When i type something in Title, all titles updated, it shows ng-model bind with all title attributes even i defined attributes for each item (photo) in separate array.
Issue shown in attached screen:
In screen you will look, when i type test title, its populated with other element titles too. Can someone help my where i made mistake.
Also created plnkr http://plnkr.co/edit/wruINbUYdarcxFYffJ0o?p=preview for issue that i am facing.
I want to put title with each element without conflicting with another element title.
I've made a plnkr here that works with you model structure: http://plnkr.co/edit/svR5Vz?p=preview and there no seem to be this effect. So probably error is in other part of your code.
Also using ng-switch could be a better option in this case, then ng-if:
<div ng-repeat="config in item.attr" ng-switch="config.type">
I am trying to convert my application from 3.1 to 4.2 and can't seem to figure out what needs to be modified in place of the 'applyto'. I have tried variations of renderto and contentel but can't seem to figure it out. With 4.2 nothing seems to happen. No errors in firebug...
Ext 3.1 code that works
cust_datepicker = function(){
var els=Ext.select("input.date-picker",true);
els.each(function(el) {
new Ext.form.DateField({
applyto: el.id
,format: 'Y-m-d'
,altFormats: 'j|j/n|j/n/y|j/n/Y|j-M|j-M-y|j-M-Y'
,editable: false
,id : el.id
});
}
)};
Ext.onReady(function(){
cust_datepicker();
});
HTML Code:
<form action="xxx/xxx.cgi" method="GET">
<table><tr>
<td><input name="startdate" class="date-picker"/></td>
</tr></table>
</form>
Here something that worked for me with ExtJS 4.2.0.
The solution is to create a Form containing a Field.
HTML :
<table>
<tr>
<td><div id="here"></div></td>
</tr>
</table>
Javascript:
var here = document.getElementById('here');
var my_form = Ext.create('Ext.form.Panel', {
renderTo: here,
width: 100,
bodyStyle: 'border: none; padding: 0px',
items: [{
xtype: 'datefield',
fieldStyle: 'width: 76px;',
margin: false
}]
});
Try using contentEl property:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-cfg-contentEl