0

I need to create a Data Table with column header and row header.

Data Table from the Component

                <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_striped">
                <thead>
                    <tr class="slds-line-height_reset">
                        <th class="" scope="col">
                            <div class="slds-truncate" title="Type">Type</div>
                        </th>
                        <th class="" scope="col">
                            <div class="slds-truncate" title="Field 1">Field 1</div>
                        </th>
                        <th class="" scope="col">
                            <div class="slds-truncate" title="Field 2">Field 2</div>
                        </th>
                        <th class="" scope="col">
                            <div class="slds-truncate" title="Field 3">Field 3</div>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="slds-hint-parent">
                        <th data-label="Type" scope="row">
                            <div class="slds-truncate" title="Field A">
                                Field A
                                <!--a href="javascript:void(0);" tabindex="-1">Cloudhub</a-->
                            </div>
                        </th>
                        <td data-label="Field 1">
                            <div class="slds-truncate" title="Field A.1">Field A.1</div>
                        </td>
                        <td data-label="Field 2">
                            <div class="slds-truncate" title="Field A.2">Field A.2</div>
                        </td>
                        <td data-label="Field 3">
                            <div class="slds-truncate" title="Field A.3">Field A.3</div>
                        </td>
                    </tr>
                    <tr class="slds-hint-parent">
                        <th data-label="Type" scope="row">
                            <div class="slds-truncate" title="Field B">
                                Field B
                                <!--a href="javascript:void(0);" tabindex="-1">Cloudhub + Anypoint Connectors</a-->
                            </div>
                        </th>
                        <td data-label="Field 1">
                            <div class="slds-truncate" title="Field B.1">Field B.1</div>
                        </td>
                        <td data-label="Field 2">
                            <div class="slds-truncate" title="Field B.2">Field B.2</div>
                        </td>
                        <td data-label="Field 3">
                            <div class="slds-truncate" title="Field B.3">Field B.3</div>
                        </td>
                    </tr>
                    <tr class="slds-hint-parent">
                        <th data-label="Type" scope="row">
                            <div class="slds-truncate" title="Field C">
                                Field C
                                <!--a href="javascript:void(0);" tabindex="-1">Cloudhub</a-->
                            </div>
                        </th>
                        <td data-label="Field 1">
                            <div class="slds-truncate" title="Field C.1">Field C.1</div>
                        </td>
                        <td data-label="Field 2">
                            <div class="slds-truncate" title="Field C.2">Field C.2</div>
                        </td>
                        <td data-label="Field 3">
                            <div class="slds-truncate" title="Field C.3">Field C.3</div>
                        </td>
                    </tr>
                </tbody>
            </table>

Current Preview Current Preview

Requirement (Screenshot from MS Excel) Expected Layout

PS: The Data Table above is picked directly from SLDS documentation. I could not find anything that could help me with this over there.

  • You need to add bold to first column with css class – Raul Jun 19 at 15:02
  • That doesn't feel quite right. I mean there's a different color scheme altogether for the column header, then there's a little difference in the font size, I feel exists. – shashankj Jun 19 at 15:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.