Modifying DirectoryTables

Dev
1

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:

<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.

1 Like
2

Before you even reply Kris, I appreciate your time.

1 Like
3

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 from within a theme. We have some details about template overrides in Beginner's guide to developing Discourse Themes

2 Likes
4

This is exactly what I needed thank you kindly!

5

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

6

So I’ve got my custom theme installed, I’ve modified this file: “discourse/directory-table.hbs at ba3f62f576068035bc8fbda615e595960cd4520c · discourse/discourse · GitHub”, 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

7

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

8

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

You’d have to check the DirectoryItem component, which is found here: discourse/app/assets/javascripts/discourse/app/components/directory-item.hbs at main · discourse/discourse · GitHub

1 Like
9

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