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>
 
.table th,
.table td {
  padding: 0.75rem;
  vertical-align: middle;
  border-top: 1px solid #dee2e6;
​
  white-space: nowrap;
}
​
.datagrid__options-btn button {
  background: none !important;
}
​
.dg-table__options-button {
  line-height: 0;
  color: #1f7dbb;
  border: transparent;
  margin-bottom: 0.27rem;
}
.dg-table__options-button:hover {
  color: #072d45;
}
.dg-table__options-button:focus {
  outline: 0;
  background-color: transparent;
  border-color: transparent;
}
.dg-table__options-button:active {
  color: #072d45;
  border: transparent;
  background-color: transparent;
}
​
.dg-table__wrapper {
  overflow-x: auto;
}
.dg-table__header--bg-color {
  background-color: rgba(0, 0, 0, 0.03);
}
.dg-table__footer-span {
  font-size: 21px;
  color: rgba(33, 37, 41, 0.42);
}
​
.dg-table__body--row-height {
  line-height: 12px;
}
​
.dg-table__body--text-elipsis {
  overflow: hidden;
  text-overflow: ellipsis;
}
​
.dg-table__selected-row {
  background-color: #1f4075;
  color: white;
}
​
 
<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

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers