DataTable - Conditional Expander

[mkalinski93]

Hey,

I just wanted to ask if there´s an inbuilt method that I can show/hide the row expander conditionally.

If there´s no provided method, would something like that be possible?

[j0rgedev]

Hello @mkalinski93. You can actually expand some rows by default. If you look at this example. There is a ref that tracks the expanded rows: const expandedRows = ref({});, which is an object that takes the id as the key, and a boolean as its value. So, if you want to expand some rows conditionally, you could play with that.
Based on the example, imagine you want to expand the rows where the price is greater than 100

... more code
const products = ref();
const expandedRows = ref({});

onMounted(() => {
  ProductService.getProductsWithOrdersSmall().then((data) => {
    products.value = data;
    
    expandedRows.value = data.reduce((acc, product) => {
      if (product.price > 100) {
        acc[product.id] = true;
      }
      return acc;
    }, {});
  });
});

... more code