Nile Table

Design

Code

Example 1

Normal Table

First Name

Last Name

Rating

Demo

Description

John

Doe

4.2

Yes

Something

Ashish

Yadav

4.5

Coding

Ravi

Shankar

4.2

Yes

Travel

Sudhir

Kumar

4.1

Job

    <nile-table-body >
      <nile-table-row>
        <nile-table-header-item >First Name</nile-table-header-item>
        <nile-table-header-item >Last Name</nile-table-header-item>
        <nile-table-header-item >Rating</nile-table-header-item>
        <nile-table-header-item >Demo</nile-table-header-item>
        <nile-table-header-item>Description</nile-table-header-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>John</nile-table-cell-item>
        <nile-table-cell-item>Doe</nile-table-cell-item>
        <nile-table-cell-item >4.5</nile-table-cell-item>
        <nile-table-cell-item>Yes</nile-table-cell-item>
        <nile-table-cell-item>Something</nile-table-cell-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>John</nile-table-cell-item>
        <nile-table-cell-item>Doe</nile-table-cell-item>
        <nile-table-cell-item>4.5</nile-table-cell-item>
        <nile-table-cell-item>No</nile-table-cell-item>
        <nile-table-cell-item>Something</nile-table-cell-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>John</nile-table-cell-item>
        <nile-table-cell-item>Doe</nile-table-cell-item>
        <nile-table-cell-item>4.5</nile-table-cell-item>
        <nile-table-cell-item>Yes</nile-table-cell-item>
        <nile-table-cell-item>Something</nile-table-cell-item>
      </nile-table-row>
      ...
      <nile-table-row>
        <nile-table-cell-item>John</nile-table-cell-item>
        <nile-table-cell-item>Doe</nile-table-cell-item>
        <nile-table-cell-item>4.5</nile-table-cell-item>
        <nile-table-cell-item>No</nile-table-cell-item>
        <nile-table-cell-item>Something</nile-table-cell-item>
      </nile-table-row>

    </nile-table-body>

Example 2

Table Containing Header Sorting Functionality

First Name

Last Name

Rating

Demo

Description

John

Doe

4.2

Yes

Something

Ashish

Yadav

4.5

Coding

Ravi

Shankar

4.2

Yes

Travel

Sudhir

Kumar

4.1

Job

   <nile-table-body >
      <nile-table-row>
        <nile-table-header-item >First Name</nile-table-header-item>
        <nile-table-header-item >Last Name</nile-table-header-item>
        <nile-table-header-item havesort >Rating</nile-table-header-item>
        <nile-table-header-item >Demo</nile-table-header-item>
        <nile-table-header-item>Description</nile-table-header-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>John</nile-table-cell-item>
        <nile-table-cell-item>Doe</nile-table-cell-item>
        <nile-table-cell-item>4.2</nile-table-cell-item>
        <nile-table-cell-item>Yes</nile-table-cell-item>
        <nile-table-cell-item>Something</nile-table-cell-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>Ashish</nile-table-cell-item>
        <nile-table-cell-item>Yadav</nile-table-cell-item>
        <nile-table-cell-item>4.5</nile-table-cell-item>
        <nile-table-cell-item>No</nile-table-cell-item>
        <nile-table-cell-item>Coding</nile-table-cell-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>Ravi</nile-table-cell-item>
        <nile-table-cell-item>Shankar</nile-table-cell-item>
        <nile-table-cell-item>4.2</nile-table-cell-item>
        <nile-table-cell-item>Yes</nile-table-cell-item>
        <nile-table-cell-item>Travel</nile-table-cell-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>Sudhir</nile-table-cell-item>
        <nile-table-cell-item>Kumar</nile-table-cell-item>
        <nile-table-cell-item>4.1</nile-table-cell-item>
        <nile-table-cell-item>No</nile-table-cell-item>
        <nile-table-cell-item>Job</nile-table-cell-item>
      </nile-table-row>
    </nile-table-body>

Example 3

Table Containing Header Icons

First Name

Last Name

Rating

Demo

Description

John

Doe

4.2

Yes

Something

Ashish

Yadav

4.5

Coding

Ravi

Shankar

4.2

Yes

Travel

Sudhir

Kumar

4.1

Job

   <nile-table-body >
      <nile-table-row>
        <nile-table-header-item icon-name="user" >First Name</nile-table-header-item>
        <nile-table-header-item icon-name="user">Last Name</nile-table-header-item>
        <nile-table-header-item havesort icon-name="user">Rating</nile-table-header-item>
        <nile-table-header-item  icon-name="user">Demo
        </nile-table-header-item>
        <nile-table-header-item icon-name="user">Description
        </nile-table-header-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>John</nile-table-cell-item>
        <nile-table-cell-item>Doe</nile-table-cell-item>
        <nile-table-cell-item>4.2</nile-table-cell-item>
        <nile-table-cell-item>Yes</nile-table-cell-item>
        <nile-table-cell-item>Something</nile-table-cell-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>Ashish</nile-table-cell-item>
        <nile-table-cell-item>Yadav</nile-table-cell-item>
        <nile-table-cell-item>4.5</nile-table-cell-item>
        <nile-table-cell-item>No</nile-table-cell-item>
        <nile-table-cell-item>Coding</nile-table-cell-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>Ravi</nile-table-cell-item>
        <nile-table-cell-item>Shankar</nile-table-cell-item>
        <nile-table-cell-item>4.2</nile-table-cell-item>
        <nile-table-cell-item>Yes</nile-table-cell-item>
        <nile-table-cell-item>Travel</nile-table-cell-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>Sudhir</nile-table-cell-item>
        <nile-table-cell-item>Kumar</nile-table-cell-item>
        <nile-table-cell-item>4.1</nile-table-cell-item>
        <nile-table-cell-item>No</nile-table-cell-item>
        <nile-table-cell-item>Job</nile-table-cell-item>
      </nile-table-row>
    </nile-table-body>

Example 4

Table Containing Sticky Header

First Name

Last Name

Rating

Demo

Description

John

Doe

4.2

Yes

Something

Ashish

Yadav

4.5

Coding

Ravi

Shankar

4.2

Yes

Travel

Sudhir

Kumar

4.1

Job

Michael

Smith

4.3

Yes

Reading

Lisa

Johnson

4.6

Music

David

Lee

4.0

Yes

Sports

Emily

Wang

4.4

Art

Daniel

Nguyen

4.2

Yes

Gaming

Ashish

Yadav

4.5

Coding

Ravi

Shankar

4.2

Yes

Travel

Sudhir

Kumar

4.1

Job

Ashish

Yadav

4.5

Coding

Ravi

Shankar

4.2

Yes

Travel

Sudhir

Kumar

4.1

Job

  <style>

  .mytable::part(base){
        height: 400px;
        overflow-y: scroll;
        -ms-overflow-style: none;
        scrollbar-width: none;
  }

  .mytable nile-table-row:first-child {
      position: sticky;
      top: 0;
      z-index: 1;
    }

  </style> 
   <nile-table-body class="mytable">
     <nile-table-row>
        <nile-table-header-item >First Name</nile-table-header-item>
        <nile-table-header-item >Last Name</nile-table-header-item>
        <nile-table-header-item >Rating</nile-table-header-item>
        <nile-table-header-item >Demo</nile-table-header-item>
        <nile-table-header-item>Description</nile-table-header-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>John</nile-table-cell-item>
        <nile-table-cell-item>Doe</nile-table-cell-item>
        <nile-table-cell-item>4.2</nile-table-cell-item>
        <nile-table-cell-item>Yes</nile-table-cell-item>
        <nile-table-cell-item>Something</nile-table-cell-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>Ashish</nile-table-cell-item>
        <nile-table-cell-item>Yadav</nile-table-cell-item>
        <nile-table-cell-item>4.5</nile-table-cell-item>
        <nile-table-cell-item>No</nile-table-cell-item>
        <nile-table-cell-item>Coding</nile-table-cell-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>Ravi</nile-table-cell-item>
        <nile-table-cell-item>Shankar</nile-table-cell-item>
        <nile-table-cell-item>4.2</nile-table-cell-item>
        <nile-table-cell-item>Yes</nile-table-cell-item>
        <nile-table-cell-item>Travel</nile-table-cell-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>Sudhir</nile-table-cell-item>
        <nile-table-cell-item>Kumar</nile-table-cell-item>
        <nile-table-cell-item>4.1</nile-table-cell-item>
        <nile-table-cell-item>No</nile-table-cell-item>
        <nile-table-cell-item>Job</nile-table-cell-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>Michael</nile-table-cell-item>
        <nile-table-cell-item>Smith</nile-table-cell-item>
        <nile-table-cell-item>4.3</nile-table-cell-item>
        <nile-table-cell-item>Yes</nile-table-cell-item>
        <nile-table-cell-item>Reading</nile-table-cell-item>
    </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>Lisa</nile-table-cell-item>
        <nile-table-cell-item>Johnson</nile-table-cell-item>
        <nile-table-cell-item>4.6</nile-table-cell-item>
        <nile-table-cell-item>No</nile-table-cell-item>
        <nile-table-cell-item>Music</nile-table-cell-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>David</nile-table-cell-item>
        <nile-table-cell-item>Lee</nile-table-cell-item>
        <nile-table-cell-item>4.0</nile-table-cell-item>
        <nile-table-cell-item>Yes</nile-table-cell-item>
        <nile-table-cell-item>Sports</nile-table-cell-item>
      </nile-table-row>
      ... add more data
      <nile-table-row>
        <nile-table-cell-item>Emily</nile-table-cell-item>
        <nile-table-cell-item>Wang</nile-table-cell-item>
        <nile-table-cell-item>4.4</nile-table-cell-item>
        <nile-table-cell-item>No</nile-table-cell-item>
        <nile-table-cell-item>Art</nile-table-cell-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>Daniel</nile-table-cell-item>
        <nile-table-cell-item>Nguyen</nile-table-cell-item>
        <nile-table-cell-item>4.2</nile-table-cell-item>
        <nile-table-cell-item>Yes</nile-table-cell-item>
        <nile-table-cell-item>Gaming</nile-table-cell-item>
      </nile-table-row>
    </nile-table-body>

Example 5

Table with filter functionality

First Name

Last Name

Rating

Demo

Description

John

Doe

4.2

Yes

Something

Ashish

Yadav

4.5

Coding

Ravi

Shankar

4.2

Yes

Travel

Sudhir

Kumar

4.1

Job

    <nile-table-body (nile-table-search)="handleSearch($event)">
      <nile-table-row>
        <nile-table-header-item >First Name</nile-table-header-item>
        <nile-table-header-item >Last Name</nile-table-header-item>
        <nile-table-header-item >Rating</nile-table-header-item>
        <nile-table-header-item >Demo</nile-table-header-item>
        <nile-table-header-item havefilter>Description</nile-table-header-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>John</nile-table-cell-item>
        <nile-table-cell-item>Doe</nile-table-cell-item>
        <nile-table-cell-item >4.5</nile-table-cell-item>
        <nile-table-cell-item>Yes</nile-table-cell-item>
        <nile-table-cell-item>Something</nile-table-cell-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>John</nile-table-cell-item>
        <nile-table-cell-item>Doe</nile-table-cell-item>
        <nile-table-cell-item>4.5</nile-table-cell-item>
        <nile-table-cell-item>No</nile-table-cell-item>
        <nile-table-cell-item>Something</nile-table-cell-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>John</nile-table-cell-item>
        <nile-table-cell-item>Doe</nile-table-cell-item>
        <nile-table-cell-item>4.5</nile-table-cell-item>
        <nile-table-cell-item>Yes</nile-table-cell-item>
        <nile-table-cell-item>Something</nile-table-cell-item>
      </nile-table-row>
      ...
      <nile-table-row>
        <nile-table-cell-item>John</nile-table-cell-item>
        <nile-table-cell-item>Doe</nile-table-cell-item>
        <nile-table-cell-item>4.5</nile-table-cell-item>
        <nile-table-cell-item>No</nile-table-cell-item>
        <nile-table-cell-item>Something</nile-table-cell-item>
      </nile-table-row>
    </nile-table-body>

Example 6

Giving Custom Width

First Name

Last Name

Rating

Demo

Description

John

Doe

4.2

Yes

Something

Ashish

Yadav

4.5

Coding

Ravi

Shankar

4.2

Yes

Travel

Sudhir

Kumar

4.1

Job

<style>
  .table-parent{
    width:100%;
  }

  .header1{
    width:50%;
  }

  .header2{
    width:20%;
  }
