# Modifying DirectoryTables

**URL:** https://meta.discourse.org/t/modifying-directorytables/255156
**Category:** Development
**Created:** [February 14, 2023, 8:32pm UTC](https://meta.discourse.org/t/modifying-directorytables/255156 "2023-02-14T20:32:19Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![mfrakesSIC](https://avatars.discourse-cdn.com/v4/letter/m/a3d4f5/32.png) [@mfrakesSIC](https://meta.discourse.org/u/mfrakesSIC)
#### Post date: [February 14, 2023, 8:32pm UTC](https://meta.discourse.org/t/modifying-directorytables/255156/1 "2023-02-14T20:32:19Z")

</div>

I know this is dumb before I ask but I accept that I too am dumb.

How do I modify this in a custom theme:

```plaintext
<DirectoryTable
              @items={{this.model}}
              @columns={{this.columns}}
              @showTimeRead={{this.showTimeRead}}
              @order={{this.order}}
              @asc={{this.asc}}
            />

```

(edit) the goal would be to change this to perhaps.. rows and columns with divs.

---

<div class="post-metadata">

### Author: ![mfrakesSIC](https://avatars.discourse-cdn.com/v4/letter/m/a3d4f5/32.png) [@mfrakesSIC](https://meta.discourse.org/u/mfrakesSIC)
#### Post date: [February 14, 2023, 8:39pm UTC](https://meta.discourse.org/t/modifying-directorytables/255156/2 "2023-02-14T20:39:47Z")

</div>

Before you even reply Kris, I appreciate your time.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [February 14, 2023, 8:41pm UTC](https://meta.discourse.org/t/modifying-directorytables/255156/3 "2023-02-14T20:41:11Z")

</div>

Good timing! This week I’ve started updating the directory to move away from a `<table>` to a more flexible div layout that recreates the table layout using CSS grid. So if you can wait a week or two this should be the new default.

Otherwise you’d have to override our [default template here](https://github.com/discourse/discourse/blob/ba3f62f576068035bc8fbda615e595960cd4520c/app/assets/javascripts/discourse/app/components/directory-table.hbs) from within a theme. We have some details about template overrides in [Developing Discourse Themes & Theme Components](https://meta.discourse.org/t/beginners-guide-to-developing-discourse-themes/93648#overriding-discourse-templates-23)

---

<div class="post-metadata">

### Author: ![mfrakesSIC](https://avatars.discourse-cdn.com/v4/letter/m/a3d4f5/32.png) [@mfrakesSIC](https://meta.discourse.org/u/mfrakesSIC)
#### Post date: [February 14, 2023, 8:47pm UTC](https://meta.discourse.org/t/modifying-directorytables/255156/4 "2023-02-14T20:47:25Z")

</div>

This is exactly what I needed thank you kindly!

---

<div class="post-metadata">

### Author: ![Nick\_Tomlinson](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nick_tomlinson/32/282728_2.png) [@Nick\_Tomlinson](https://meta.discourse.org/u/Nick_Tomlinson)
#### Post date: [February 14, 2023, 9:41pm UTC](https://meta.discourse.org/t/modifying-directorytables/255156/5 "2023-02-14T21:41:06Z")

</div>

Order by location? Showing closest members first? :innocent:

---

<div class="post-metadata">

### Author: ![mfrakesSIC](https://avatars.discourse-cdn.com/v4/letter/m/a3d4f5/32.png) [@mfrakesSIC](https://meta.discourse.org/u/mfrakesSIC)
#### Post date: [February 15, 2023, 8:07pm UTC](https://meta.discourse.org/t/modifying-directorytables/255156/6 "2023-02-15T20:07:24Z")

</div>

So I’ve got my custom theme installed, I’ve modified this file: “[discourse/app/assets/javascripts/discourse/app/components/directory-table.hbs at ba3f62f576068035bc8fbda615e595960cd4520c · discourse/discourse · GitHub](https://github.com/discourse/discourse/blob/ba3f62f576068035bc8fbda615e595960cd4520c/app/assets/javascripts/discourse/app/components/directory-table.hbs)”, checked and installed updates for it, but I don’t see any changes. I added a class to the “directory-table-container” as a test. Do I need to rebuild the container?

The modified file location:  
$theme/javascripts/discourse/app/components/directory-table.hbs

---

<div class="post-metadata">

### Author: ![mfrakesSIC](https://avatars.discourse-cdn.com/v4/letter/m/a3d4f5/32.png) [@mfrakesSIC](https://meta.discourse.org/u/mfrakesSIC)
#### Post date: [February 15, 2023, 10:46pm UTC](https://meta.discourse.org/t/modifying-directorytables/255156/7 "2023-02-15T22:46:03Z")

</div>

So I’ve figured out the table and tds but where on earth do the tr tags live?

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [March 10, 2023, 8:28pm UTC](https://meta.discourse.org/t/modifying-directorytables/255156/8 "2023-03-10T20:28:15Z")

</div>

This previously mentioned work has been merged into Discourse, and we no longer use `table` for user tables and now use a combination of `div` and CSS grid

> [@mfrakesSIC](#):
>
> So I’ve figured out the table and tds but where on earth do the tr tags live?

You’d have to check the `DirectoryItem` component, which is found here: [https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/components/directory-item.hbs](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/components/directory-item.hbs)

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [April 9, 2023, 8:29pm UTC](https://meta.discourse.org/t/modifying-directorytables/255156/9 "2023-04-09T20:29:00Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.