@zohodesk/components
Version:
Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development
101 lines (83 loc) • 2.89 kB
HTML
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<title>Missed PropType Key</title>
<style>
body {
margin: 0;
padding: 0;
font-family: 'Asap Condensed', sans-serif;
}
table {
width: 100%;
border-collapse: collapse;
}
th {
position: sticky;
top: 0;
background-color: #001C30;
color: #F5F5F5;
}
th,
td {
border: 1px solid black;
padding: 8px;
}
tr:nth-child(even) {
background-color: #EDEEF7;
}
.table-container {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="table-container"></div>
<script>
const jsonData = {}
const tableContainer = document.getElementById('table-container');
const table = document.createElement('table');
const thead = document.createElement('thead');
const tbody = document.createElement('tbody');
const headerRow = document.createElement('tr');
const headers = ['No', 'Component', 'FilePath'];
headers.forEach(header => {
const th = document.createElement('th');
th.textContent = header;
headerRow.appendChild(th);
});
thead.appendChild(headerRow);
table.appendChild(thead);
var componentCount = 1;
function generateRows(component, data, innerComponent = '') {
const filePath = data.filePath ? data.filePath : '';
const row = document.createElement('tr');
const numbers = document.createElement('td');
const componentCell = document.createElement('td');
const filePathCell = document.createElement('td');
numbers.textContent = componentCount;
componentCell.textContent = component;
filePathCell.textContent = filePath;
row.appendChild(numbers);
row.appendChild(componentCell);
row.appendChild(filePathCell);
tbody.appendChild(row);
if (data.innerComponent) {
Object.entries(data.innerComponent).forEach(([innerComp, innerData]) => {
generateRows(innerComp, innerData, component);
});
}
componentCount++;
}
Object.entries(jsonData).forEach(([component, data]) => {
generateRows(component, data);
});
table.appendChild(tbody);
tableContainer.appendChild(table);
generateTable(jsonData);
</script>
</body>
</html>