Frozen rows for DataTable

primefaces · Aug 16, 2017 · 902391c · 902391c
1 parent 3fdf70b
commit 902391c
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 24 deletions.
diff --git a/src/components/datatable/DataTable.js b/src/components/datatable/DataTable.js
@@ -51,6 +51,7 @@ export class DataTable extends Component {
         scrollHeight: null,
         frozenWidth: null,
         unfrozenWidth: null,
+        frozenValue: null,
         csvSeparator: ',',
         exportFilename: 'download',
         contextMenu: null,
@@ -108,6 +109,7 @@ export class DataTable extends Component {
         scrollHeight: PropTypes.string,
         frozenWidth: PropTypes.string,
         unfrozenWidth: PropTypes.string,
+        frozenValue: PropTypes.array,
         csvSeparator: PropTypes.string,
         exportFilename: PropTypes.string,
         contextMenu: PropTypes.any,
@@ -667,7 +669,7 @@ export class DataTable extends Component {
     }
 
     createScrollableView(value, columns, frozen) {
-        return <ScrollableView header={this.createTableHeader(columns)} body={this.createTableBody(value, this.props.children)} footer={this.createTableFooter(this.props.children)} 
+        return <ScrollableView header={this.createTableHeader(columns)} body={this.createTableBody(value, columns)} frozenBody={this.props.frozenValue ? this.createTableBody(this.props.frozenValue, columns): null} footer={this.createTableFooter(columns)} 
                 scrollHeight={this.props.scrollHeight} frozen={frozen} frozenWidth={this.props.frozenWidth} unfrozenWidth={this.props.unfrozenWidth}></ScrollableView>
     }
 

diff --git a/src/components/datatable/ScrollableView.js b/src/components/datatable/ScrollableView.js
@@ -11,7 +11,8 @@ export class ScrollableView extends Component {
         footer: null,
         frozen: null,
         frozenWidth: null,
-        unfrozenWidth: null
+        unfrozenWidth: null,
+        frozenBody: null
      }
 
     static propTypes = {
@@ -20,7 +21,8 @@ export class ScrollableView extends Component {
         footer: PropTypes.element,
         frozen: PropTypes.bool,
         frozenWidth: PropTypes.string,
-        unfrozenWidth: PropTypes.string
+        unfrozenWidth: PropTypes.string,
+        frozenBody: PropTypes.element
     }
 
     constructor(props) {
@@ -87,6 +89,7 @@ export class ScrollableView extends Component {
                     <div className="ui-datatable-scrollable-header-box" ref={(el) => { this.scrollHeaderBox = el; }}>
                         <table>
                             {this.props.header}
+                            {this.props.frozenBody}
                         </table>
                     </div>
                 </div>

diff --git a/src/showcase/datatable/DataTableDemo.js b/src/showcase/datatable/DataTableDemo.js
@@ -1005,7 +1005,7 @@ export class DataTableExportDemo extends Component {
 </CodeHighlight>
 
             <h3>Scrolling</h3>
-            <p>DataTable supports both horizontal and vertical scrolling as well as frozen columns. Scrollable DataTable is enabled using scrollable property and scrollHeight to define the viewport height.</p>
+            <p>DataTable supports both horizontal and vertical scrolling as well as frozen columns and rows. Scrollable DataTable is enabled using scrollable property and scrollHeight to define the viewport height.</p>
 <CodeHighlight className="language-markup">
 {`
 <DataTable value={this.state.cars} scrollable={true} scrollHeight="200px">
@@ -1021,12 +1021,12 @@ export class DataTableExportDemo extends Component {
             <p>Horizontal Scrolling requires a width of DataTable to be defined and explicit widths on columns.</p>
 <CodeHighlight className="language-markup">
 {`
-    <DataTable value={this.state.cars} scrollable={true} scrollHeight="200px" style={{width: '600px'}}>
-        <Column field="vin" header="Vin" style={{width:'250px'}} />
-        <Column field="year" header="Year" style={{width:'250px'}} />
-        <Column field="brand" header="Brand" style={{width:'250px'}} />
-        <Column field="color" header="Color" style={{width:'250px'}} />
-    </DataTable>
+<DataTable value={this.state.cars} scrollable={true} scrollHeight="200px" style={{width: '600px'}}>
+    <Column field="vin" header="Vin" style={{width:'250px'}} />
+    <Column field="year" header="Year" style={{width:'250px'}} />
+    <Column field="brand" header="Brand" style={{width:'250px'}} />
+    <Column field="color" header="Color" style={{width:'250px'}} />
+</DataTable>
 
 `}
 </CodeHighlight> 
@@ -1035,22 +1035,36 @@ export class DataTableExportDemo extends Component {
                 total of these values should equal to the width of the DataTable itself.</p>
 <CodeHighlight className="language-markup">
 {`
-    <DataTable value={this.state.cars} scrollable={true} scrollHeight="200px" style={{width: '600px'}}>
-        <DataTable value={this.state.cars} scrollable={true} scrollHeight="200px" style={{width: '800px'}} frozenWidth="200px" unfrozenWidth="600px">
-            <Column field="vin" header="Vin" style={{width:'250px'}} frozen={true} />
-            <Column field="year" header="Year" style={{width:'250px'}} />
-            <Column field="brand" header="Brand" style={{width:'250px'}} />
-            <Column field="color" header="Color" style={{width:'250px'}} />
-            <Column field="owner" header="Owner" style={{width:'250px'}} />
-            <Column field="tyre" header="Tyre" style={{width:'250px'}} />
-            <Column field="capacity" header="Capacity" style={{width:'250px'}} />
-            <Column field="engine" header="Engine" style={{width:'250px'}} />
-        </DataTable>
+<DataTable value={this.state.cars} scrollable={true} scrollHeight="200px" style={{width: '600px'}}>
+    <DataTable value={this.state.cars} scrollable={true} scrollHeight="200px" style={{width: '800px'}} frozenWidth="200px" unfrozenWidth="600px">
+        <Column field="vin" header="Vin" style={{width:'250px'}} frozen={true} />
+        <Column field="year" header="Year" style={{width:'250px'}} />
+        <Column field="brand" header="Brand" style={{width:'250px'}} />
+        <Column field="color" header="Color" style={{width:'250px'}} />
+        <Column field="owner" header="Owner" style={{width:'250px'}} />
+        <Column field="tyre" header="Tyre" style={{width:'250px'}} />
+        <Column field="capacity" header="Capacity" style={{width:'250px'}} />
+        <Column field="engine" header="Engine" style={{width:'250px'}} />
     </DataTable>
+</DataTable>
 
 `}
 </CodeHighlight> 
 
+            <p>One or more rows can be displayed as fixed using the frozenValue property.</p>
+<CodeHighlight className="language-markup">
+{`
+<DataTable header="Frozen Rows" value={this.state.cars} frozenValue={this.state.frozenCars} scrollable={true} scrollHeight="200px" style={{marginTop:'30px'}}>
+    <Column field="vin" header="Vin" />
+    <Column field="year" header="Year" />
+    <Column field="brand" header="Brand" />
+    <Column field="color" header="Color" />
+</DataTable>
+
+`}
+</CodeHighlight>         
+
+
             <h3>Lazy Loading</h3>
             <p>Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking onLazyLoad callback everytime paging, sorting and filtering happens. To implement lazy loading, 
                 enable lazy attribute and provide a method callback using onLazyLoad that actually loads the data from a remote datasource. 

diff --git a/src/showcase/datatable/DataTableScrollDemo.js b/src/showcase/datatable/DataTableScrollDemo.js
@@ -15,7 +15,15 @@ export class DataTableScrollDemo extends Component {
     }
 
     componentDidMount() {
-        this.carservice.getCarsLarge().then(data => this.setState({cars1: data}));
+        this.carservice.getCarsLarge().then(data => {
+            this.setState({
+                cars1: data,
+                frozenCars: [
+                    {"brand": "BMW", "year": 2013, "color": "Grey", "vin": "fh2uf23"},
+                    {"brand": "Chevrolet", "year": 2011, "color": "Black", "vin": "4525g23"}
+                ]
+            });
+        });
     }
 
     render() {
@@ -45,6 +53,13 @@ export class DataTableScrollDemo extends Component {
                         <Column field="brand" header="Brand" style={{width:'250px'}} />
                         <Column field="color" header="Color" style={{width:'250px'}} />
                     </DataTable>
+
+                    <DataTable header="Frozen Rows" value={this.state.cars1} frozenValue={this.state.frozenCars} scrollable={true} scrollHeight="200px" style={{marginTop:'30px'}}>
+                        <Column field="vin" header="Vin" />
+                        <Column field="year" header="Year" />
+                        <Column field="brand" header="Brand" />
+                        <Column field="color" header="Color" />
+                    </DataTable>
 
                     <DataTable header="Frozen Columns" value={this.state.cars1} scrollable={true} scrollHeight="200px" style={{marginTop:'30px', width: '800px'}} frozenWidth="200px" unfrozenWidth="600px">
                         <Column field="vin" header="Vin" style={{width:'250px'}} frozen={true} />
@@ -56,6 +71,17 @@ export class DataTableScrollDemo extends Component {
                         <Column field="brand" header="Brand" style={{width:'250px'}} />
                         <Column field="color" header="Color" style={{width:'250px'}} />
                     </DataTable>
+
+                    <DataTable header="Frozen Rows and Columns" value={this.state.cars1} frozenValue={this.state.frozenCars} scrollable={true} scrollHeight="200px" style={{marginTop:'30px', width: '800px'}} frozenWidth="200px" unfrozenWidth="600px">
+                        <Column field="vin" header="Vin" style={{width:'250px'}} frozen={true} />
+                        <Column field="year" header="Year" style={{width:'250px'}} />
+                        <Column field="brand" header="Brand" style={{width:'250px'}} />
+                        <Column field="color" header="Color" style={{width:'250px'}} />
+                        <Column field="vin" header="Vin" style={{width:'250px'}} />
+                        <Column field="year" header="Year" style={{width:'250px'}} />
+                        <Column field="brand" header="Brand" style={{width:'250px'}} />
+                        <Column field="color" header="Color" style={{width:'250px'}} />
+                    </DataTable>
                 </div>
 
                 <DataTableScrollDemoDoc></DataTableScrollDemoDoc>
@@ -87,9 +113,16 @@ export class DataTableScrollDemo extends Component {
     }
 
     componentDidMount() {
-        this.carservice.getCarsLarge().then(data => this.setState({cars1: data}));
+        this.carservice.getCarsLarge().then(data => {
+            this.setState({
+                cars1: data,
+                frozenCars: [
+                    {"brand": "BMW", "year": 2013, "color": "Grey", "vin": "fh2uf23"},
+                    {"brand": "Chevrolet", "year": 2011, "color": "Black", "vin": "4525g23"}
+                ]
+            });
+        });
     }
-
     render() {
         return (
             <div>
@@ -115,6 +148,13 @@ export class DataTableScrollDemo extends Component {
                         <Column field="brand" header="Brand" style={{width:'250px'}} />
                         <Column field="color" header="Color" style={{width:'250px'}} />
                     </DataTable>
+                    
+                    <DataTable header="Frozen Rows" value={this.state.cars1} frozenValue={this.state.frozenCars} scrollable={true} scrollHeight="200px" style={{marginTop:'30px'}}>
+                        <Column field="vin" header="Vin" />
+                        <Column field="year" header="Year" />
+                        <Column field="brand" header="Brand" />
+                        <Column field="color" header="Color" />
+                    </DataTable>
 
                     <DataTable header="Frozen Columns" value={this.state.cars1} scrollable={true} scrollHeight="200px" style={{marginTop:'30px', width: '800px'}} frozenWidth="200px" unfrozenWidth="600px">
                         <Column field="vin" header="Vin" style={{width:'250px'}} frozen={true} />
@@ -126,6 +166,17 @@ export class DataTableScrollDemo extends Component {
                         <Column field="brand" header="Brand" style={{width:'250px'}} />
                         <Column field="color" header="Color" style={{width:'250px'}} />
                     </DataTable>
+                    
+                    <DataTable header="Frozen Rows and Columns" value={this.state.cars1} frozenValue={this.state.frozenCars} scrollable={true} scrollHeight="200px" style={{marginTop:'30px', width: '800px'}} frozenWidth="200px" unfrozenWidth="600px">
+                        <Column field="vin" header="Vin" style={{width:'250px'}} frozen={true} />
+                        <Column field="year" header="Year" style={{width:'250px'}} />
+                        <Column field="brand" header="Brand" style={{width:'250px'}} />
+                        <Column field="color" header="Color" style={{width:'250px'}} />
+                        <Column field="vin" header="Vin" style={{width:'250px'}} />
+                        <Column field="year" header="Year" style={{width:'250px'}} />
+                        <Column field="brand" header="Brand" style={{width:'250px'}} />
+                        <Column field="color" header="Color" style={{width:'250px'}} />
+                    </DataTable>
                 </div>
             </div>
         );