Skip to content

Instantly share code, notes, and snippets.

@hatemalimam

hatemalimam/frozenTableWidth.xhtml

Last active August 29, 2015 14:02
Show Gist options
  • Save hatemalimam/e101b951db27335c63a9 to your computer and use it in GitHub Desktop.
Save hatemalimam/e101b951db27335c63a9 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
frozenTableWidth.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<ui:composition template="/templates/default/main.xhtml">
<ui:define name="content">
<style>
/* Change forzen width */
.ui-datatable-frozenlayout-left {
width: 20%;
}
</style>
<h:form id="form">
<p:dataTable value="#{mainBean.list}" var="user" frozenColumns="1"
scrollable="true" scrollHeight="150" scrollWidth="300">
<p:column headerText="Name">
#{user.name}
</p:column>
<p:column headerText="Name">
#{user.name}
</p:column>
<p:column headerText="Name">
#{user.name}
</p:column>
</p:dataTable>
<p:outputLabel value="Slide to change width" for="slider" />
<h:inputHidden id="sliderInput" />
<p:slider id="slider" for="sliderInput" style="width: 200px" onSlide="slideColumn(this)" minValue="10" maxValue="70" />
</h:form>
<script>
function slideColumn(comp) {
$('.ui-datatable-frozenlayout-left').css("width", comp.input.val() + "%");
}
</script>
</ui:define>
</ui:composition>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment