Column customisation support

[jarekwg]

Make it easy to define custom columns, without the need to change the header and file renderers in separate places.

[spennythug]

Is there still interest in this feature? I came here to ask about lower level renderers to fill a similar need. Something to the effect of headerColumnRenderer, folderColumnRender, and fileColumnRenderer to make it so you don't have to override the entire row just to change the columns. This is still 3 edits, however, it would greatly decrease the complexity of the overrides.

Having the ability to customize columns in a single place is probably ideal but it also sounds like a more difficult undertaking based on my limited understanding of the package as a whole.

I really enjoy the package and would be willing to contribute if this were something the package owners were interested in. I should note that I'm currently using version 1.6.1 because of the strange behavior around dragging multiple files.

[jarekwg]

Yep, definitely.
If we could have a single columns.js file that returns a list of dicts defining how the header, file and folder renderers behave for each column, might be a worthy addition. However, getting this to play nicely with the thumbnail renderers could be a bit of a puzzle. Perhaps the columns approach would only be applicable for renderStyle='table'. Also, such code would have a lot of opinions, so would probs be a bit of a journey to merge.

But by all means, if you're keen to contribute, we'll be happy to accept PRs. You might want to dip your toes by having a crack at fixing #92 before embarking on a large-scale refactor like this, so that you can at least work with the latest version of the code.

[spennythug]

Sounds good! These are good thoughts/suggestions. I hadn't considered the thumbnail view as we're not currently using it.

I'll take a crack at #92 and see what I can do. I'll keep this in mind as I'm working.

[rdhara]

This is a great library @jarekwg! Really enjoying using it and happy that it's quite flexible. I am interested in column customization as well - namely, I don't need a table header and I don't need the file size/modified information.

I was able to squash the header by passing the prop headerRenderer={() => null}. I was also able to modify the action buttons by copying the actions file locally since it's quite standalone but modifying the file renderer seems a bit more daunting because it's tied in to a number of props, other files (base-file, utils), and event handlers like dnd which I'd like to keep the functionality for as-is.

Is there a simple way to do this that I'm missing (before maybe @spennythug's refactor 🙏)? Thanks in advance!

[jarekwg]

Unfortunately not at the moment. Custom file renderer is the only way to go.

[rdhara]

@jarekwg Thanks for the quick response. I'm fine with the custom file renderer, but does that mean I need to also keep all the file dependencies locally (like base/utils) since I'm importing the element? And install the external dependencies locally (like moment)?

[spennythug]

@rdhara I have custom columns by overriding the file renderer. It works pretty well and it's likely not as bad as you're imagining. I pulled all the file dependencies into my project locally like you stated. Install the external dependencies, if they come up missing when you run your project.

The thing you'll need to keep in mind is that you'll (probably) have to do this all over again when you want to update react-keyed-file-browser to the latest version. I locked myself into a set version in my package.json so I always get the right version until I decide to update.

Good luck!

[rdhara]

@spennythug Thanks for the heads-up! If I do need to go down that rabbit hole in the future I'll definitely give the local clone a shot. For now, since I just needed to hide those columns I was able to hack it with
some CSS:

td.size{
    display: none;
}

td.modified{
    display: none;
}