Appearance

This example demonstrates the following properties:

showBorders
Specifies whether the outer borders of the DataGrid are visible.
showColumnLines
Specifies whether vertical lines that separate columns are visible.
showRowLines
Specifies whether horizontal lines that separate rows are visible.
rowAlternationEnabled
Specifies whether rows should be in alternate colors.

To toggle these properties, select the corresponding checkbox under the DataGrid.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Send Feedback

Thank you!
We appreciate your feedback.

React

import React from 'react'; import DataGrid, { Column } from 'devextreme-react/data-grid'; import CheckBox from 'devextreme-react/check-box'; import service from './data.js'; class App extends React.Component { constructor(props) { super(props); this.employees = service.getEmployees(); this.state = { showColumnLines: false, showRowLines: true, showBorders: true, rowAlternationEnabled: true }; this.onValueChanged = this.onValueChanged.bind(this); } onValueChanged(e) { let optionName = null; switch (e.component.option('text')) { case 'Show Row Lines': { optionName = 'showRowLines'; break; } case 'Show Borders': { optionName = 'showBorders'; break; } case 'Alternating Row Color': { optionName = 'rowAlternationEnabled'; break; } default: { optionName = 'showColumnLines'; break; } } this.setState({ [optionName]: e.value }); } render() { const { showColumnLines, showRowLines, showBorders, rowAlternationEnabled } = this.state; return ( <React.Fragment> <DataGrid dataSource={this.employees} showColumnLines={showColumnLines} showRowLines={showRowLines} showBorders={showBorders} rowAlternationEnabled={rowAlternationEnabled}> <Column dataField="Prefix" width={80} caption="Title" /> <Column dataField="FirstName" /> <Column dataField="LastName" /> <Column dataField="City" /> <Column dataField="State" /> <Column dataField="Position" width={130} /> <Column dataField="BirthDate" width={100} dataType="date" /> <Column dataField="HireDate" width={100} dataType="date" /> </DataGrid> <div className="options"> <div className="caption">Options</div> <div className="option"> <CheckBox text="Show Column Lines" value={showColumnLines} onValueChanged={this.onValueChanged} /> </div>   <div className="option"> <CheckBox text="Show Row Lines" value={showRowLines} onValueChanged={this.onValueChanged} /> </div>   <div className="option"> <CheckBox text="Show Borders" value={showBorders} onValueChanged={this.onValueChanged} /> </div>   <div className="option"> <CheckBox text="Alternating Row Color" value={rowAlternationEnabled} onValueChanged={this.onValueChanged} /> </div> </div> </React.Fragment> ); } } export default App;

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render( <App />, document.getElementById('app') );

<!DOCTYPE html> <html> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.7/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.7/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import('./index.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>

.options { padding: 20px; background-color: rgba(191, 191, 191, 0.15); margin-top: 20px; } .caption { font-size: 18px; font-weight: 500; } .option { width: 24%; display: inline-block; margin-top: 10px; }

System.config({ transpiler: 'plugin-babel', meta: { 'devextreme/localization.js': { "esModule": true }, }, paths: { 'npm:': 'https://unpkg.com/' }, defaultExtension: 'js', map: { 'react': 'npm:react@16.14.0/umd/react.development.js', 'react-dom': 'npm:react-dom@16.14.0/umd/react-dom.development.js', 'prop-types': 'npm:prop-types@15.7.2/prop-types.js', 'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.26.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@20.2.7', 'devextreme-react': 'npm:devextreme-react@20.2.7', 'jszip': 'npm:jszip@3.6.0/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@0.10.3/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.0.23/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@2.0.29/dist/dx-gantt.js', 'preact': 'npm:preact@10.5.13/dist/preact.js', 'preact/hooks': 'npm:preact@10.5.13/hooks/dist/hooks.js', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js' }, packages: { 'devextreme': { defaultExtension: 'js' }, 'devextreme-react': { main: 'index.js' }, 'devextreme/events/utils': { main: 'index' }, 'devextreme/events': { main: 'index' }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js' } }, babelOptions: { sourceMaps: false, stage0: true, react: true } });

Appearance

jQuery

Angular

Vue

React

AngularJS

ASP.NET Core

ASP.NET MVC