DHTMLX Spreadsheet. Column and row sizing, sort order example
This demo shows how to configure custom column widths and row heights in the dataset, and sort cell ranges using the sortCells() method in DHTMLX Spreadsheet.
Live example
const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
menu: true,
});
spreadsheet.parse(dataset);
spreadsheet.sortCells("Report!A1:A15", 1); // 1 to sort alphabetically from a to z (asc), -1 to sort alphabetically from z to a (desc)y from z to a (desc)<!-- component container -->
<div style="height: 100%; max-width: 100%;" id="spreadsheet"></div>
<!-- dataset -->
<script>
const dataset = {
styles: {
red_text: { color: "#E94633" },
center_bold: {
"font-weight": "bold",
"justify-content": "center",
"text-align": "center",
},
bold: {
"font-weight": "bold",
},
text_end: {
"justify-content": "flex-end",
"text-align": "right",
},
blue_background: {
background: "#B3E5FC",
},
},
sheets: [
{
name: "Report",
freeze: { row: 1 },
data: [
{
cell: "A1",
css: "bold",
format: "common",
value: "You can set the width, height of the cell and sorting direction ",
},
{
cell: "A2",
format: "common",
value: 10,
},
{
cell: "A3",
format: "common",
value: 7,
},
{ cell: "C3", css: "someclass", format: "number" },
{
cell: "A4",
format: "common",
value: 3,
},
{ cell: "C4", css: "someclass", format: "number" },
{
cell: "A5",
format: "common",
value: 5,
},
{
cell: "A6",
format: "common",
value: 6,
},
{
cell: "A7",
format: "common",
value: 9,
},
{
cell: "A8",
format: "common",
value: 1,
},
{
cell: "A9",
format: "common",
value: 8,
},
{
cell: "A10",
format: "common",
value: 2,
},
{
cell: "A11",
format: "common",
value: 4,
},
],
cols: [
{ width: 400 }, // setting the width of the cell
{ width: 120 },
{ width: 120 },
{ width: 120 },
{ width: 120 },
],
rows: [
{ height: 60 }, // setting the height of the cell
{ height: 32 },
{ height: 32 },
{ height: 32 },
{ height: 32 },
{ height: 32 },
{ height: 32 },
{ height: 32 },
{ height: 32 },
{ height: 32 },
{ height: 32 },
],
},
{
name: "Income",
data: [
{
cell: "B1",
css: "text_end bold",
format: "General",
value: "Jan",
},
{
cell: "C1",
css: "text_end bold",
format: "General",
value: "Feb",
},
{
cell: "D1",
css: "text_end bold",
format: "General",
value: "Mar",
},
{
cell: "E1",
css: "text_end bold",
format: "General",
value: "Apr",
},
{
cell: "F1",
css: "text_end bold",
format: "General",
value: "May",
},
{
cell: "G1",
css: "text_end bold",
format: "General",
value: "Jun",
},
{
cell: "H1",
css: "text_end bold",
format: "General",
value: "Jul",
},
{
cell: "I1",
css: "text_end bold",
format: "General",
value: "Aug",
},
{
cell: "J1",
css: "text_end bold",
format: "General",
value: "Sep",
},
{
cell: "K1",
css: "text_end bold",
format: "General",
value: "Oct",
},
{
cell: "L1",
css: "text_end bold",
format: "General",
value: "Nov",
},
{
cell: "M1",
css: "text_end bold",
format: "General",
value: "Dec",
},
{
cell: "N1",
css: "text_end bold",
format: "General",
value: "Total",
},
{
cell: "A2",
format: "General",
css: "bold",
value: "Drone",
},
{
cell: "B2",
css: "text_end",
format: "currency",
value: 500000,
},
{
cell: "C2",
css: "text_end",
format: "currency",
value: 200000,
},
{
cell: "D2",
css: "text_end",
format: "currency",
value: 700000,
},
{
cell: "E2",
css: "text_end",
format: "currency",
value: 750000,
},
{
cell: "F2",
css: "text_end",
format: "currency",
value: 600000,
},
{
cell: "G2",
css: "text_end",
format: "currency",
value: 800000,
},
{
cell: "H2",
css: "text_end",
format: "currency",
value: 500000,
},
{
cell: "I2",
css: "text_end",
format: "currency",
value: 100000,
},
{
cell: "J2",
css: "text_end",
format: "currency",
value: 750000,
},
{
cell: "K2",
css: "text_end",
format: "currency",
value: 900000,
},
{
cell: "L2",
css: "text_end",
format: "currency",
value: 200000,
},
{
cell: "M2",
css: "text_end",
format: "currency",
value: 950000,
},
{
cell: "N2",
css: "text_end",
format: "currency",
value: "=SUM(B2:M2)",
},
{
cell: "A3",
css: "bold",
format: "General",
value: "VR Glasses",
},
{
cell: "B3",
css: "text_end",
format: "currency",
value: 80000,
},
{
cell: "C3",
css: "text_end",
format: "currency",
value: 75000,
},
{
cell: "D3",
css: "text_end",
format: "currency",
value: 90000,
},
{
cell: "E3",
css: "text_end",
format: "currency",
value: 100000,
},
{
cell: "F3",
css: "text_end",
format: "currency",
value: 95000,
},
{
cell: "G3",
css: "text_end",
format: "currency",
value: 105000,
},
{
cell: "H3",
css: "text_end",
format: "currency",
value: 102500,
},
{
cell: "I3",
css: "text_end",
format: "currency",
value: 75000,
},
{
cell: "J3",
css: "text_end",
format: "currency",
value: 85000,
},
{
cell: "K3",
css: "text_end",
format: "currency",
value: 90000,
},
{
cell: "L3",
css: "text_end",
format: "currency",
value: 120000,
},
{
cell: "M3",
css: "text_end",
format: "currency",
value: 112500,
},
{
cell: "N3",
css: "text_end",
format: "currency",
value: "=SUM(B3:M3)",
},
{
cell: "A4",
css: "bold",
format: "General",
value: "Voice Remote Control",
},
{
cell: "B4",
css: "text_end",
format: "currency",
value: 20000,
},
{
cell: "C4",
css: "text_end",
format: "currency",
value: 25000,
},
{
cell: "D4",
css: "text_end",
format: "currency",
value: 26500,
},
{
cell: "E4",
css: "text_end",
format: "currency",
value: 25750,
},
{
cell: "F4",
css: "text_end",
format: "currency",
value: 23500,
},
{
cell: "G4",
css: "text_end",
format: "currency",
value: 21000,
},
{
cell: "H4",
css: "text_end",
format: "currency",
value: 21500,
},
{
cell: "I4",
css: "text_end",
format: "currency",
value: 19800,
},
{
cell: "J4",
css: "text_end",
format: "currency",
value: 21500,
},
{
cell: "K4",
css: "text_end",
format: "currency",
value: 25000,
},
{
cell: "L4",
css: "text_end",
format: "currency",
value: 27500,
},
{
cell: "M4",
css: "text_end",
format: "currency",
value: 26000,
},
{
cell: "N4",
css: "text_end",
format: "currency",
value: "=SUM(B4:M4)",
},
{
cell: "A5",
css: "bold",
format: "General",
value: "Touch Projector",
},
{
cell: "B5",
css: "text_end",
format: "currency",
value: "=7000",
},
{
cell: "C5",
css: "text_end",
format: "currency",
value: 9250,
},
{
cell: "D5",
css: "text_end",
format: "currency",
value: 8000,
},
{
cell: "E5",
css: "text_end",
format: "currency",
value: 9000,
},
{
cell: "F5",
css: "text_end",
format: "currency",
value: 10000,
},
{
cell: "G5",
css: "text_end",
format: "currency",
value: 8500,
},
{
cell: "H5",
css: "text_end",
format: "currency",
value: 9000,
},
{
cell: "I5",
css: "text_end",
format: "currency",
value: 7200,
},
{
cell: "J5",
css: "text_end",
format: "currency",
value: 9500,
},
{
cell: "K5",
css: "text_end",
format: "currency",
value: 10000,
},
{
cell: "L5",
css: "text_end",
format: "currency",
value: 11000,
},
{
cell: "M5",
css: "text_end",
format: "currency",
value: 9000,
},
{
cell: "N5",
css: "text_end",
format: "currency",
value: "=SUM(B5:M5)",
},
{
cell: "A6",
css: "bold",
format: "General",
value: "Smart Band",
},
{
cell: "B6",
css: "text_end",
format: "currency",
value: 50000,
},
{
cell: "C6",
css: "text_end",
format: "currency",
value: 52000,
},
{
cell: "D6",
css: "text_end",
format: "currency",
value: 53000,
},
{
cell: "E6",
css: "text_end",
format: "currency",
value: 53500,
},
{
cell: "F6",
css: "text_end",
format: "currency",
value: 52500,
},
{
cell: "G6",
css: "text_end",
format: "currency",
value: 51000,
},
{
cell: "H6",
css: "text_end",
format: "currency",
value: 50000,
},
{
cell: "I6",
css: "text_end",
format: "currency",
value: 49000,
},
{
cell: "J6",
css: "text_end",
format: "currency",
value: 51000,
},
{
cell: "K6",
css: "text_end",
format: "currency",
value: 52500,
},
{
cell: "L6",
css: "text_end",
format: "currency",
value: 56000,
},
{
cell: "M6",
css: "text_end",
format: "currency",
value: 53000,
},
{
cell: "N6",
css: "text_end",
format: "currency",
value: "=SUM(B6:M6)",
},
{
cell: "A7",
css: "bold",
format: "General",
value: "Video Doorbell",
},
{
cell: "B7",
css: "text_end",
format: "currency",
value: 18000,
},
{
cell: "C7",
css: "text_end",
format: "currency",
value: 19500,
},
{
cell: "D7",
css: "text_end",
format: "currency",
value: 20500,
},
{
cell: "E7",
css: "text_end",
format: "currency",
value: 20250,
},
{
cell: "F7",
css: "text_end",
format: "currency",
value: 20500,
},
{
cell: "G7",
css: "text_end",
format: "currency",
value: 19000,
},
{
cell: "H7",
css: "text_end",
format: "currency",
value: 18000,
},
{
cell: "I7",
css: "text_end",
format: "currency",
value: 16500,
},
{
cell: "J7",
css: "text_end",
format: "currency",
value: 17000,
},
{
cell: "K7",
css: "text_end",
format: "currency",
value: 18500,
},
{
cell: "L7",
css: "text_end",
format: "currency",
value: 19000,
},
{
cell: "M7",
css: "text_end",
format: "currency",
value: 18500,
},
{
cell: "N7",
css: "text_end",
format: "currency",
value: "=SUM(B7:M7)",
},
{
cell: "A8",
css: "bold",
format: "General",
value: "Smart TV",
},
{
cell: "B8",
css: "text_end",
format: "currency",
value: 310000,
},
{
cell: "C8",
css: "text_end",
format: "currency",
value: 295000,
},
{
cell: "D8",
css: "text_end",
format: "currency",
value: 315000,
},
{
cell: "E8",
css: "text_end",
format: "currency",
value: 320000,
},
{
cell: "F8",
css: "text_end",
format: "currency",
value: 295000,
},
{
cell: "G8",
css: "text_end",
format: "currency",
value: 280000,
},
{
cell: "H8",
css: "text_end",
format: "currency",
value: 290000,
},
{
cell: "I8",
css: "text_end",
format: "currency",
value: 285000,
},
{
cell: "J8",
css: "text_end",
format: "currency",
value: 300000,
},
{
cell: "K8",
css: "text_end",
format: "currency",
value: 315000,
},
{
cell: "L8",
css: "text_end",
format: "currency",
value: 340000,
},
{
cell: "M8",
css: "text_end",
format: "currency",
value: 335000,
},
{
cell: "N8",
css: "text_end",
format: "currency",
value: "=SUM(B8:M8)",
},
{
cell: "A9",
css: "bold",
format: "General",
value: "Robot Vacuum",
},
{
cell: "B9",
css: "text_end",
format: "currency",
value: 50000,
},
{
cell: "C9",
css: "text_end",
format: "currency",
value: 55000,
},
{
cell: "D9",
css: "text_end",
format: "currency",
value: 57500,
},
{
cell: "E9",
css: "text_end",
format: "currency",
value: 60000,
},
{
cell: "F9",
css: "text_end",
format: "currency",
value: 62500,
},
{
cell: "G9",
css: "text_end",
format: "currency",
value: 57500,
},
{
cell: "H9",
css: "text_end",
format: "currency",
value: 55000,
},
{
cell: "I9",
css: "text_end",
format: "currency",
value: 50000,
},
{
cell: "J9",
css: "text_end",
format: "currency",
value: 57500,
},
{
cell: "K9",
css: "text_end",
format: "currency",
value: 60000,
},
{
cell: "L9",
css: "text_end",
format: "currency",
value: 62500,
},
{
cell: "M9",
css: "text_end",
format: "currency",
value: 65000,
},
{
cell: "N9",
css: "text_end",
format: "currency",
value: "=SUM(B9:M9)",
},
{
cell: "A10",
css: "bold",
format: "General",
value: "Air Purifier",
},
{
cell: "B10",
css: "text_end",
format: "currency",
value: 15000,
},
{
cell: "C10",
css: "text_end",
format: "currency",
value: 20000,
},
{
cell: "D10",
css: "text_end",
format: "currency",
value: 25000,
},
{
cell: "E10",
css: "text_end",
format: "currency",
value: 30000,
},
{
cell: "F10",
css: "text_end",
format: "currency",
value: 25000,
},
{
cell: "G10",
css: "text_end",
format: "currency",
value: 27500,
},
{
cell: "H10",
css: "text_end",
format: "currency",
value: 25000,
},
{
cell: "I10",
css: "text_end",
format: "currency",
value: 20000,
},
{
cell: "J10",
css: "text_end",
format: "currency",
value: 25000,
},
{
cell: "K10",
css: "text_end",
format: "currency",
value: 30000,
},
{
cell: "L10",
css: "text_end",
format: "currency",
value: 27500,
},
{
cell: "M10",
css: "text_end",
format: "currency",
value: 30000,
},
{
cell: "N10",
css: "text_end",
format: "currency",
value: "=SUM(B10:M10)",
},
{
cell: "A11",
css: "bold",
format: "General",
value: "Baby Monitor",
},
{
cell: "B11",
css: "text_end",
format: "currency",
value: 25000,
},
{
cell: "C11",
css: "text_end",
format: "currency",
value: 27000,
},
{
cell: "D11",
css: "text_end",
format: "currency",
value: 27500,
},
{
cell: "E11",
css: "text_end",
format: "currency",
value: 26500,
},
{
cell: "F11",
css: "text_end",
format: "currency",
value: 28000,
},
{
cell: "G11",
css: "text_end",
format: "currency",
value: 29000,
},
{
cell: "H11",
css: "text_end",
format: "currency",
value: 29500,
},
{
cell: "I11",
css: "text_end",
format: "currency",
value: 25000,
},
{
cell: "J11",
css: "text_end",
format: "currency",
value: 26000,
},
{
cell: "K11",
css: "text_end",
format: "currency",
value: 27000,
},
{
cell: "L11",
css: "text_end",
format: "currency",
value: 27500,
},
{
cell: "M11",
css: "text_end",
format: "currency",
value: 25000,
},
{
cell: "N11",
css: "text_end",
format: "currency",
value: "=SUM(B11:M11)",
},
{
cell: "A12",
format: "General",
value: "Total",
css: "bold",
},
{
cell: "B12",
css: "text_end bold",
format: "currency",
value: "=SUM(B2:B11)",
},
{
cell: "C12",
css: "text_end bold",
format: "currency",
value: "=SUM(C2:C11)",
},
{
cell: "D12",
css: "text_end bold",
format: "currency",
value: "=SUM(D2:D11)",
},
{
cell: "E12",
css: "text_end bold",
format: "currency",
value: "=SUM(E2:E11)",
},
{
cell: "F12",
css: "text_end bold",
format: "currency",
value: "=SUM(F2:F11)",
},
{
cell: "G12",
css: "text_end bold",
format: "currency",
value: "=SUM(G2:G11)",
},
{
cell: "H12",
css: "text_end bold",
format: "currency",
value: "=SUM(H2:H11)",
},
{
cell: "I12",
css: "text_end bold",
format: "currency",
value: "=SUM(I2:I11)",
},
{
cell: "J12",
css: "text_end bold",
format: "currency",
value: "=SUM(J2:J11)",
},
{
cell: "K12",
css: "text_end bold",
format: "currency",
value: "=SUM(K2:K11)",
},
{
cell: "L12",
css: "text_end bold",
format: "currency",
value: "=SUM(L2:L11)",
},
{
cell: "M12",
css: "text_end bold",
format: "currency",
value: "=SUM(M2:M11)",
},
{
cell: "N12",
css: "text_end bold",
format: "currency",
value: "=SUM(N2:N11)",
length: 167,
},
],
},
{
name: "Expenses",
data: [
{
cell: "B1",
css: "text_end bold",
format: "General",
value: "PPC Campaigns",
},
{
cell: "C1",
css: "text_end bold",
format: "General",
value: "Sponsored Articles",
},
{ cell: "D1", css: "text_end bold", format: "General", value: "SMM" },
{
cell: "E1",
format: "General",
value: "Total",
css: "bold text_end",
},
{
cell: "A2",
css: "bold",
format: "General",
value: "Drone",
},
{ cell: "B2", css: "text_end", format: "currency", value: 150000 },
{ cell: "C2", css: "text_end", format: "currency", value: 25000 },
{ cell: "D2", css: "text_end", format: "currency", value: 150000 },
{
cell: "E2",
css: "text_end",
format: "currency",
value: "=SUM(B2:D2)",
},
{
cell: "A3",
css: "bold",
format: "General",
value: "VR Glasses",
},
{
cell: "B3",
css: "text_end",
format: "currency",
value: 40000,
},
{
cell: "C3",
css: "text_end",
format: "currency",
value: 0,
},
{
cell: "D3",
css: "text_end",
format: "currency",
value: 15000,
},
{
cell: "E3",
css: "text_end",
format: "currency",
value: "=SUM(B3:D3)",
},
{
cell: "A4",
format: "General",
css: "bold",
value: "Voice Remote, Control",
},
{
cell: "B4",
css: "text_end",
format: "currency",
value: 25000,
},
{
cell: "C4",
css: "text_end",
format: "currency",
value: 5000,
},
{
cell: "D4",
css: "text_end",
format: "currency",
value: 5000,
},
{
cell: "E4",
css: "text_end",
format: "currency",
value: "=SUM(B4:D4)",
},
{
cell: "A5",
format: "General",
css: "bold",
value: "Touch Projector",
},
{
cell: "B5",
css: "text_end",
format: "currency",
value: 105500,
},
{
cell: "C5",
css: "text_end",
format: "currency",
value: 3500,
},
{
cell: "D5",
css: "text_end",
format: "currency",
value: 3000,
},
{
cell: "E5",
css: "text_end",
format: "currency",
value: "=SUM(B5:D5)",
},
{
cell: "A6",
format: "General",
css: "bold",
value: "Smart Band",
},
{
cell: "B6",
css: "text_end",
format: "currency",
value: 50000,
},
{
cell: "C6",
css: "text_end",
format: "currency",
value: 0,
},
{
cell: "D6",
css: "text_end",
format: "currency",
value: 5000,
},
{
cell: "E6",
css: "text_end",
format: "currency",
value: "=SUM(B6:D6)",
},
{
cell: "A7",
format: "General",
css: "bold",
value: "Video Doorbell",
},
{
cell: "B7",
css: "text_end",
format: "currency",
value: 5000,
},
{
cell: "C7",
css: "text_end",
format: "currency",
value: 5000,
},
{
cell: "D7",
css: "text_end",
format: "currency",
value: 500,
},
{
cell: "E7",
css: "text_end",
format: "currency",
value: "=SUM(B7:D7)",
},
{
cell: "A8",
format: "General",
css: "bold",
value: "Smart TV",
},
{
cell: "B8",
css: "text_end",
format: "currency",
value: 50000,
},
{
cell: "C8",
css: "text_end",
format: "currency",
value: 30000,
},
{
cell: "D8",
css: "text_end",
format: "currency",
value: 10000,
},
{
cell: "E8",
css: "text_end",
format: "currency",
value: "=SUM(B8:D8)",
},
{
cell: "A9",
format: "General",
css: "bold",
value: "Robot Vacuum",
},
{
cell: "B9",
css: "text_end",
format: "currency",
value: 50000,
},
{
cell: "C9",
css: "text_end",
format: "currency",
value: 0,
},
{
cell: "D9",
css: "text_end",
format: "currency",
value: 5000,
},
{
cell: "E9",
css: "text_end",
format: "currency",
value: "=SUM(B9:D9)",
},
{
cell: "A10",
format: "General",
css: "bold",
value: "Air Purifier",
},
{
cell: "B10",
css: "text_end",
format: "currency",
value: 30000,
},
{
cell: "C10",
css: "text_end",
format: "currency",
value: 10000,
},
{
cell: "D10",
css: "text_end",
format: "currency",
value: 50000,
},
{
cell: "E10",
css: "text_end",
format: "currency",
value: "=SUM(B10:D10)",
},
{
cell: "A11",
format: "General",
css: "bold",
value: "Baby Monitor",
},
{
cell: "B11",
css: "text_end",
format: "currency",
value: 80000,
},
{
cell: "C11",
css: "text_end",
format: "currency",
value: 5000,
},
{
cell: "D11",
css: "text_end",
format: "currency",
value: 2500,
},
{
cell: "E11",
css: "text_end",
format: "currency",
value: "=SUM(B11:D11)",
},
{
cell: "A12",
format: "General",
value: "Total",
css: "bold",
},
{
cell: "B12",
css: "text_end bold",
format: "currency",
value: "=SUM(B2:B11)",
},
{
cell: "C12",
css: "text_end bold",
format: "currency",
value: "=SUM(C2:C11)",
},
{
cell: "D12",
css: "text_end bold",
format: "currency",
value: "=SUM(D2:D11)",
},
{
cell: "E12",
css: "bold text_end",
format: "currency",
value: "=SUM(E2:E11)",
},
],
},
],
};
</script>Spreadsheets with mixed content, such as short labels in narrow columns, long descriptions in wide ones, and tall rows for multi-line headers, need per-column and per-row sizing. Combined with programmatic sorting, this gives developers full control over both layout and data order without relying on user interaction.
This example defines a sheets array with cols and rows configuration objects. In the Report sheet, the first column is set to width: 400 and the first row to height: 60, while unspecified columns and rows use the default sizes of 120px and 32px. After loading data, spreadsheet.sortCells("Report!A1:A15", 1) sorts the target range in ascending order, where 1 means ascending and -1 means descending.
Solution overview
- Build a dataset with
sheets, includingcols,rows, anddataconfiguration for the target sheet - Create the Spreadsheet with
new dhx.Spreadsheet("spreadsheet", { menu: true })and load data withspreadsheet.parse(dataset) - Call
spreadsheet.sortCells("Report!A1:A15", 1)to sort the range in ascending order
Key points
- Dataset sizing: Column widths and row heights are configured directly in the parsed dataset through
colsandrows - Default sizes: Unspecified columns default to 120px width; unspecified rows default to 32px height
- Sheet-aware sorting:
sortCells("Report!A1:A15", 1)targets a specific range on theReportsheet
API reference
- parse(): Loads data including column and row sizing configuration.
- sortCells(): Sorts a range of cells in ascending or descending order.