Check with your designers to help you design this section
Check with your designers to help you design this section
Since ag-Grid is already very configurable, RAUL is only providing CSS styles for the grid and some examples of different use cases. In addition to RAUL-specific instruction found here, more information is available from ag-Grid at: https://www.ag-grid.com/documentation-main/documentation.php.
ag-Grid plugin is not included in raul.js file. You will have to add it separately if you want to use it. Below you can see an example of how to include ag-Grid to your project.
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
crossorigin="anonymous"
/>
<link
href="https://cdn.realpage.com/raul/v2.78.3/css/raul.min.css"
rel="stylesheet"
/>
<link
href="https://cdn.realpage.com/raul/v2.78.3/css/plugins/raul-plugin-ag-grid.min.css"
rel="stylesheet"
/>
<!-- Code on page -->
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
crossorigin="anonymous"
></script>
<script src="https://cdn.realpage.com/raul/v2.78.3/js/raul.min.js"></script>
<script
src="https://cdn.realpage.com/raul/v2.78.3/js/plugins/raul-plugin-ag-grid.min.js"
></script>
To apply RAUL styles to ag-Grid tables, simply add the .raul-grid
class
to the parent wrapper.
Below you can see some basic different use cases of the grid.
<div id="ag-grid-pinned-left" style="height: 250px;" class="raul-grid"></div>
const columnDefs = [
{headerName: 'ID', field: 'id', pinned: 'left'},
{headerName: 'Name', field: 'name'},
{headerName: 'Address', field: 'address'},
{headerName: 'City', field: 'city'},
{headerName: 'State', field: 'state'},
{headerName: 'Postal', field: 'postal'},
{headerName: 'County', field: 'county'},
{headerName: 'Units', field: 'units'},
{headerName: 'Sq Ft', field: 'sqFt'},
{headerName: 'Built', field: 'built'},
{headerName: 'Owner', field: 'owner'},
{headerName: 'Manager', field: 'manager'},
{headerName: 'Type', field: 'type'},
]
const rowData = [
{
id: '1',
name: 'Innovo Living On Atlantic',
address: '801 Harbor Inn Drive',
city: 'Coral Springs',
state: 'FL',
postal: '33071-5615',
county: 'Broward',
units: '310',
sqFt: '1000',
built: '2000',
owner: 'Company X',
manager: 'MyPMC',
type: 'Conventional',
},
{
id: '2',
name: 'Whispering Palms',
address: '4540 Northwest 36 Street',
city: 'Lauderdal Lakes',
state: 'FL',
postal: '33319-6439',
county: 'Broward',
units: '214',
sqFt: '744',
built: '1997',
owner: 'Company Y',
manager: 'MyPMC',
type: 'Conventional',
},
{
id: '3',
name: 'Hawaiian Palms',
address: '3540 Northwest 50 Avenue',
city: 'Lauderdal Lakes',
state: 'FL',
postal: '33071-5615',
county: 'Broward',
units: '275',
sqFt: '1146',
built: '2001',
owner: 'Company Z',
manager: '',
type: 'Conventional',
},
{
id: '4',
name: 'Innovo Living On Atlantic',
address: '801 Harbor Inn Drive',
city: 'Coral Springs',
state: 'FL',
postal: '33071-5615',
county: 'Broward',
units: '310',
sqFt: '1000',
built: '2000',
owner: 'Company X',
manager: 'MyPMC',
type: '',
},
{
id: '5',
name: 'Whispering Palms',
address: '4540 Northwest 36 Street',
city: 'Lauderdal Lakes',
state: 'FL',
postal: '33319-6439',
county: 'Broward',
units: '214',
sqFt: '744',
built: '1997',
owner: 'Company Y',
manager: 'MyPMC',
type: 'Conventional',
},
{
id: '6',
name: 'Hawaiian Palms',
address: '3540 Northwest 50 Avenue',
city: 'Lauderdal Lakes',
state: 'FL',
postal: '33071-5615',
county: 'Broward',
units: '275',
sqFt: '1146',
built: '2001',
owner: 'Company Z',
manager: 'MyPMC',
type: '',
},
]
const gridOptions = {
columnDefs: columnDefs,
headerHeight: 42,
rowData: rowData,
rowHeight: 42,
}
document.addEventListener('DOMContentLoaded', function() {
var agGridDiv = document.querySelector('#ag-grid-pinned-left')
new window.agGrid.Grid(agGridDiv, gridOptions)
})
<div id="ag-grid-column-groups" style="height: 250px;" class="raul-grid"></div>
const columnDefs = [
{headerName: 'ID', field: 'id'},
{headerName: 'Name', field: 'name'},
{
headerName: 'Full Address',
children: [
{headerName: 'Address', field: 'address'},
{headerName: 'City', field: 'city'},
{headerName: 'State', field: 'state'},
{headerName: 'Postal', field: 'postal'},
{headerName: 'County', field: 'county'},
],
},
{headerName: 'Units', field: 'units'},
{headerName: 'Sq Ft', field: 'sqFt'},
{headerName: 'Built', field: 'built'},
{headerName: 'Owner', field: 'owner'},
{headerName: 'Manager', field: 'manager'},
{headerName: 'Type', field: 'type'},
],
const rowData = [
{
id: '1',
name: 'Innovo Living On Atlantic',
address: '801 Harbor Inn Drive',
city: 'Coral Springs',
state: 'FL',
postal: '33071-5615',
county: 'Broward',
units: '310',
sqFt: '1000',
built: '2000',
owner: 'Company X',
manager: 'MyPMC',
type: 'Conventional',
},
{
id: '2',
name: 'Whispering Palms',
address: '4540 Northwest 36 Street',
city: 'Lauderdal Lakes',
state: 'FL',
postal: '33319-6439',
county: 'Broward',
units: '214',
sqFt: '744',
built: '1997',
owner: 'Company Y',
manager: 'MyPMC',
type: 'Conventional',
},
{
id: '3',
name: 'Hawaiian Palms',
address: '3540 Northwest 50 Avenue',
city: 'Lauderdal Lakes',
state: 'FL',
postal: '33071-5615',
county: 'Broward',
units: '275',
sqFt: '1146',
built: '2001',
owner: 'Company Z',
manager: '',
type: 'Conventional',
},
{
id: '4',
name: 'Innovo Living On Atlantic',
address: '801 Harbor Inn Drive',
city: 'Coral Springs',
state: 'FL',
postal: '33071-5615',
county: 'Broward',
units: '310',
sqFt: '1000',
built: '2000',
owner: 'Company X',
manager: 'MyPMC',
type: '',
},
{
id: '5',
name: 'Whispering Palms',
address: '4540 Northwest 36 Street',
city: 'Lauderdal Lakes',
state: 'FL',
postal: '33319-6439',
county: 'Broward',
units: '214',
sqFt: '744',
built: '1997',
owner: 'Company Y',
manager: 'MyPMC',
type: 'Conventional',
},
{
id: '6',
name: 'Hawaiian Palms',
address: '3540 Northwest 50 Avenue',
city: 'Lauderdal Lakes',
state: 'FL',
postal: '33071-5615',
county: 'Broward',
units: '275',
sqFt: '1146',
built: '2001',
owner: 'Company Z',
manager: 'MyPMC',
type: '',
},
]
const gridOptions = {
columnDefs: columnDefs,
headerHeight: 42,
rowData: rowData,
rowHeight: 42,
}
document.addEventListener('DOMContentLoaded', function() {
var agGridDiv = document.querySelector('#ag-grid-column-groups')
new window.agGrid.Grid(agGridDiv, gridOptions)
})
<div id="ag-grid-sorting" style="height: 250px;" class="raul-grid"></div>
const columnDefs = [
{headerName: 'ID', field: 'id', sort: 'asc'},
{headerName: 'Name', field: 'name'},
{headerName: 'Address', field: 'address'},
{headerName: 'City', field: 'city'},
{headerName: 'State', field: 'state'},
{headerName: 'Postal', field: 'postal'},
{headerName: 'County', field: 'county'},
{headerName: 'Units', field: 'units'},
{headerName: 'Sq Ft', field: 'sqFt'},
{headerName: 'Built', field: 'built'},
{headerName: 'Owner', field: 'owner'},
{headerName: 'Manager', field: 'manager'},
{headerName: 'Type', field: 'type'},
]
const rowData = [
{
id: '1',
name: 'Innovo Living On Atlantic',
address: '801 Harbor Inn Drive',
city: 'Coral Springs',
state: 'FL',
postal: '33071-5615',
county: 'Broward',
units: '310',
sqFt: '1000',
built: '2000',
owner: 'Company X',
manager: 'MyPMC',
type: 'Conventional',
},
{
id: '2',
name: 'Whispering Palms',
address: '4540 Northwest 36 Street',
city: 'Lauderdal Lakes',
state: 'FL',
postal: '33319-6439',
county: 'Broward',
units: '214',
sqFt: '744',
built: '1997',
owner: 'Company Y',
manager: 'MyPMC',
type: 'Conventional',
},
{
id: '3',
name: 'Hawaiian Palms',
address: '3540 Northwest 50 Avenue',
city: 'Lauderdal Lakes',
state: 'FL',
postal: '33071-5615',
county: 'Broward',
units: '275',
sqFt: '1146',
built: '2001',
owner: 'Company Z',
manager: '',
type: 'Conventional',
},
{
id: '4',
name: 'Innovo Living On Atlantic',
address: '801 Harbor Inn Drive',
city: 'Coral Springs',
state: 'FL',
postal: '33071-5615',
county: 'Broward',
units: '310',
sqFt: '1000',
built: '2000',
owner: 'Company X',
manager: 'MyPMC',
type: '',
},
{
id: '5',
name: 'Whispering Palms',
address: '4540 Northwest 36 Street',
city: 'Lauderdal Lakes',
state: 'FL',
postal: '33319-6439',
county: 'Broward',
units: '214',
sqFt: '744',
built: '1997',
owner: 'Company Y',
manager: 'MyPMC',
type: 'Conventional',
},
{
id: '6',
name: 'Hawaiian Palms',
address: '3540 Northwest 50 Avenue',
city: 'Lauderdal Lakes',
state: 'FL',
postal: '33071-5615',
county: 'Broward',
units: '275',
sqFt: '1146',
built: '2001',
owner: 'Company Z',
manager: 'MyPMC',
type: '',
},
]
const gridOptions = {
columnDefs: columnDefs,
enableSorting: true,
headerHeight: 42,
rowData: rowData,
rowHeight: 42,
}
document.addEventListener('DOMContentLoaded', function() {
var agGridDiv = document.querySelector('#ag-grid-sorting')
new window.agGrid.Grid(agGridDiv, gridOptions)
})