G-Loot DS — table with visual elements

by Augustin Hiebel

HTML

<div className="surface rounded-lg overflow-x-auto">
  <table className="table w-full">
    <thead>
      <tr>
        <th>
          <label className="form-checkbox p-0">
            <input type="checkbox" name="policy" />
            <i className="form-icon left-0" />
          </label>
        </th>
        <th>Name</th>
        <th>ID</th>
        <th>Favorite game</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>
          <label className="form-checkbox p-0">
            <input type="checkbox" name="policy" />
            <i className="form-icon left-0" />
          </label>
        </th>
        <td>
          <div className="flex items-center space-x-3">
            <figure className="avatar avatar-xs avatar-circle">
              <div>
                <img src="https://res.cloudinary.com/gloot/image/upload/v1655292255/Marketing/2022_prototype/DummyContent/avatars/avatar_user_3.jpg" />
              </div>
            </figure>
            <div>
              <div className="font-bold">Jérôme Weiss</div>
              <div className="text-sm text-ui-300">France</div>
            </div>
          </div>
        </td>
        <td>
          <span className='text-sm text-ui-300'>
            5778816157089792
          </span>
        </td>
        <td>
          <div className='chip chip-sliced chip-sm bg-game-apexlegends'>
            <span className='icon icon-game-apexlegends-symbol' />
            <span>Apex Legends</span>
          </div>
        </td>
        <td>
          <button type='button' className="button button-sm button-secondary rounded-full tooltip tooltip-left" data-tooltip="View details">
            <span className="icon icon-view" />
          </button>
        </td>
      </tr>
      <tr>
        <th>
          <label className="form-checkbox p-0">
            <input type="checkbox" name="policy" />
            <i className="form-icon left-0" />
          </label>
        </th>
        <td>
         ...