</style>
<div class="table-parent">
    <nile-table-body >
      <nile-table-row>
        <nile-table-header-item >First Name</nile-table-header-item>
        <nile-table-header-item >Last Name</nile-table-header-item>
        <nile-table-header-item >Rating</nile-table-header-item>
        <nile-table-header-item >Demo</nile-table-header-item>
        <nile-table-header-item>Description</nile-table-header-item>
      <nile-table-row>

      <nile-table-row>
        <nile-table-cell-item>John</nile-table-cell-item>
        <nile-table-cell-item>Doe</nile-table-cell-item>
        <nile-table-cell-item>4.2</nile-table-cell-item>
        <nile-table-cell-item>Yes</nile-table-cell-item>
        <nile-table-cell-item>Something</nile-table-cell-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>Ashish</nile-table-cell-item>
        <nile-table-cell-item>Yadav</nile-table-cell-item>
        <nile-table-cell-item>4.5</nile-table-cell-item>
        <nile-table-cell-item>No</nile-table-cell-item>
        <nile-table-cell-item>Coding</nile-table-cell-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>Ravi</nile-table-cell-item>
        <nile-table-cell-item>Shankar</nile-table-cell-item>
        <nile-table-cell-item>4.2</nile-table-cell-item>
        <nile-table-cell-item>Yes</nile-table-cell-item>
        <nile-table-cell-item>Travel</nile-table-cell-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>Sudhir</nile-table-cell-item>
        <nile-table-cell-item>Kumar</nile-table-cell-item>
        <nile-table-cell-item>4.1</nile-table-cell-item>
        <nile-table-cell-item>No</nile-table-cell-item>
        <nile-table-cell-item>Job</nile-table-cell-item>
      </nile-table-row>
    </nile-table-body>

Example 7

Table With Multiple Bodies

Useful for virtual scroll

First Name

Last Name

Rating

Demo

Description

First Name

Last Name

Rating

Demo

Description

John

Doe

4.2

Yes

Something

Ashish

Yadav

4.5

Coding

Ravi

Shankar

4.2

Yes

Travel

Sudhir

Kumar

4.1

Job

<nile-table>
   <nile-table-body >
    <nile-table-row>
      <nile-table-header-item icon-name="user" >First Name
      </nile-table-header-item>
      <nile-table-header-item  icon-name="user">Last Name
      </nile-table-header-item>
      <nile-table-header-item havesort icon-name="user">Rating
      </nile-table-header-item>
      <nile-table-header-item icon-name="user">Demo
      </nile-table-header-item>
      <nile-table-header-item icon-name="user"> Description
      </nile-table-header-item>
    </nile-table-row>
  </nile-table-body>
  <nile-table-body>
      <nile-table-row>
        <nile-table-header-item icon-name="user" >First Name</nile-table-header-item>
        <nile-table-header-item icon-name="user">Last Name</nile-table-header-item>
        <nile-table-header-item havesort icon-name="user">Rating</nile-table-header-item>
        <nile-table-header-item  icon-name="user">Demo
        </nile-table-header-item>
        <nile-table-header-item icon-name="user">Description
        </nile-table-header-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>John</nile-table-cell-item>
        <nile-table-cell-item>Doe</nile-table-cell-item>
        <nile-table-cell-item>4.2</nile-table-cell-item>
        <nile-table-cell-item>Yes</nile-table-cell-item>
        <nile-table-cell-item>Something</nile-table-cell-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>Ashish</nile-table-cell-item>
        <nile-table-cell-item>Yadav</nile-table-cell-item>
        <nile-table-cell-item>4.5</nile-table-cell-item>
        <nile-table-cell-item>No</nile-table-cell-item>
        <nile-table-cell-item>Coding</nile-table-cell-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>Ravi</nile-table-cell-item>
        <nile-table-cell-item>Shankar</nile-table-cell-item>
        <nile-table-cell-item>4.2</nile-table-cell-item>
        <nile-table-cell-item>Yes</nile-table-cell-item>
        <nile-table-cell-item>Travel</nile-table-cell-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>Sudhir</nile-table-cell-item>
        <nile-table-cell-item>Kumar</nile-table-cell-item>
        <nile-table-cell-item>4.1</nile-table-cell-item>
        <nile-table-cell-item>No</nile-table-cell-item>
        <nile-table-cell-item>Job</nile-table-cell-item>
      </nile-table-row>
    </nile-table-body>
