डायनामिक तरीके से टेबल रो में सेल पर कस्टम CSS क्लास सेट करना

परिचय

SAPUI5/OpenUI5 या सामान्य HTML टेबल्स में डायनामिकली पंक्तियों/सेल्स पर CSS क्लास लागू करने के पैटर्न।

CSS दृष्टिकोण: पूर्वनिर्धारित क्लास + कस्टम क्लास

/* बेस टेबल क्लास के साथ कस्टम क्लास संयोजन */
.sapMListTbl .myCustomClass {
    margin: 10px;
    color: #ffffff;
    background-color: #007bff;
    font-weight: bold;
}

/* विशिष्ट सेल के लिए */
.sapMListTbl td.myCellClass {
    padding: 8px;
    border-left: 3px solid #ff0000;
}

JavaScript/TypeScript: डायनामिक क्लास असाइनमेंट

सामान्य HTML/JS:

// पंक्ति स्तर पर
function highlightRow(rowElement, condition) {
    if (condition) {
        rowElement.classList.add('highlight-row');
    } else {
        rowElement.classList.remove('highlight-row');
    }
}

// सेल स्तर पर
function setCellClass(cellElement, className) {
    cellElement.className = className;  // सभी क्लास बदलता है
    // या
    cellElement.classList.add(className);  // जोड़ता है
}

// डेटा-आधारित: रेंडरिंग के दौरान
function renderTable(data) {
    const tbody = document.querySelector('#myTable tbody');
    tbody.innerHTML = data.map(row => `
        <tr class="${row.isUrgent ? 'urgent-row' : ''}">
            <td class="${row.statusClass}">${row.name}</td>
            <td>${row.value}</td>
        </tr>
    `).join('');
}

SAPUI5/OpenUI5 में (फॉर्मेटर के साथ):

// कंट्रोलर में फॉर्मेटर
getRowClass: function(status) {
    switch(status) {
        case "Critical": return "criticalRow";
        case "Warning": return "warningRow";
        case "Success": return "successRow";
        default: return "";
    }
},

getCellClass: function(value, threshold) {
    return value > threshold ? "highValueCell" : "normalCell";
}

// XML View में
// <Table rows="{/data}">
//     <ColumnListItem type="Navigation" class="{path: 'status', formatter: '.getRowClass'}">
//         <cells>
//             <Text text="{name}" class="{path: 'value', formatter: '.getCellClass'}" />
//             <Text text="{value}" />
//         </cells>
//     </ColumnListItem>
// </Table>

React/Vue/Angular में:

// React उदाहरण
const Row = ({ item }) => (
    <tr className={item.isActive ? 'active-row' : ''}>
        <td className={item.value > 100 ? 'high' : 'low'}>{item.name}</td>
        <td>{item.value}</td>
    </tr>
);

// Vue उदाहरण
// <tr :class="{ 'active-row': item.isActive }">
//     <td :class="item.value > 100 ? 'high' : 'low'">{{ item.name }}</td>
// </tr>

सर्वोत्तम अभ्यास

• इनलाइन स्टाइल्स के बजाय CSS क्लासेस उपयोग करें (रखरखाव, प्रदर्शन)
• सेमेंटिक क्लास नाम: `.status-critical` नहीं `.red-background`
• फॉर्मेटर/कंप्यूटेड प्रॉपर्टीज में लॉजिक रखें, टेम्प्लेट में नहीं
• BEM नामकरण: `.table__row--critical`
• पुनरावृति के दौरान DOM मैनिपुलेशन से बचें - डेटा बाइंडिंग का उपयोग करें