Products

Play with some of the Features

const { onload } = lemonade;

export default function Counter() {
	onload(() => {
		jspreadsheet(document.getElementById("root"), {
			worksheets: [{
				data: [
            	    ['US', 'Cheese', '2019-02-12'],
            	    ['CA', 'Apples', '2019-03-01'],
            	    ['CA', 'Carrots', '2018-11-10'],
            	    ['BR', 'Oranges', '2019-01-12'],
            	],
				allowComments: true,
				comments: {
                	B1: 'Initial comments on B1',
                	C1: 'Initial comments on C1'
            	},
			}]
		})
	})

    return render => render`
        <div id="root">  
        </div>
    `
}
const { onload } = lemonade;

export default function Counter() {
	onload(() => {
		jspreadsheet(document.getElementById("root"), {
			worksheets: [{
        		data: [
        		    ['Jazz', 'Honda'],
        		    ['Civic', 'Honda'],
        		    ['Civic', 'Honda'],
        		    ['Picanto', 'Kia'],
        		    ['Optima', 'Kia'],
        		],
        		filters: true,
			}]
		})
	})

    return render => render`
        <div id="root">  
        </div>
    `
}
const { onload } = lemonade;

export default function Counter() {
	onload(() => {
		jspreadsheet(document.getElementById("root"), {
			worksheets: [{
        		minDimensions: [50,10],
        		tableOverflow: true,
        		tableWidth: '300px',
        		freezeColumns: 1
			}]
		})
	})

    return render => render`
        <div id="root">  
        </div>
    `
}
const { onload } = lemonade;

export default function Counter() {
	onload(() => {
		jspreadsheet(document.getElementById("root"), {
			worksheets: [{
        		data: [
        		    ['Cheese', 10, 6.00],
        		    ['Apples', 5, 4.00],
        		    ['Carrots', 5, 1.00],
        		    ['Oranges', 6, 2.00],
        		],
        		footers: [
        		    [
        		        'Total',
        		        '=SUM(B1:B4)',
        		        '=SUM(C1:C4)',
        		    ]
        		],
			}]
		})
	})

    return render => render`
        <div id="root">  
        </div>
    `
}
const { onload } = lemonade;

export default function Counter() {
	onload(() => {
		jspreadsheet(document.getElementById("root"), {
			worksheets: [{
        		data: [
        		    ['Cheese', 10, 6.00],
        		    ['Apples', 5, 4.00],
        		    ['Carrots', 5, 1.00],
        		    ['Oranges', 6, 2.00],
        		],
        		columns: [
        		    { title: 'Product' },
        		    { title: 'Quantity' },
        		    { title: 'Price' }
        		],
			}]
		})
	})

    return render => render`
        <div id="root">  
        </div>
    `
}
const { onload } = lemonade;

export default function Counter() {
	onload(() => {
		jspreadsheet(document.getElementById("root"), {
			worksheets: [{
        		minDimensions: [3, 3],
        		style: {
					'A1': 'background-color: #ffccff;',
        		    'B1': 'background-color: #ccffff;',
					'C1': 'background-color: #ffffcc;'
        		},
			}]
		})
	})

    return render => render`
        <div id="root">  
        </div>
    `
}
const { onload } = lemonade;

export default function Counter() {
	onload(() => {
		jspreadsheet(document.getElementById("root"), {
			worksheets: [{
				data: [
            	    ['US'],
            	    ['CH'],
            	    ['CA'],
            	    ['BR'],
					['JP'],
					['AR'],
					['UK'],
					['KR'],
					['ES'],
            	],
				pagination: 5
			}]
		})
	})

    return render => render`
        <div id="root">  
        </div>
    `
}