Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://fb.me/react-with-addons-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
</head>
<body>
<div class="row">
   <div class="col">
      <div class="dg-table__wrapper">
         <div class="table-responsive">
            <table class="table table-borderless table-hover">
               <thead class="text-nowrap table-bordered text-center dg-table__header--bg-color">
                  <tr class="text-nowrap">
                     <th><span name="sensitive1">Sensitive data</span></th>
                     <th><span name="sensitive2">Sensitive data </span></th>
                  </tr>
               </thead>
               <tbody class="text-nowrap table-bordered dg-table__body--row-height text-center">
                  <tr class=" border rounded-0">
                     <td>
                        <div class="datagrid__options-btn dropup">
                           <button aria-haspopup="true" aria-expanded="false" id="dropdown-basic-button" type="button" class="dropdown-toggle btn btn-link">Options</button>
                           <div x-placement="top-start" aria-labelledby="dropdown-basic-button" class="dropdown-menu" style="position: absolute; top: 0px; left: 0px; margin: 0px; opacity: 0; pointer-events: none;">
                               <a href="#" class="dropdown-item" role="button">Option1</a>
                               <a href="#" class="dropdown-item" role="button">Option2</a>
                               <a href="#" class="dropdown-item" role="button">Option3</a>
                               <a href="#" class="dropdown-item" role="button">Option4</a>
                               <a href="#" class="dropdown-item" role="button">Option5</a>
                               <a href="#" class="dropdown-item" role="button">Option6</a>
                               <a href="#" class="dropdown-item" role="button">Option7</a>
                           </div>
                        </div>
                     </td>
                     <td>sensitive</td>
                     <td>user</td>
                     <td>data</td>
                     <td>sensitive</td>
                     <td>user</td>
                     <td>data</td>
                     <td>etc</td>
                  </tr>
                  <tr class="dg-table__selected-row">
                     <td>
                        <div class="datagrid__options-btn show dropup">
                           <button aria-haspopup="true" aria-expanded="true" id="dropdown-basic-button" type="button" class="dropdown-toggle btn btn-link">Options</button>
                           <div x-placement="top-start" aria-labelledby="dropdown-basic-button" class="dropdown-menu" style="position: absolute; top: 0px; left: 0px; margin: 0px; opacity: 0; pointer-events: none;">
                               <a href="#" class="dropdown-item" role="button">Option1</a>
                               <a href="#" class="dropdown-item" role="button">Option2</a>
                               <a href="#" class="dropdown-item" role="button">Option3</a>
                               <a href="#" class="dropdown-item" role="button">Option4</a>
                               <a href="#" class="dropdown-item" role="button">Option5</a>
                               <a href="#" class="dropdown-item" role="button">Option6</a>
                               <a href="#" class="dropdown-item" role="button">Option7</a>
                           </div>
                        </div>
                     </td>
                     <td>sensitive</td>
                     <td>user</td>
                     <td>data</td>
                     <td>sensitive</td>
                     <td>user</td>
                     <td>data</td>
                     <td>etc</td>
                  </tr>
                  <tr class=" border rounded-0">
                     <td>
                        <div class="datagrid__options-btn dropup"><button aria-haspopup="true" aria-expanded="false" id="dropdown-basic-button" type="button" class="dropdown-toggle btn btn-link">Options</button></div>
                     </td>
                     <td>sensitive</td>
                     <td>user</td>
                     <td>data</td>
                     <td>sensitive</td>
                     <td>user</td>
                     <td>data</td>
                     <td>etc</td>
                  </tr>
               </tbody>
            </table>
         </div>
      </div>
   </div>
</div>
</body>
</html>
 
<Row>
                <Col>
                  <div className="dg-table__wrapper">
                    <Table responsive hover borderless>
                      <thead className="text-nowrap table-bordered text-center dg-table__header--bg-color">
                        <tr className="text-nowrap">
                          {props.columns.map((column, i) => {
                            return (
                              <th key={i}>
                                <span onClick={(e) => columnSort(e)} name={column.accessor}>
                                  {column.header} {column.accessor === sortSetting.columnName ? arrowSort : ""}
                                </span>
                              </th>
                            );
                          })}
                        </tr>
                      </thead>
                      <tbody className="text-nowrap table-bordered dg-table__body--row-height text-center">
                        {pageData.map((row, i) => {
                          return (
                            <DataGridRow
                              key={row.originalIndex}
                              row={row}
                              columns={props.columns}
                              rowStyle={props.config.rowStyle(row)}
                              rowClicked={rowClicked}
                              functions={functions1}
                              selectedRow={currentRow === null ? "" : currentRow}
                            ></DataGridRow>
                          );
                        })}
                      </tbody>
                    </Table>
                  </div>
                </Col>
              </Row>
              
/*--- And this would be the DropdownButton ---*/
​
 <DropdownButton
              id="dropdown-basic-button"
              title="Options"
              variant="link"
              drop="up"
              className="datagrid__options-btn"
            >
              {row.options.map((action, i) => {
                return (
                  <Dropdown.Item
                    key={i}
                    onClick={(e) => {
                      e.preventDefault();
                      functions.doAction(action, row.originalIndex);
                    }}
                  >
                    {action}
                  </Dropdown.Item>
                );
              })}
            </DropdownButton>
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers