html - Dynamic sizing of table headers and rows in React

Question

Currently there is a table (created with flexbox) with a fix sizing of 20% of the width per header as well as the rows. The table is used in many different languages, and if a header is too long in a given language the header is on top of the next one.

What I need:

• Dynamic sizing of the headers to always show the full header
• According to the size of the header, the row-column should be sized equally
• If the row-column is wider than the header, the header should take up the size of the row-column
• There needs to be a fallback min-width in case the content of the header and the row-column is too short.

What I have tried:

Use refs to measure the size of the header and the column-row to compare and choose the bigger one as the width, however the size that I was given in the componentDidMount cycle was before the element has actually rendered, giving me a false value.

Setting the width to auto displays the full content, but I need to size the header and row columns dynamically so that they have the same length and also display the full content. If the table is wider than the grid, there is an x-scroll.

Which is the best solution to solve this?

The code (Using UI-Kit):

      <div className="partial-project-quotes">
        <div className="uk-grid fr-color-black uk-text-bold t-head uk-flex-nowrap">
          <div className="uk-width-auto">
            <{DynamicHeader}/> 
          </div>
          <div className="uk-width-1-5">
            <{DynamicHeader}/> 
          </div>
          <div className="uk-width-1-5">
            <{DynamicHeader}/> 
          </div>
          <div className="uk-width-1-5">
            <{DynamicHeader}/> 
          </div>
          <div className="uk-width-1-5">
            <{DynamicHeader}/> 
          </div>
        </div>
        <div className="uk-grid uk-margin-top">
          {this.props.orders && this.props.orders.map((order, index ) => {
            const key = `order_${index}`;
            return (
              <div  key={key} className="uk-width-1-1 uk-margin-bottom">
                <DefaultProjectItem>
                  <div className="uk-grid">
                    <div className="uk-width-1-5">
                      <{DynamicContent}/> 
                    </div>
                    <div className="uk-width-1-5">
                      <{DynamicContent}/> 
                    </div>
                    <div className="uk-width-1-5">
                      <{DynamicContent}/> 
                    </div>
                    <div className="uk-width-1-5">
                      <{DynamicContent}/> 
                    </div>
                    <div className="uk-width-1-5">
                      <{DynamicContent}/> 
                    </div>
                  </div>
                </DefaultProjectItem>
              </div>
            );
          })}
         </div>

Answer 1

等待大神答复