Fixed #2054 - Add showGridlines and stripedRows props to DataTable

primefaces · May 20, 2021 · f79336c · f79336c
1 parent 754f190
commit f79336c
Show file tree

Hide file tree

Showing 10 changed files with 75 additions and 36 deletions.
diff --git a/src/components/datatable/DataTable.d.ts b/src/components/datatable/DataTable.d.ts
@@ -213,6 +213,8 @@ export interface DataTableProps {
     editingRows?: any[] | DataTableEditingRows;
     expandableRowGroups?: boolean;
     rowHover?: boolean;
+    showGridlines?: boolean;
+    stripedRows?: boolean;
     showSelectionElement?(data: any): boolean | undefined | null;
     showRowReorderElement?(data: any): boolean | undefined | null;
     onSelectionChange?(e: DataTableSelectionChangeParams): void;

diff --git a/src/components/datatable/DataTable.js b/src/components/datatable/DataTable.js
@@ -93,6 +93,8 @@ export class DataTable extends Component {
         editingRows: null,
         expandableRowGroups: false,
         rowHover: false,
+        showGridlines: false,
+        stripedRows: false,
         showSelectionElement: null,
         showRowReorderElement: null,
         onColumnResizeEnd: null,
@@ -207,6 +209,8 @@ export class DataTable extends Component {
         editingRows: PropTypes.oneOfType([PropTypes.array,PropTypes.object]),
         expandableRowGroups: PropTypes.bool,
         rowHover: PropTypes.bool,
+        showGridlines: PropTypes.bool,
+        stripedRows: PropTypes.bool,
         showSelectionElement: PropTypes.func,
         showRowReorderElement: PropTypes.func,
         onColumnResizeEnd: PropTypes.func,
@@ -1364,7 +1368,7 @@ export class DataTable extends Component {
 
     createTableHeader(value, columns, columnGroup) {
         return <TableHeader value={value} sortMode={this.props.sortMode} onSort={this.onSort} sortField={this.getSortField()} sortOrder={this.getSortOrder()} multiSortMeta={this.getMultiSortMeta()} columnGroup={columnGroup}
-                            resizableColumns={this.props.resizableColumns} onColumnResizeStart={this.onColumnResizeStart} onColumnResizerClick={this.props.onColumnResizerClick} onColumnResizerDoubleClick={this.props.onColumnResizerDoubleClick} 
+                            resizableColumns={this.props.resizableColumns} onColumnResizeStart={this.onColumnResizeStart} onColumnResizerClick={this.props.onColumnResizerClick} onColumnResizerDoubleClick={this.props.onColumnResizerDoubleClick}
                             onFilter={this.onFilter} filterDelay={this.props.filterDelay}
                             onHeaderCheckboxClick={this.onHeaderCheckboxClick} headerCheckboxSelected={this.isAllSelected()}
                             reorderableColumns={this.props.reorderableColumns} onColumnDragStart={this.onColumnDragStart} filters={this.getFilters()}
@@ -1541,6 +1545,7 @@ export class DataTable extends Component {
         let className = classNames('p-datatable p-component', {
                         'p-datatable-resizable': this.props.resizableColumns, 'p-datatable-resizable-fit': this.props.resizableColumns && this.props.columnResizeMode === 'fit',
                         'p-datatable-scrollable': this.props.scrollable, 'p-datatable-virtual-scrollable': this.props.virtualScroll,
+                        'p-datatable-striped': this.props.stripedRows, 'p-datatable-gridlines': this.props.showGridlines,
                         'p-datatable-auto-layout': this.props.autoLayout, 'p-datatable-hoverable-rows': this.props.rowHover || this.props.selectionMode || selectionModeInColumn}, this.props.className);
         let paginatorTop = this.props.paginator && this.props.paginatorPosition !== 'bottom' && this.createPaginator('top', totalRecords);
         let paginatorBottom = this.props.paginator && this.props.paginatorPosition !== 'top' && this.createPaginator('bottom', totalRecords);

diff --git a/src/components/treetable/TreeTable.d.ts b/src/components/treetable/TreeTable.d.ts
@@ -144,6 +144,8 @@ export interface TreeTableProps {
     filterMode?: TreeTableFilterModeType;
     filterDelay?: number;
     filterLocale?: string;
+    showGridlines?: boolean;
+    stripedRows?: boolean;
     rowClassName?(data: TreeNode): object;
     onFilter?(filters: TreeTableFilterMeta[]): void;
     onExpand?(e: TreeTableEventParams): void;

diff --git a/src/components/treetable/TreeTable.js b/src/components/treetable/TreeTable.js
@@ -71,6 +71,8 @@ export class TreeTable extends Component {
         filterMode: 'lenient',
         filterDelay: 300,
         filterLocale: undefined,
+        showGridlines: false,
+        stripedRows: false,
         onFilter: null,
         onExpand: null,
         onCollapse: null,
@@ -146,6 +148,8 @@ export class TreeTable extends Component {
         filterMode: PropTypes.string,
         filterDelay: PropTypes.number,
         filterLocale: PropTypes.string,
+        showGridlines: PropTypes.bool,
+        stripedRows: PropTypes.bool,
         onFilter: PropTypes.func,
         onExpand: PropTypes.func,
         onCollapse: PropTypes.func,
@@ -1060,7 +1064,9 @@ export class TreeTable extends Component {
             'p-treetable-hoverable-rows': this.isRowSelectionMode(),
             'p-treetable-resizable': this.props.resizableColumns,
             'p-treetable-resizable-fit': (this.props.resizableColumns && this.props.columnResizeMode === 'fit'),
-            'p-treetable-auto-layout': this.props.autoLayout
+            'p-treetable-auto-layout': this.props.autoLayout,
+            'p-treetable-striped': this.props.stripedRows,
+            'p-treetable-gridlines': this.props.showGridlines
         }, this.props.className);
         const table = this.renderTable(value);
         const totalRecords = this.getTotalRecords(value);

diff --git a/src/showcase/datatable/DataTableColResizeDemo.js b/src/showcase/datatable/DataTableColResizeDemo.js
@@ -38,7 +38,7 @@ export class DataTableColResizeDemo extends Component {
                 <div className="content-section implementation">
                     <div className="card">
                         <h5>Fit Mode</h5>
-                        <DataTable value={this.state.products} resizableColumns columnResizeMode="fit">
+                        <DataTable value={this.state.products} resizableColumns columnResizeMode="fit" showGridlines>
                             <Column field="code" header="Code" style={{width:'20%'}}/>
                             <Column field="name" header="Name" style={{width:'40%'}}/>
                             <Column field="category" header="Category" style={{width:'20%'}}/>
@@ -48,7 +48,7 @@ export class DataTableColResizeDemo extends Component {
 
                     <div className="card">
                         <h5>Expand Mode</h5>
-                        <DataTable value={this.state.products} resizableColumns columnResizeMode="expand">
+                        <DataTable value={this.state.products} resizableColumns columnResizeMode="expand" showGridlines>
                             <Column field="code" header="Code"></Column>
                             <Column field="name" header="Name"></Column>
                             <Column field="category" header="Category"></Column>
@@ -98,7 +98,7 @@ export class DataTableColResizeDemo extends Component {
             <div>
                 <div className="card">
                     <h5>Fit Mode</h5>
-                    <DataTable value={this.state.products} resizableColumns columnResizeMode="fit">
+                    <DataTable value={this.state.products} resizableColumns columnResizeMode="fit" showGridlines>
                         <Column field="code" header="Code" style={{width:'20%'}}/>
                         <Column field="name" header="Name" style={{width:'40%'}}/>
                         <Column field="category" header="Category" style={{width:'20%'}}/>
@@ -108,7 +108,7 @@ export class DataTableColResizeDemo extends Component {
 
                 <div className="card">
                     <h5>Expand Mode</h5>
-                    <DataTable value={this.state.products} resizableColumns columnResizeMode="expand">
+                    <DataTable value={this.state.products} resizableColumns columnResizeMode="expand" showGridlines>
                         <Column field="code" header="Code"></Column>
                         <Column field="name" header="Name"></Column>
                         <Column field="category" header="Category"></Column>
@@ -141,7 +141,7 @@ const DataTableColResizeDemo = () => {
         <div>
             <div className="card">
                 <h5>Fit Mode</h5>
-                <DataTable value={products} resizableColumns columnResizeMode="fit">
+                <DataTable value={products} resizableColumns columnResizeMode="fit" showGridlines>
                     <Column field="code" header="Code" style={{width:'20%'}}/>
                     <Column field="name" header="Name" style={{width:'40%'}}/>
                     <Column field="category" header="Category" style={{width:'20%'}}/>
@@ -151,7 +151,7 @@ const DataTableColResizeDemo = () => {
 
             <div className="card">
                 <h5>Expand Mode</h5>
-                <DataTable value={products} resizableColumns columnResizeMode="expand">
+                <DataTable value={products} resizableColumns columnResizeMode="expand" showGridlines>
                     <Column field="code" header="Code"></Column>
                     <Column field="name" header="Name"></Column>
                     <Column field="category" header="Category"></Column>
@@ -183,7 +183,7 @@ const DataTableColResizeDemo = () => {
         <div>
             <div className="card">
                 <h5>Fit Mode</h5>
-                <DataTable value={products} resizableColumns columnResizeMode="fit">
+                <DataTable value={products} resizableColumns columnResizeMode="fit" showGridlines>
                     <Column field="code" header="Code" style={{width:'20%'}}/>
                     <Column field="name" header="Name" style={{width:'40%'}}/>
                     <Column field="category" header="Category" style={{width:'20%'}}/>
@@ -193,7 +193,7 @@ const DataTableColResizeDemo = () => {
 
             <div className="card">
                 <h5>Expand Mode</h5>
-                <DataTable value={products} resizableColumns columnResizeMode="expand">
+                <DataTable value={products} resizableColumns columnResizeMode="expand" showGridlines>
                     <Column field="code" header="Code"></Column>
                     <Column field="name" header="Name"></Column>
                     <Column field="category" header="Category"></Column>

diff --git a/src/showcase/datatable/DataTableDoc.js b/src/showcase/datatable/DataTableDoc.js
@@ -2999,6 +2999,18 @@ const bodyTemplate = (data, props) => {
                             <td>false</td>
                             <td>When enabled, background of the rows change on hover..</td>
                         </tr>
+                        <tr>
+                            <td>showGridlines</td>
+                            <td>boolean</td>
+                            <td>false</td>
+                            <td>Whether to show grid lines between cells.</td>
+                        </tr>
+                        <tr>
+                            <td>stripedRows</td>
+                            <td>boolean</td>
+                            <td>false</td>
+                            <td>Whether to displays rows with alternating colors.</td>
+                        </tr>
                         <tr>
                             <td>showSelectionElement</td>
                             <td>function</td>

diff --git a/src/showcase/datatable/DataTableGridLinesDemo.js b/src/showcase/datatable/DataTableGridLinesDemo.js
@@ -29,14 +29,14 @@ export class DataTableGridLinesDemo extends Component {
                 <div className="content-section introduction">
                     <AppInlineHeader changelogText="dataTable">
                         <h1>DataTable <span>GridLines</span></h1>
-                        <p>Adding <b>p-datatable-gridlines</b> displays borders between cells. Note: Some themes may always display gridlines by design.</p>
+                        <p>Enabling <b>showGridlines</b> displays borders between cells. Note: Some themes may always display gridlines by design.</p>
                     </AppInlineHeader>
                     <AppDemoActions github="datatable/DataTableGridLinesDemo.js" />
                 </div>
 
                 <div className="content-section implementation">
                     <div className="card">
-                        <DataTable value={this.state.products} header="Header" footer="Footer" className="p-datatable-gridlines">
+                        <DataTable value={this.state.products} header="Header" footer="Footer" showGridlines>
                             <Column field="code" header="Code"></Column>
                             <Column field="name" header="Name"></Column>
                             <Column field="category" header="Category"></Column>
@@ -85,7 +85,7 @@ export class DataTableGridLinesDemo extends Component {
         return (
             <div>
                 <div className="card">
-                    <DataTable value={this.state.products} header="Header" footer="Footer" className="p-datatable-gridlines">
+                    <DataTable value={this.state.products} header="Header" footer="Footer" showGridlines>
                         <Column field="code" header="Code"></Column>
                         <Column field="name" header="Name"></Column>
                         <Column field="category" header="Category"></Column>
@@ -117,7 +117,7 @@ const DataTableGridLinesDemo = () => {
     return (
         <div>
             <div className="card">
-                <DataTable value={products} header="Header" footer="Footer" className="p-datatable-gridlines">
+                <DataTable value={products} header="Header" footer="Footer" showGridlines>
                     <Column field="code" header="Code"></Column>
                     <Column field="name" header="Name"></Column>
                     <Column field="category" header="Category"></Column>
@@ -148,7 +148,7 @@ const DataTableGridLinesDemo = () => {
     return (
         <div>
             <div className="card">
-                <DataTable value={products} header="Header" footer="Footer" className="p-datatable-gridlines">
+                <DataTable value={products} header="Header" footer="Footer" showGridlines>
                     <Column field="code" header="Code"></Column>
                     <Column field="name" header="Name"></Column>
                     <Column field="category" header="Category"></Column>

diff --git a/src/showcase/datatable/DataTableStripedDemo.js b/src/showcase/datatable/DataTableStripedDemo.js
@@ -29,14 +29,14 @@ export class DataTableStripedDemo extends Component {
                 <div className="content-section introduction">
                     <AppInlineHeader changelogText="dataTable">
                         <h1>DataTable <span>Striped Rows</span></h1>
-                        <p>Adding <i>p-datatable-striped</i> displays striped rows.</p>
+                        <p>Adding <i>stripedRows</i> displays rows with alternating colors.</p>
                     </AppInlineHeader>
                     <AppDemoActions github="datatable/DataTableStripedDemo.js" />
                 </div>
 
                 <div className="content-section implementation">
                     <div className="card">
-                        <DataTable value={this.state.products} className="p-datatable-striped">
+                        <DataTable value={this.state.products} stripedRows>
                             <Column field="code" header="Code"></Column>
                             <Column field="name" header="Name"></Column>
                             <Column field="category" header="Category"></Column>
@@ -85,7 +85,7 @@ export class DataTableStripedDemo extends Component {
         return (
             <div>
                 <div className="card">
-                    <DataTable value={this.state.products} className="p-datatable-striped">
+                    <DataTable value={this.state.products} stripedRows>
                         <Column field="code" header="Code"></Column>
                         <Column field="name" header="Name"></Column>
                         <Column field="category" header="Category"></Column>
@@ -117,7 +117,7 @@ const DataTableStripedDemo = () => {
     return (
         <div>
             <div className="card">
-                <DataTable value={products} className="p-datatable-striped">
+                <DataTable value={products} stripedRows>
                     <Column field="code" header="Code"></Column>
                     <Column field="name" header="Name"></Column>
                     <Column field="category" header="Category"></Column>
@@ -148,7 +148,7 @@ const DataTableStripedDemo = () => {
     return (
         <div>
             <div className="card">
-                <DataTable value={products} className="p-datatable-striped">
+                <DataTable value={products} stripedRows>
                     <Column field="code" header="Code"></Column>
                     <Column field="name" header="Name"></Column>
                     <Column field="category" header="Category"></Column>