figma-gridgen
Version:
Utilizes built-in Figma rectangles, lines, and texts to generate tables with neatly organized layers
261 lines • 7.81 kB
HTML
<body>
<div id="lds" class="lds-container">
<div class="lds-dual-ring"></div>
</div>
<div id="pickerModal" class="modal">
<div class="modal-content">
<span id="closeSpan" class="close">×</span>
<div id="backgroundPicker"></div>
</div>
</div>
<div class="row">
<h4>Constraints</h4>
</div>
<div class="row">
<div class="options-radio-buttons-wrapper">
<input type="radio" class="options-radio-button" name="options-radio-buttons" id="cell-and-table-size" />
<label for="cell-and-table-size">Cell &<br />Table Size</label><input type="radio" class="options-radio-button"
name="options-radio-buttons" id="count-and-cell-size" />
<label for="count-and-cell-size">Count &<br />Cell Size</label>
<input type="radio" class="options-radio-button" name="options-radio-buttons" id="count-and-table-size" />
<label for="count-and-table-size">Count &<br />Table Size</label>
</div>
</div>
<div class="row">
<h4>Table Properties</h4>
</div>
<div id="table-size" class="row">
<div class="column half">
<div class="column third">
<p>Width</p>
</div>
<div class="column" style="width: 45%;">
<input type="text" id="tableWidth" />
</div>
<div class="column one-sixth">
<p>px</p>
</div>
</div>
<div class="column half">
<div class="column third">
<p>Height</p>
</div>
<div class="column" style="width: 45%;">
<input type="text" id="tableHeight" />
</div>
<div class="column one-sixth">
<p>px</p>
</div>
</div>
</div>
<div id="row-column-count" class="row">
<div class="column half">
<div class="column half">
<p>Columns</p>
</div>
<div class="column third">
<input type="text" id="columns" />
</div>
</div>
<div class="column half">
<div class="column third">
<p>Rows</p>
</div>
<div class="column third">
<input type="text" id="rows" />
</div>
</div>
</div>
<div class="row">
<div class="column half">
<p>Primary table color</p>
</div>
<div class="column half">
<div class="row" style="padding: 0px;">
<div class="column eighty">
<input type="text" id="primarybackgroundColor" />
</div>
<div class="column twenty btn-standalone">
<button id="primaryPickerButton" style="margin-top: 3px;">⬇</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="column">
<input id="tableFontFamily" type="text" list="tableFontFamilyOptions" />
<datalist id="tableFontFamilyOptions"></datalist>
</div>
</div>
<div class="row">
<div class="column half">
<select id="tableFontStyle"></select>
</div>
<div class="column half">
<div class="column two-thirds">
<input type="text" id="tableFontSize" />
</div>
<div class="column third">
<p>px</p>
</div>
</div>
</div>
<div class="row">
<h4>Cell Properties</h4>
</div>
<div id="cell-size" class="row">
<div class="column half">
<div class="column third">
<p>Width</p>
</div>
<div class="column third">
<input type="text" id="columnWidth" />
</div>
<div class="column third">
<p>px</p>
</div>
</div>
<div class="column half">
<div class="column third">
<p>Height</p>
</div>
<div class="column third">
<input type="text" id="rowHeight" />
</div>
<div class="column third">
<p>px</p>
</div>
</div>
</div>
<div class="row">
<h4>Header Properties</h4>
</div>
<div id="headerCheckbox" class="row">
<div class="column half">
<p>My table has headers</p>
</div>
<div class="column half">
<div class="row zero-padding">
<div class="column third">
<label class="container">
<input id="header" type="checkbox" />
<span class="figma-checkbox"></span>
</label>
</div>
<div class="column third">
<input type="text" id="headerHeight" />
</div>
<div class="column third">
<p>px</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="column">
<input id="headerFontFamily" type="text" list="headerFontFamilyOptions" />
<datalist id="headerFontFamilyOptions"></datalist>
</div>
</div>
<div class="row">
<div class="column half">
<select id="headerFontStyle"></select>
</div>
<div class="column half">
<div class="column two-thirds">
<input type="text" id="headerFontSize" />
</div>
<div class="column third">
<p>px</p>
</div>
</div>
</div>
<div id="floatingFiltersCheckbox" class="row toggle-display is-visible">
<div class="column half">
<p>Include floating filters</p>
</div>
<div class="column half">
<div class="row zero-padding">
<div class="column third">
<label class="container">
<input id="floatingFilter" type="checkbox" />
<span class="figma-checkbox"></span>
</label>
</div>
<div class="column third">
<input type="text" id="floatingFilterHeight" />
</div>
<div class="column third">
<p>px</p>
</div>
</div>
</div>
</div>
<div class="row">
<h4>Customizations</h4>
</div>
<div class="row">
<div class="column half">
<p>My table is striped</p>
</div>
<div class="column half">
<div class="row zero-padding">
<div class="column quarter">
<label class="container">
<input id="alternateBackgrounds" type="checkbox" />
<span class="figma-checkbox"></span>
</label>
</div>
<div class="column three-fourths">
<div class="row" style="padding: 0px;">
<div class="column eighty">
<input type="text" id="stripedbackgroundColor" />
</div>
<div class="column twenty btn-standalone">
<button id="stripedPickerButton" style="margin-top: 3px;">⬇</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="column half">
<p>My table has borders</p>
</div>
<div class="column half">
<div class="row zero-padding">
<div class="column quarter">
<label class="container">
<input id="borders" type="checkbox" />
<span class="figma-checkbox"></span>
</label>
</div>
<div class="column three-fourths">
<div class="row" style="padding: 0px;">
<div class="column eighty">
<input type="text" id="borderColor" />
</div>
<div class="column twenty btn-standalone">
<button id="borderPickerButton" style="margin-top: 3px;">⬇</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" id="validators">
<p id="validValidator" class="validator show"> </p>
<p id="negativeValidator" class="validator">Value must be numeric with a minimum of 1px.</p>
<p id="minimumRowsValidator" class="validator">Minimum row count with header is 2.</p>
<p id="constraintValidator" class="validator">Exceeds 5000px by 5000px or 100 row/col.</p>
</div>
<div class="row">
<div class="column half btn-standalone">
<button id="reset">Reset</button>
</div>
<div class="column half btn-standalone primary">
<button id="create">Create</button>
</div>
</div>
</body>