oda-framework
Version:
74 lines (73 loc) • 4.09 kB
HTML
<oda-tester>
<oda-jspreadsheet-editor id="editor"></oda-jspreadsheet-editor>
</oda-tester>
<script type="module">
import '../../../oda.js';
import './jspreadsheet-editor.js';
editor.worksheets = [
{
data: [
['Jazz', 'Honda', '2019-02-12', '', true, '$ 2.000,00', '#777700'],
['Civic', 'Honda', '2018-07-11', '', true, '$ 4.000,01', '#007777']
],
columns: [
{ type: 'text', title: 'Car', width: 120 },
{ type: 'dropdown', title: 'Make', width: 200, source: ["Alfa Romeo", "Audi", "Bmw", "Honda"] },
{ type: 'calendar', title: 'Available', width: 200 },
{ type: 'image', title: 'Photo', width: 240 },
{ type: 'checkbox', title: 'Stock', width: 80 },
{ type: 'numeric', title: 'Price', width: 100, mask: '$ #.##,00', decimal: ',' },
{ type: 'color', width: 100, title: 'Color', render: 'square', }
]
},
{
data: [
['Crayons Crayola only (No Rose Art)', 2, 5.01, 0.01, '=B1*C1*(1-D1)'],
['Colored Pencils Crayola only', 2, 4.41, 0.02, '=B2*C2*(1-D2)'],
['Expo Dry-erase Markers Wide', 4, 3.00, 0.1, '=B3*C3*(1-D3)'],
['Index Cards Unlined', 3, 6.00, 0.03, '=B4*C4*(1-D4)'],
['Tissues', 10, 1.90, 0.01, '=B5*C5*(1-D5)'],
['Ziploc Sandwich-size Bags', 5, 1.00, 0.01, '=B6*C6*(1-D6)'],
['Thin Markers Crayola only', 2, 3.00, 0.02, '=B7*C7*(1-D7)'],
['Highlighter', 4, 1.20, 0.01, '=B8*C8*(1-D8)'],
['Total', '=SUM(B1:B8)', '=ROUND(SUM(C1:C8), 2)', '', '=SUM(E1:E8)'],
['Crayons Crayola only (No Rose Art)', 2, 5.01, 0.01, '=B1*C1*(1-D1)'],
['Colored Pencils Crayola only', 2, 4.41, 0.02, '=B2*C2*(1-D2)'],
['Expo Dry-erase Markers Wide', 4, 3.00, 0.1, '=B3*C3*(1-D3)'],
['Index Cards Unlined', 3, 6.00, 0.03, '=B4*C4*(1-D4)'],
['Tissues', 10, 1.90, 0.01, '=B5*C5*(1-D5)'],
['Ziploc Sandwich-size Bags', 5, 1.00, 0.01, '=B6*C6*(1-D6)'],
['Thin Markers Crayola only', 2, 3.00, 0.02, '=B7*C7*(1-D7)'],
['Highlighter', 4, 1.20, 0.01, '=B8*C8*(1-D8)'],
['Total', '=SUM(B1:B8)', '=ROUND(SUM(C1:C8), 2)', '', '=SUM(E1:E8)']
],
columns: [
{ type: 'text', title: 'Product', width: '300' },
{ type: 'text', title: 'Qtd', width: '80', mask: '#.##0' },
{ type: 'text', title: 'Price', width: '100px', mask: '$ #.##0,00' },
{ type: 'text', title: 'Discount', mask: '0.00%' },
{ type: 'number', title: 'Total', width: '100px', format: 'US #.##0,00' }
],
pagination: 5
},
{
data: [
['001', 'text-1', 1234567.8, 'hidden', 'audi', false, true, '', '', '#ff0000', '<h3 style="color: blue">h3</h3>', 'readonly'],
['002', 'text-2', .9, 'hidden', 'bmw', true, false, '', '', '#00ff00', '<a href="https://odajs.org/" target="blank">visit to odajs.org !</a>', 'readonly'],
],
columns: [
{ title: 'dropdown-1', source: ['001', '002', '003'] },
{ title: 'text', type: 'text' },
{ title: 'numeric', type: 'numeric', mask: "# ##0,00" },
{ title: 'hidden', type: 'hidden' },
{ title: 'dropdown-2', type: 'dropdown', source: ['audi', 'bmw', 'honda'] },
{ title: 'checkbox', type: 'checkbox' },
{ title: 'radio', type: 'radio' },
{ title: 'calendar', type: 'calendar' },
{ title: 'image', type: 'image' },
{ title: 'color', type: 'color', render: 'square' },
{ title: 'html', type: 'html' }
]
}
]
</script>