</nile-table>

Example 8

First Name

Last Name

Rating

Demo

Description

Olivia Rhye

@olivia

Doe

4.5

Something

Olivia Rhye

@olivia

Doe

4.5

Something

Olivia Rhye

@olivia

Doe

4.5

Something

Olivia Rhye

@olivia

Doe

4.5

Something

Olivia Rhye

@olivia

Doe

4.5

Something

Olivia Rhye

@olivia

Doe

4.5

Something

Olivia Rhye

@olivia

Doe

4.5

Something

Olivia Rhye

@olivia

Doe

4.5

Something

Olivia Rhye

@olivia

Doe

4.5

Something

Olivia Rhye

@olivia

Doe

4.5

Something

Olivia Rhye

@olivia

Doe

4.5

Something

Olivia Rhye

@olivia

Doe

4.5

Something

Olivia Rhye

@olivia

Doe

4.5

Something

Olivia Rhye

@olivia

Doe

4.5

Something

Olivia Rhye

@olivia

Doe

4.5

Something

Olivia Rhye

@olivia

Doe

4.5

Something

Olivia Rhye

@olivia

Doe

4.5

Something

Olivia Rhye

@olivia

Doe

4.5

Something

Olivia Rhye

@olivia

Doe

4.5

Something

Olivia Rhye

@olivia

Doe

4.5

Something

Olivia Rhye

@olivia

Doe

4.5

Something

<style>
      .mytable::part(base) {
        height: 400px;
        overflow-y: scroll;
        -ms-overflow-style: none;
        scrollbar-width: none;
    
      }

      .mytable nile-table-header-item {
        position: sticky;
        top: 0;
        z-index: 1;
      }
