Find Angular2 Draggable Examples and Templates
Use this online angular2-draggable playground to view and fork angular2-draggable example apps and templates on CodeSandbox. Click any example below to run it instantly or find templates that can be used as a pre-built solution!
Column Resizing - DevExtreme Data Grid (forked)The DataGrid sets the same width for all columns, but you can change column widths as described below:
Specify Custom Column Widths
You can set custom widths for all or individual columns. Individual settings override common settings. Use the following properties to specify the widths:
columnWidth / columns[].width
Specify a width for all or individual columns.
columnMinWidth / columns[].minWidth
Specify a minimum width for all or individual columns.
Auto-Adjust Column Widths to Content
In this demo, columns adjust their widths to the content. To enable this feature, set the columnAutoWidth property to true.
Allow Users to Resize Columns
Users can resize columns if the allowColumnResizing property is enabled. When a user resizes a column, the DataGrid's behavior depends on the columnResizingMode property value:
"nextColumn"
The DataGrid resizes the adjacent column; the total component width does not change.
"widget"
The total component width increases or decreases; all other columns maintain their widths.
Use the drop-down list below the DataGrid to try both values.
If you do not want users to resize a specific column, disable its allowResizing property.
Column Resizing - DevExtreme Data Grid (forked)The DataGrid sets the same width for all columns, but you can change column widths as described below:
Specify Custom Column Widths
You can set custom widths for all or individual columns. Individual settings override common settings. Use the following properties to specify the widths:
columnWidth / columns[].width
Specify a width for all or individual columns.
columnMinWidth / columns[].minWidth
Specify a minimum width for all or individual columns.
Auto-Adjust Column Widths to Content
In this demo, columns adjust their widths to the content. To enable this feature, set the columnAutoWidth property to true.
Allow Users to Resize Columns
Users can resize columns if the allowColumnResizing property is enabled. When a user resizes a column, the DataGrid's behavior depends on the columnResizingMode property value:
"nextColumn"
The DataGrid resizes the adjacent column; the total component width does not change.
"widget"
The total component width increases or decreases; all other columns maintain their widths.
Use the drop-down list below the DataGrid to try both values.
If you do not want users to resize a specific column, disable its allowResizing property.
