deep-jade

Dynamic colspan on table body cell

Is this scenario possible I have a flexible data structure currently trying with type of data

const apiData = [
  {
    initiate_partner_login: { totalAttempts: "1200" },
    partner_login_successfull: {
      totalAttempts: { to_show_past_30days_data: "1100" },
      uniqueAttempts: { to_show_past_30days_data: "1300" },
    },
    partner_subscription: {
      totalAttempts: {
        subscription: "500",
        linking_only: "400",
        subscription_failed: "50",
      },
      uniqueAttempts: {
        subscription: "300",
        linking_only: "300",
        subscription_failed: "100",
      },
    },
    linking_sucessfull: {
      totalAttempts: { subscription: "400", linking_only: "300" },
      uniqueAttempts: { subscription: "250", linking_only: "250" },
    },
    subscription_activated: {
      totalAttempts: { subscription: "200" },
      uniqueAttempts: { subscription: "150" },
    },
  },
  {
    partner_subscription: {
      totalAttempts: "950",
      uniqueAttempts: "700",
    },
    linking_sucessfull: {
      totalAttempts: "700",
      uniqueAttempts: "500",
    },
  },
]

const apiData = [
  {
    initiate_partner_login: { totalAttempts: "1200" },
    partner_login_successfull: {
      totalAttempts: { to_show_past_30days_data: "1100" },
      uniqueAttempts: { to_show_past_30days_data: "1300" },
    },
    partner_subscription: {
      totalAttempts: {
        subscription: "500",
        linking_only: "400",
        subscription_failed: "50",
      },
      uniqueAttempts: {
        subscription: "300",
        linking_only: "300",
        subscription_failed: "100",
      },
    },
    linking_sucessfull: {
      totalAttempts: { subscription: "400", linking_only: "300" },
      uniqueAttempts: { subscription: "250", linking_only: "250" },
    },
    subscription_activated: {
      totalAttempts: { subscription: "200" },
      uniqueAttempts: { subscription: "150" },
    },
  },
  {
    partner_subscription: {
      totalAttempts: "950",
      uniqueAttempts: "700",
    },
    linking_sucessfull: {
      totalAttempts: "700",
      uniqueAttempts: "500",
    },
  },
]

I have total attempts as object and for second row it is a string to according to table ui is there a way I can achieve this using the react table or custom functionality will be applied

7 Replies

eastern-cyan•3y ago

You can restructure your table data as you wish. With that in mind, you can have a row structure for each row that has a property like detailedRow: boolean. Then when you loop through your data, you check for detailedRow, and if it is true, you return a <DetailedRow /> that is a styled <tr> which shows all the 6 cells, whereas if it is false, you return a <SummaryRow /> in which you loop through the two tds and give each a colSpan={3}. If you check the main #table thread, I posted a video of a table I made there. In that use case the headers you see for each sections are just rows that I show in this way, as in I modified the data structure so that on each row there is an isPlaceholderRow property, and if it’s true, I just show the grey header. For your use case, it’s actually a lot easier, because you can rearrange your data structure without being hacky in the ui. https://discord.com/channels/719702312431386674/1003326939899113492/1131842019094958210

deep-jadeOP•3y ago

It wont be a straightforward right ?

eastern-cyan•3y ago

It was straightforward to me. I made a data structure for tableData that was an array of objects, each carrying all the actual data and whatever I still wanted to feed the table. I just got my API data and converted it into this structure. You have complete control over what you feed your table, so you can plan and engineer for workarounds

deep-jadeOP•3y ago

Actually I solved by taking reference of parent columns length and checked for undefined

eastern-cyan•3y ago

Valid solution, happy to see you solved it

deep-jadeOP•3y ago

Yeah... are you off vacation now.?

eastern-cyan•3y ago

Gaming

Programming

Dynamic colspan on table body cell

Did you find this page helpful?