</style>
<div class="table-parent">
    <nile-table-body class="mytable">
      <nile-table-row>
        <nile-table-header-item style="width: 300px"
          >First Name</nile-table-header-item
        >
        <nile-table-header-item icon-name="info">Role</nile-table-header-item>
        <nile-table-header-item>Rating</nile-table-header-item>
        <nile-table-header-item>Demo</nile-table-header-item>
        <nile-table-header-item>Description</nile-table-header-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>
          <div style="display: flex; gap: 17px">
            <img
              src="https://picsum.photos/200/300?random=1"
              height="32"
              width="32"
              style="border: 1px solid transparent; border-radius: 50%"
            />
            <div
              style="
                height: 40px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
              "
            >
              <div>Olivia Rhye</div>
              <div>@olivia</div>
            </div>
          </div></nile-table-cell-item
        >
        <nile-table-cell-item>Product Manager</nile-table-cell-item>
        <nile-table-cell-item>olivia@zcorp.com</nile-table-cell-item>
        <nile-table-cell-item>No</nile-table-cell-item>
        <nile-table-cell-item>Something</nile-table-cell-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>
          <div style="display: flex; gap: 17px">
            <img
              src="https://picsum.photos/200/300?random=1"
              height="32"
              width="32"
              style="border: 1px solid transparent; border-radius: 50%"
            />
            <div
              style="
                height: 40px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
              "
            >
              <div>Olivia Rhye</div>
              <div>@olivia</div>
            </div>
          </div></nile-table-cell-item
        >
        <nile-table-cell-item>Product Manager</nile-table-cell-item>
        <nile-table-cell-item>olivia@zcorp.com</nile-table-cell-item>
        <nile-table-cell-item>No</nile-table-cell-item>
        <nile-table-cell-item>Something</nile-table-cell-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>
          <div style="display: flex; gap: 17px">
            <img
              src="https://picsum.photos/200/300?random=1"
              height="32"
              width="32"
              style="border: 1px solid transparent; border-radius: 50%"
            />
            <div
              style="
                height: 40px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
              "
            >
              <div>Olivia Rhye</div>
              <div>@olivia</div>
            </div>
          </div></nile-table-cell-item
        >
        <nile-table-cell-item>Product Manager</nile-table-cell-item>
        <nile-table-cell-item>olivia@zcorp.com</nile-table-cell-item>
        <nile-table-cell-item>No</nile-table-cell-item>
        <nile-table-cell-item>Something</nile-table-cell-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>
          <div style="display: flex; gap: 17px">
            <img
              src="https://picsum.photos/200/300?random=1"
              height="32"
              width="32"
              style="border: 1px solid transparent; border-radius: 50%"
            />
            <div
              style="
                height: 40px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
              "
            >
              <div>Olivia Rhye</div>
              <div>@olivia</div>
            </div>
          </div></nile-table-cell-item
        >
        <nile-table-cell-item>Product Manager</nile-table-cell-item>
        <nile-table-cell-item>olivia@zcorp.com</nile-table-cell-item>
        <nile-table-cell-item>No</nile-table-cell-item>
        <nile-table-cell-item>Something</nile-table-cell-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>
          <div style="display: flex; gap: 17px">
            <img
              src="https://picsum.photos/200/300?random=1"
              height="32"
              width="32"
              style="border: 1px solid transparent; border-radius: 50%"
            />
            <div
              style="
                height: 40px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
              "
            >
              <div>Olivia Rhye</div>
              <div>@olivia</div>
            </div>
          </div></nile-table-cell-item
        >
        <nile-table-cell-item>Product Manager</nile-table-cell-item>
        <nile-table-cell-item>olivia@zcorp.com</nile-table-cell-item>
        <nile-table-cell-item>No</nile-table-cell-item>
        <nile-table-cell-item>Something</nile-table-cell-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>
          <div style="display: flex; gap: 17px">
            <img
              src="https://picsum.photos/200/300?random=1"
              height="32"
              width="32"
              style="border: 1px solid transparent; border-radius: 50%"
            />
            <div
              style="
                height: 40px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
              "
            >
              <div>Olivia Rhye</div>
              <div>@olivia</div>
            </div>
          </div></nile-table-cell-item
        >
        <nile-table-cell-item>Product Manager</nile-table-cell-item>
        <nile-table-cell-item>olivia@zcorp.com</nile-table-cell-item>
        <nile-table-cell-item>No</nile-table-cell-item>
        <nile-table-cell-item>Something</nile-table-cell-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>
          <div style="display: flex; gap: 17px">
            <img
              src="https://picsum.photos/200/300?random=1"
              height="32"
              width="32"
              style="border: 1px solid transparent; border-radius: 50%"
            />
            <div
              style="
                height: 40px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
              "
            >
              <div>Olivia Rhye</div>
              <div>@olivia</div>
            </div>
          </div></nile-table-cell-item
        >
        <nile-table-cell-item>Product Manager</nile-table-cell-item>
        <nile-table-cell-item>olivia@zcorp.com</nile-table-cell-item>
        <nile-table-cell-item>No</nile-table-cell-item>
        <nile-table-cell-item>Something</nile-table-cell-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>
          <div style="display: flex; gap: 17px">
            <img
              src="https://picsum.photos/200/300?random=1"
              height="32"
              width="32"
              style="border: 1px solid transparent; border-radius: 50%"
            />
            <div
              style="
                height: 40px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
              "
            >
              <div>Olivia Rhye</div>
              <div>@olivia</div>
            </div>
          </div></nile-table-cell-item
        >
        <nile-table-cell-item>Product Manager</nile-table-cell-item>
        <nile-table-cell-item>olivia@zcorp.com</nile-table-cell-item>
        <nile-table-cell-item>No</nile-table-cell-item>
        <nile-table-cell-item>Something</nile-table-cell-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>
          <div style="display: flex; gap: 17px">
            <img
              src="https://picsum.photos/200/300?random=1"
              height="32"
              width="32"
              style="border: 1px solid transparent; border-radius: 50%"
            />
            <div
              style="
                height: 40px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
              "
            >
              <div>Olivia Rhye</div>
              <div>@olivia</div>
            </div>
          </div></nile-table-cell-item
        >
        <nile-table-cell-item>Product Manager</nile-table-cell-item>
        <nile-table-cell-item>olivia@zcorp.com</nile-table-cell-item>
        <nile-table-cell-item>No</nile-table-cell-item>
        <nile-table-cell-item>Something</nile-table-cell-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>
          <div style="display: flex; gap: 17px">
            <img
              src="https://picsum.photos/200/300?random=1"
              height="32"
              width="32"
              style="border: 1px solid transparent; border-radius: 50%"
            />
            <div
              style="
                height: 40px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
              "
            >
              <div>Olivia Rhye</div>
              <div>@olivia</div>
            </div>
          </div></nile-table-cell-item
        >
        <nile-table-cell-item>Product Manager</nile-table-cell-item>
        <nile-table-cell-item>olivia@zcorp.com</nile-table-cell-item>
        <nile-table-cell-item>No</nile-table-cell-item>
        <nile-table-cell-item>Something</nile-table-cell-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>
          <div style="display: flex; gap: 17px">
            <img
              src="https://picsum.photos/200/300?random=1"
              height="32"
              width="32"
              style="border: 1px solid transparent; border-radius: 50%"
            />
            <div
              style="
                height: 40px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
              "
            >
              <div>Olivia Rhye</div>
              <div>@olivia</div>
            </div>
          </div></nile-table-cell-item
        >
        <nile-table-cell-item>Product Manager</nile-table-cell-item>
        <nile-table-cell-item>olivia@zcorp.com</nile-table-cell-item>
        <nile-table-cell-item>No</nile-table-cell-item>
        <nile-table-cell-item>Something</nile-table-cell-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>
          <div style="display: flex; gap: 17px">
            <img
              src="https://picsum.photos/200/300?random=1"
              height="32"
              width="32"
              style="border: 1px solid transparent; border-radius: 50%"
            />
            <div
              style="
                height: 40px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
              "
            >
              <div>Olivia Rhye</div>
              <div>@olivia</div>
            </div>
          </div></nile-table-cell-item
        >
        <nile-table-cell-item>Product Manager</nile-table-cell-item>
        <nile-table-cell-item>olivia@zcorp.com</nile-table-cell-item>
        <nile-table-cell-item>No</nile-table-cell-item>
        <nile-table-cell-item>Something</nile-table-cell-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>
          <div style="display: flex; gap: 17px">
            <img
              src="https://picsum.photos/200/300?random=1"
              height="32"
              width="32"
              style="border: 1px solid transparent; border-radius: 50%"
            />
            <div
              style="
                height: 40px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
              "
            >
              <div>Olivia Rhye</div>
              <div>@olivia</div>
            </div>
          </div></nile-table-cell-item
        >
        <nile-table-cell-item>Product Manager</nile-table-cell-item>
        <nile-table-cell-item>olivia@zcorp.com</nile-table-cell-item>
        <nile-table-cell-item>No</nile-table-cell-item>
        <nile-table-cell-item>Something</nile-table-cell-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>
          <div style="display: flex; gap: 17px">
            <img
              src="https://picsum.photos/200/300?random=1"
              height="32"
              width="32"
              style="border: 1px solid transparent; border-radius: 50%"
            />
            <div
              style="
                height: 40px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
              "
            >
              <div>Olivia Rhye</div>
              <div>@olivia</div>
            </div>
          </div></nile-table-cell-item
        >
        <nile-table-cell-item>Product Manager</nile-table-cell-item>
        <nile-table-cell-item>olivia@zcorp.com</nile-table-cell-item>
        <nile-table-cell-item>No</nile-table-cell-item>
        <nile-table-cell-item>Something</nile-table-cell-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>
          <div style="display: flex; gap: 17px">
            <img
              src="https://picsum.photos/200/300?random=1"
              height="32"
              width="32"
              style="border: 1px solid transparent; border-radius: 50%"
            />
            <div
              style="
                height: 40px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
              "
            >
              <div>Olivia Rhye</div>
              <div>@olivia</div>
            </div>
          </div></nile-table-cell-item
        >
        <nile-table-cell-item>Product Manager</nile-table-cell-item>
        <nile-table-cell-item>olivia@zcorp.com</nile-table-cell-item>
        <nile-table-cell-item>No</nile-table-cell-item>
        <nile-table-cell-item>Something</nile-table-cell-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>
          <div style="display: flex; gap: 17px">
            <img
              src="https://picsum.photos/200/300?random=1"
              height="32"
              width="32"
              style="border: 1px solid transparent; border-radius: 50%"
            />
            <div
              style="
                height: 40px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
              "
            >
              <div>Olivia Rhye</div>
              <div>@olivia</div>
            </div>
          </div></nile-table-cell-item
        >
        <nile-table-cell-item>Product Manager</nile-table-cell-item>
        <nile-table-cell-item>olivia@zcorp.com</nile-table-cell-item>
        <nile-table-cell-item>No</nile-table-cell-item>
        <nile-table-cell-item>Something</nile-table-cell-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>
          <div style="display: flex; gap: 17px">
            <img
              src="https://picsum.photos/200/300?random=1"
              height="32"
              width="32"
              style="border: 1px solid transparent; border-radius: 50%"
            />
            <div
              style="
                height: 40px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
              "
            >
              <div>Olivia Rhye</div>
              <div>@olivia</div>
            </div>
          </div></nile-table-cell-item
        >
        <nile-table-cell-item>Product Manager</nile-table-cell-item>
        <nile-table-cell-item>olivia@zcorp.com</nile-table-cell-item>
        <nile-table-cell-item>No</nile-table-cell-item>
        <nile-table-cell-item>Something</nile-table-cell-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>
          <div style="display: flex; gap: 17px">
            <img
              src="https://picsum.photos/200/300?random=1"
              height="32"
              width="32"
              style="border: 1px solid transparent; border-radius: 50%"
            />
            <div
              style="
                height: 40px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
              "
            >
              <div>Olivia Rhye</div>
              <div>@olivia</div>
            </div>
          </div></nile-table-cell-item
        >
        <nile-table-cell-item>Product Manager</nile-table-cell-item>
        <nile-table-cell-item>olivia@zcorp.com</nile-table-cell-item>
        <nile-table-cell-item>No</nile-table-cell-item>
        <nile-table-cell-item>Something</nile-table-cell-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>
          <div style="display: flex; gap: 17px">
            <img
              src="https://picsum.photos/200/300?random=1"
              height="32"
              width="32"
              style="border: 1px solid transparent; border-radius: 50%"
            />
            <div
              style="
                height: 40px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
              "
            >
              <div>Olivia Rhye</div>
              <div>@olivia</div>
            </div>
          </div></nile-table-cell-item
        >
        <nile-table-cell-item>Product Manager</nile-table-cell-item>
        <nile-table-cell-item>olivia@zcorp.com</nile-table-cell-item>
        <nile-table-cell-item>No</nile-table-cell-item>
        <nile-table-cell-item>Something</nile-table-cell-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>
          <div style="display: flex; gap: 17px">
            <img
              src="https://picsum.photos/200/300?random=1"
              height="32"
              width="32"
              style="border: 1px solid transparent; border-radius: 50%"
            />
            <div
              style="
                height: 40px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
              "
            >
              <div>Olivia Rhye</div>
              <div>@olivia</div>
            </div>
          </div></nile-table-cell-item
        >
        <nile-table-cell-item>Product Manager</nile-table-cell-item>
        <nile-table-cell-item>olivia@zcorp.com</nile-table-cell-item>
        <nile-table-cell-item>No</nile-table-cell-item>
        <nile-table-cell-item>Something</nile-table-cell-item>
      </nile-table-row>
      <nile-table-row>
        <nile-table-cell-item>
          <div style="display: flex; gap: 17px">
            <img
              src="https://picsum.photos/200/300?random=1"
              height="32"
              width="32"
              style="border: 1px solid transparent; border-radius: 50%"
            />
            <div
              style="
                height: 40px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
              "
            >
              <div>Olivia Rhye</div>
              <div>@olivia</div>
            </div>
          </div></nile-table-cell-item
        >
        <nile-table-cell-item>Product Manager</nile-table-cell-item>
        <nile-table-cell-item>olivia@zcorp.com</nile-table-cell-item>
        <nile-table-cell-item>No</nile-table-cell-item>
        <nile-table-cell-item>Something</nile-table-cell-item>
      </nile-table-row>
    </nile-table-body>

Slots

Name	Description
table__header	The Header of the table
filter__content	Filter Popover Content Slot

Parts

Name	Description
filter__search	By default Search Input inside the filter popover
filter__content	Filter Popover Content Slot
nile__table-cell	Table Cell Part

This component automatically imports the following dependencies.

nile-table-body , nile-table-row , nile-table-cell-item , nile-table-header-item