+ Start a Discussion
vijay kumar kvijay kumar k 

Table columns resizable at visual force page using slds

Hi 
I have created vf page with the help of slds documentation. i found below code at Lightning Design System Website. i just add apex tags.
Here table columns are not movable (i mean not resizable). I don't know why, i miss any thing or any require data add this table to work column resizable


Following is my vf code:

<apex:page >
    <meta>
    <apex:slds />
</meta>
<div class="slds-scope">
<table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_fixed-layout slds-table_resizable-cols" role="grid">
<thead>
<tr class="slds-line-height_reset">
<th class="slds-text-align_right" scope="col" style="width: 3.25rem;">
<span id="column-group-header" class="slds-assistive-text">Choose a row</span>
<div class="slds-th__action slds-th__action_form">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="checkbox-9" tabindex="0" aria-labelledby="check-select-all-label column-group-header" value="checkbox-9" />
<label class="slds-checkbox__label" for="checkbox-9" id="check-select-all-label">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label slds-assistive-text">Select All</span>
</label>
</div>
</div>
</th>
<th aria-label="Name" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col" style="width: 300px;">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Name">Name</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown" />
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input aria-label="Name column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-15" max="1000" min="20" tabindex="0" type="range" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th aria-label="Account Name" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Account Name">Account Name</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown" />
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input aria-label="Account Name column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-16" max="1000" min="20" tabindex="0" type="range" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th aria-label="Close Date" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Close Date">Close Date</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown" />
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input aria-label="Close Date column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-17" max="1000" min="20" tabindex="0" type="range" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th aria-label="Stage" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Stage">Stage</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown" />
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input aria-label="Stage column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-18" max="1000" min="20" tabindex="0" type="range" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th aria-label="Confidence" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Confidence">Confidence</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown" />
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input aria-label="Confidence column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-19" max="1000" min="20" tabindex="0" type="range" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th aria-label="Amount" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Amount">Amount</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown" />
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input aria-label="Amount column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-20" max="1000" min="20" tabindex="0" type="range" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th aria-label="Contact" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Contact">Contact</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown" />
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input aria-label="Contact column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-21" max="1000" min="20" tabindex="0" type="range" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th class="" scope="col" style="width: 3.25rem;">
<div class="slds-truncate slds-assistive-text" title="Actions">Actions</div>
</th>
</tr>
</thead>
<tbody>
<tr aria-selected="false" class="slds-hint-parent">
<td class="slds-text-align_right" role="gridcell">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="checkbox-01" tabindex="0" aria-labelledby="check-button-label-01 column-group-header" value="checkbox-01" />
<label class="slds-checkbox__label" for="checkbox-01" id="check-button-label-01">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label slds-assistive-text">Select item 1</span>
</label>
</div>
</td>
<th scope="row">
<div class="slds-truncate" title="Acme - 1,200 Widgets"><a href="javascript:void(0);" tabindex="0">Acme - 1,200 Widgets</a></div>
</th>
<td role="gridcell">
<div class="slds-truncate" title="Acme">Acme</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="4/10/15">4/10/15</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="Value Proposition">Value Proposition</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="30%">30%</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="$25,000,000">$25,000,000</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="jrogers@acme.com"><a href="javascript:void(0);" tabindex="0">jrogers@acme.com</a></div>
</td>
<td role="gridcell">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="true" tabindex="0" title="More actions for Acme - 1,200 Widgets">
<svg class="slds-button__icon slds-button__icon_hint slds-button__icon_small" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down" />
</svg>
<span class="slds-assistive-text">More actions for Acme - 1,200 Widgets</span>
</button>
</td>
</tr>
<tr aria-selected="false" class="slds-hint-parent">
<td class="slds-text-align_right" role="gridcell">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="checkbox-02" tabindex="0" aria-labelledby="check-button-label-02 column-group-header" value="checkbox-02" />
<label class="slds-checkbox__label" for="checkbox-02" id="check-button-label-02">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label slds-assistive-text">Select item 2</span>
</label>
</div>
</td>
<th scope="row">
<div class="slds-truncate" title="Acme - 200 Widgets"><a href="javascript:void(0);" tabindex="0">Acme - 200 Widgets</a></div>
</th>
<td role="gridcell">
<div class="slds-truncate" title="Acme">Acme</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="1/31/15">1/31/15</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="Prospecting">Prospecting</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="60%">60%</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="$5,000,000">$5,000,000</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="bob@acme.com"><a href="javascript:void(0);" tabindex="0">bob@acme.com</a></div>
</td>
<td role="gridcell">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="true" tabindex="0" title="More actions for Acme - 200 Widgets">
<svg class="slds-button__icon slds-button__icon_hint slds-button__icon_small" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down" />
</svg>
<span class="slds-assistive-text">More actions for Acme - 200 Widgets</span>
</button>
</td>
</tr>
<tr aria-selected="false" class="slds-hint-parent">
<td class="slds-text-align_right" role="gridcell">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="checkbox-03" tabindex="0" aria-labelledby="check-button-label-03 column-group-header" value="checkbox-03" />
<label class="slds-checkbox__label" for="checkbox-03" id="check-button-label-03">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label slds-assistive-text">Select item 3</span>
</label>
</div>
</td>
<th scope="row">
<div class="slds-truncate" title="salesforce.com - 1,000 Widgets"><a href="javascript:void(0);" tabindex="0">salesforce.com - 1,000 Widgets</a></div>
</th>
<td role="gridcell">
<div class="slds-truncate" title="salesforce.com">salesforce.com</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="1/31/15 3:45PM">1/31/15 3:45PM</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="Id. Decision Makers">Id. Decision Makers</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="70%">70%</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="$25,000">$25,000</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="nathan@salesforce.com"><a href="javascript:void(0);" tabindex="0">nathan@salesforce.com</a></div>
</td>
<td role="gridcell">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="true" tabindex="0" title="More actions for salesforce.com - 1,000 Widgets">
<svg class="slds-button__icon slds-button__icon_hint slds-button__icon_small" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down" />
</svg>
<span class="slds-assistive-text">More actions for salesforce.com - 1,000 Widgets</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</apex:page>
NagendraNagendra (Salesforce Developers) 
Hi Vijay,

Sorry for this issue you are facing.

May I suggest you please refer to below blog post with a similar discussion which might help you further. Hope this helps.

Thanks,
Nagendra