ng-table resizing feature

[douglaspeng]

Hi, dear engineer, I am just wondering if you guys ever think about adding the resizing column feature like ng-grid, thanks!

Doug

[joeyjmorales]

Yes - for example - allowing a user to resize the column width by clicking the column (like excel). Would be great for long data values.

[robcodes]

I agree. One of the more painful things we have noticed, is that columns sizes are autocomputed instead of user defined. Because of this when sorting we frequently see our column sizes jumping radically due to new data showing up the screen. That is a painful user experience.

We love ng-table though, and think it is the best implementation of a grid/table in angularjs

[nykevinwong]

This column resizing feature is really a common feature that every third-party vendor provides for a Grid component. I have used many other third-party-components such as ComponentOne, JqGrid, Telerik Grid, KendoUI and etc; all of these components are supplied with this column resizing feature. I believe providing this feature will definitely make ng-table more competitive and superior than the other grids currently on the market.

[nmehta01]

This would indeed be very useful.

[nykevinwong]

The best solution I've known about column resize.
http://jsfiddle.net/aMdf6/355/

The author of above solution even wrote an article to explain the issues he encountered on each column resize plugin he tried to integrate.
http://ihofmann.wordpress.com/2012/07/31/resizable-table-columns-with-jquery-ui/comment-page-1/

It might be helpful for you to implement your column resize issue.

[vuk-nikolic]

+1

This would be a great feature!

[dylamite]

I've found that there exists a module/plugin for ng-table to help with resizing columns:

https://github.com/esvit/ng-table-resizable-columns

This module gives you a custom class directive called ng-table-resizable-columns that you can put on your table that has the ng-table attribute. There's also a demo for it checked in to GitHub but not yet included in the main examples:

https://github.com/esvit/ng-table/blob/master/examples/demo26.html

I haven't had success getting this to work, though. I've made sure to include the ng-table and ngTableResizableColumns modules as dependencies in my app, and even made sure to include the sample styling from the demo, but no success.

.rc-handle-container
{
  position: relative;
}

.rc-handle
{
  position: absolute;
  width: 7px;
  cursor: ew-resize;
  margin-left: -3px;
  z-index: 2;
}

table.rc-table-resizing
{
  cursor: ew-resize;
}

table.rc-table-resizing thead, table.rc-table-resizing thead > th, table.rc-table-resizing thead > th > a
{
  cursor: ew-resize;
}

I've verified also that the link function of the directive is being executed, but I don't get any resize functionality or changing of my mouse pointer. Hopefully someone else out there has more luck than I had and can share it with us!

[icemancml]

Hi all,

Has any progress with this issue?

Thanks.

[scottlepp]

Working example. Here is a Plunk from the demo link provided above: http://plnkr.co/edit/u6JixH?p=preview. I adjusted it slightly to show borders and removed the left/right align of the headers.

[avboy72]

+1 cant be a "serious" contender unless you can specify column widths and allow the user to adjust

[icemancml]

Hey @leptronic nice job!

[scottlepp]

@avboy72 You can set the width on the th/td tag if you want some default.

[avboy72]

Thanks, I will try that.

On Fri, Aug 29, 2014 at 2:06 PM, Scott Lepper notifications@github.com
wrote:

@avboy72 https://github.com/avboy72 You can set the width on the th/td
tag if you want some default.

—
Reply to this email directly or view it on GitHub
#313 (comment).

[YvanDaSilva]

@dylamite @scottlepp This is a good solution, however it does add requirement for jQuery and filters are not working (The header row to do filtering is not added properly).

I made it work by manually creating the filters like the following row in .

        <tr class="ng-table-filters ng-scope">
            <th class="filter ng-scope">
                <input
                    ng-change="table_params.filter({'column_name': table_params.filter().column_name})"
                    ng-model="table_params.filter().column_name"
                    class="input-filter form-control ng-scope ng-pristine ng-valid"
                    type="text">
            </th>
        </tr>

[pelizza]

Working plunker: http://plnkr.co/edit/syWBUA7KUIhIckV0VnW3?p=preview

[Manasa74]

@pelizza tried using it the same way in plunker but getting the following error
Controller 'ngTable', required by directive 'ngTableResizableColumns', can't be found

Can anyone help me out of this

added the ng-table and ng-table-resizing-columns in index file

<script src="bower_components/ng-table/dist/ng-table.min.js"></script> <script src="bower_components/ng-table-resizable-columns/ng-table-resizable-columns.js"></script>

[pelizza]

@Manasa74 have you loaded angular before both of them?

I probably can help a bit more if you could paste your code on Plunker...