DHTMLX Spreadsheet. Hiding columns and rows via API example
This demo shows how to hide columns and rows in DHTMLX Spreadsheet using the hideCols() and hideRows() API methods.
Live example
const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
menu: true
});
spreadsheet.parse(dataset);
spreadsheet.hideCols("F1:H1"); // hides columns F to H
spreadsheet.hideRows("A4,A13"); // hides rows 4 and 13<!-- component container -->
<div style="height: 100%; max-width:100%" id="spreadsheet"></div>
<!-- dataset -->
<script>
const dataset = {
"sheets": [
{
"name": "Products",
"id": "products_id",
"data": [
{
"value": "Country",
"css": "header bold left border-left border-right-gray",
"format": "common",
"cell": "A1"
},
{
"value": "Product",
"css": "header bold border-right-gray",
"format": "common",
"cell": "B1"
},
{
"value": "Price",
"css": "header bold right border-right-gray",
"format": "common",
"cell": "C1"
},
{
"value": "Amount",
"css": "header bold right border-right-gray",
"format": "common",
"cell": "D1"
},
{
"value": "Total Price",
"css": "header bold right border-right-gray200",
"format": "common",
"cell": "E1"
},
{
"value": "Ecuador",
"format": "common",
"css": "bold left bg border-left border-right-gray border-bottom-gray",
"cell": "A2"
},
{
"value": "Banana",
"format": "common",
"css": "text border-right-gray border-bottom-gray",
"cell": "B2"
},
{
"value": 6.68,
"format": "currency",
"css": "right border-right-gray border-bottom-gray",
"cell": "C2"
},
{
"value": 430,
"format": "number",
"css": "right border-right-gray border-bottom-gray",
"cell": "D2"
},
{
"value": "=C2*D2",
"format": "currency",
"css": "bold right border-right-gray200 border-bottom-gray",
"edited": false,
"editorValue": "=",
"cell": "E2"
},
{
"value": "Belarus",
"format": "common",
"css": "bold left bg border-left border-right-gray border-bottom-gray",
"cell": "A3"
},
{
"value": "Apple",
"format": "common",
"css": "text border-right-gray border-bottom-gray",
"cell": "B3"
},
{
"value": 3.75,
"format": "currency",
"css": "right border-right-gray border-bottom-gray",
"cell": "C3"
},
{
"value": 600,
"format": "number",
"css": "right border-right-gray border-bottom-gray",
"cell": "D3"
},
{
"value": "=C3*D3",
"format": "currency",
"css": "bold right border-right-gray200 border-bottom-gray",
"edited": false,
"cell": "E3"
},
{
"value": "Peru",
"format": "common",
"css": "bold left bg border-left border-right-gray border-bottom-gray",
"cell": "A4"
},
{
"value": "Grapes",
"format": "common",
"css": "text border-right-gray border-bottom-gray",
"cell": "B4"
},
{
"value": 7.69,
"format": "currency",
"css": "right border-right-gray border-bottom-gray",
"cell": "C4"
},
{
"value": 740,
"format": "number",
"css": "right border-right-gray border-bottom-gray",
"cell": "D4"
},
{
"value": "=C4*D4",
"format": "currency",
"css": "bold right border-right-gray200 border-bottom-gray",
"edited": false,
"cell": "E4"
},
{
"value": "Egypt",
"format": "common",
"css": "bold left bg border-left border-right-gray border-bottom-gray",
"cell": "A5"
},
{
"value": "Orange",
"format": "common",
"css": "text border-right-gray border-bottom-gray",
"cell": "B5"
},
{
"value": 5.86,
"format": "currency",
"css": "right border-right-gray border-bottom-gray",
"cell": "C5"
},
{
"value": 560,
"format": "number",
"css": "right border-right-gray border-bottom-gray",
"cell": "D5"
},
{
"value": "=C5*D5",
"format": "currency",
"css": "bold right border-right-gray200 border-bottom-gray",
"edited": false,
"cell": "E5"
},
{
"value": "South Africa",
"format": "common",
"css": "bold left bg border-left border-right-gray border-bottom-gray",
"cell": "A6"
},
{
"value": "Grapefruit",
"format": "common",
"css": "text border-right-gray border-bottom-gray",
"cell": "B6"
},
{
"value": 8.58,
"format": "currency",
"css": "right border-right-gray border-bottom-gray",
"cell": "C6"
},
{
"value": 800,
"format": "number",
"css": "right border-right-gray border-bottom-gray",
"cell": "D6"
},
{
"value": "=C6*D6",
"format": "currency",
"css": "bold right border-right-gray200 border-bottom-gray",
"edited": false,
"cell": "E6"
},
{
"value": "Spain",
"format": "common",
"css": "bold left bg border-left border-right-gray border-bottom-gray",
"cell": "A7"
},
{
"value": "Lemon",
"format": "common",
"css": "text border-right-gray border-bottom-gray",
"cell": "B7"
},
{
"value": 9.12,
"format": "currency",
"css": "right border-right-gray border-bottom-gray",
"cell": "C7"
},
{
"value": 650,
"format": "number",
"css": "right border-right-gray border-bottom-gray",
"cell": "D7"
},
{
"value": "=C7*D7",
"format": "currency",
"css": "bold right border-right-gray200 border-bottom-gray",
"edited": false,
"cell": "E7"
},
{
"value": "Iran",
"format": "common",
"css": "bold left bg border-left border-right-gray border-bottom-gray",
"cell": "A8"
},
{
"value": "Pomegranate",
"format": "common",
"css": "text border-right-gray border-bottom-gray",
"edited": false,
"cell": "B8"
},
{
"value": 9.67,
"format": "currency",
"css": "right border-right-gray border-bottom-gray",
"cell": "C8"
},
{
"value": 300,
"format": "number",
"css": "right border-right-gray border-bottom-gray",
"cell": "D8"
},
{
"value": "=C8*D8",
"format": "currency",
"css": "bold right border-right-gray200 border-bottom-gray",
"edited": false,
"cell": "E8"
},
{
"value": "Total",
"edited": false,
"editorValue": "T",
"format": "common",
"css": "total bold left bg border-left border-right-gray border-bottom-gray200",
"cell": "A9"
},
{
"value": "=COUNTA(B2:B8)",
"edited": false,
"editorValue": "=COUNTA(B2:B8)",
"format": "common",
"css": "total bold left border-right-gray border-bottom-gray200",
"cell": "B9"
},
{
"value": "=AVERAGE(C2:C8)",
"edited": false,
"editorValue": "=C2AVERAGE(C2:C8)",
"format": "currency",
"css": "total bold right border-right-gray border-bottom-gray200",
"cell": "C9"
},
{
"value": "=AVERAGE(D2:D8)",
"format": "number",
"css": "total bold right border-right-gray border-bottom-gray200",
"edited": false,
"cell": "D9"
},
{
"value": "=AVERAGE(E2:E8)",
"format": "currency",
"css": "total bold right border-right-gray200 border-bottom-gray200",
"edited": false,
"cell": "E9"
},
{
"value": "Row 13 and columns F, G are hidden",
"format": "common",
"css": "wrap bold",
"cell": "A12"
},
{
"value": "I was hidden",
"format": "common",
"css": "wrap",
"cell": "A13"
},
],
"freeze": { "col": 1, "row": 1 },
"cols": [
{ "width": 180, "hidden": false },
{ "width": 120, "hidden": false },
{ "width": 120, "hidden": false },
{ "width": 120, "hidden": false },
{ "width": 120, "hidden": false }
],
"rows": [
{ "height": 32, "hidden": false },
{ "height": 32, "hidden": false },
{ "height": 32, "hidden": false },
{ "height": 32, "hidden": false },
{ "height": 32, "hidden": false },
{ "height": 32, "hidden": false },
{ "height": 32, "hidden": false },
{ "height": 32, "hidden": false },
{ "height": 32, "hidden": false },
{ "height": 32, "hidden": false },
{ "height": 32, "hidden": false },
{ "height": 44, "hidden": false }
],
"merged": []
}
],
"styles": {
"header": {
"border-top": "1px solid #B0B8CD",
"border-bottom": "1px solid #D4DAE4",
"background": "#F2F2F2"
},
"bold": {
"font-weight": "bold"
},
"left": {
"white-space": "nowrap",
"text-align": "left",
"justify-content": "flex-start"
},
"right": {
"white-space": "nowrap",
"text-align": "right",
"justify-content": "flex-end"
},
"border-left": {
"border-left": "1px solid #B0B8CD"
},
"border-right-gray": {
"border-right": "1px solid #D4DAE4"
},
"border-right-gray200": {
"border-right": "1px solid #B0B8CD"
},
"border-bottom-gray": {
"border-bottom": "1px solid #D4DAE4"
},
"border-bottom-gray200": {
"border-bottom": "1px solid #B0B8CD"
},
"bg": {
"background": "#F2F2F2"
},
"text": {
"white-space": "nowrap"
},
"total": {
"white-space": "nowrap"
},
"wrap": {
"white-space": "normal",
"word-break": "break-all"
},
},
"formats": [
{ "name": "Common", "id": "common", "mask": "#,##0.##", "example": "15" },
{
"name": "Number",
"id": "number",
"mask": "#,##0.00",
"example": "15.0031"
},
{
"name": "Percent",
"id": "percent",
"mask": "#,##0.00%",
"example": "15.0031"
},
{
"name": "Currency",
"id": "currency",
"mask": "[$$]#,##0.00",
"example": "15.0031"
},
{
"name": "Date",
"id": "date",
"mask": "dd/mm/yyyy",
"example": "44490.5625"
},
{
"name": "Time",
"id": "time",
"mask": "h:mm am/pm",
"example": "44490.5625",
"timeFormat": 12
},
{ "name": "Text", "id": "text", "mask": "@", "example": "some text" }
]
};
</script>Reports and dashboards sometimes contain columns with intermediate calculations or rows with metadata that end users should not see. Hiding these elements via API keeps the data in the spreadsheet for formula references while presenting a clean, focused view to the user.
This example calls spreadsheet.hideCols("F1:H1") to hide columns F through H and spreadsheet.hideRows("A4,A13") to hide rows 4 and 13 in the loaded Products sheet. These methods accept cell-based targets and can work with ranges or comma-separated references, as shown in the canonical sample.
Solution overview
- Create the Spreadsheet with
new dhx.Spreadsheet("spreadsheet", { menu: true })and load the dataset - Call
spreadsheet.hideCols("F1:H1")to hide columns F through H - Call
spreadsheet.hideRows("A4,A13")to hide rows 4 and 13
Key points
- Range syntax: Pass a range like
"F1:H1"to hide multiple adjacent columns at once - List targeting:
hideRows()can hide separate rows in one call, as shown by"A4,A13"in the sample
API reference
- hideCols(): Hides one or more columns.
- hideRows(): Hides one or more rows.