Custom CSS - Sidebar + Main

Feature Requests
1

Hello I am new here,

How can I make the sidebar larger and the main area smaller? Let's 60/40 ratio for example.

I think it would be great to make CSS editing easier.

2

Hi @Youssouf_Ouologuem Welcome!

Currently, we don't have native support for configuring the sidebar width :disappointed: We have a feature request for tracking customer use cases for configuring the sidebar width so I'll add your +1

We're also tracking requests for easier ways to implement css. Currently, it's very tricky to set up and difficult to maintain, so we recommend only using it when absolutely necessary.

3

Please add me to it as well! This has been very confusing since I read a blog post explaining how the sidebar can be used, but that doesn't work. I even imported the sample app, but the sidebar then got messed up the moment I inspected it, and all the spacing became incorrect and the elements disappeared

4

Hi @TehITGuy Could you share a screenshot? Sidebar should be working :thinking: :crossed_fingers: although it has a fixed width that can't be configured currently (other than selecting, small, medium, large)

Split pane might be helpful!

5

Thanks, I figured it out. It doesn't work for my needs. The example is a bit misleading tbh, it doesn't seem there is a good explanation on how to achieve that level of filtering using that side bar example. I assumed it just modifies a query or something to get the table results updated. I reverted back to using the oob filter. If you have a real life example on how to use that sidebar filter design then I'd love to check it out

6

The app example is using the deprecated version of the table component. If you switch to the new table, you can add the search component as a search term and search across the table data:

However, in many cases, you'd likely want to modify your query based on the search results:

  1. Set your table query to be manually triggered. You could also set it to run on page load (under Advanced)
  2. Set your table query to trigger on "Apply Filters" click
  3. Write some code to filter your data or edit your table query to include an optional filter. This will be custom to your specific data. Feel free to post screenshots if you have a specific example