title: Split Tables based on Effective Date (typescript)
body: <p>We are adding a new feature where we can create multiple product lists. The differentiator will be the effective date of the list. So the list will have the same products, same costs and different prices/effective dates.  I need to create two or more separate data tables based on the effective dates but so far I havent been able to figure out how to split them up. Here is what the table looks like now:</p>
  <p><a href="https://i.stack.imgur.com/RO39t.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RO39t.png" alt="Product Table" /></a></p>
  <p>Here is my code:</p>
  <pre><code>@inject('stores')
  @observer
  
  
  class AdminOperatorDetails extends React.Component {
  
  public props: any;
  public operator: IOperator = new IOperator();
  public effectiveDate: IOperatorRegionPrice = new IOperatorRegionPrice();
  public operatorDisposer: any;
  public operatorPriceDisposer: any;
  public operatorExpenseDisposer: any;
  public adminStore: AdminStore;
  public MessageStore: MessageStore;
  private UserStore: UserStore;
  private TenantStore: TenantStore;
  
  
  private operatorPricesHeader = [
      &quot;Product Name&quot;,
      &quot;Primary Category&quot;,
      &quot;Taxable&quot;,
      &quot;Size&quot;,
      &quot;Unit&quot;,
      &quot;Specific Gravity&quot;,
      &quot;Weight&quot;,
      &quot;Cost&quot;,
      &quot;Price&quot;,
      &quot;Effecitve Date&quot;
  ];
  
  
  
  
  
  private operatorPriceHeaderButtons: any;
  
  
  public state = {
      downloadSelected: 'products',
      editingGroupEmail: false,
      effectiveDate: this.effectiveDate,
      groupEmail: new GroupEmail(),
      groupEmailModal: false,
      isDirty: false,
      modal: false,
      operator: this.operator,
      operatorExpenseData: { headers: this.operatorExpenseHeader, rows: []} as IList,
      operatorExpensePrices: [] as IOperatorRegionExpensePrice[],
      operatorId: '',
      operatorPrices: [] as IOperatorRegionPrice[],
      operatorRegionData: { headers: this.operatorPricesHeader, rows: []} as IList,
      redirect: false,
      region: new IRegion(),
      regionId: '',
      regions: [] as IRegion[],
      rowIndex: 0,
      selectedEbp: [] as boolean[],
      selectedProducts: [] as boolean[],
      selectedRegions: [] as boolean[],
      showDownloadModal: false,
      showExpenses: false,
      showPriceListModal: false,
      showProducts: false,
      showRegionModal: false,
  };
  
  constructor(props: any) {
      super(props);
  
      this.adminStore = this.props.stores.AdminStore;
      this.MessageStore = this.props.stores.MessageStore;
      this.UserStore = this.props.stores.UserStore;
      this.TenantStore = this.props.stores.TenantStore;
      this.initializeHeaders();
  }
  
  public componentDidMount() {
      this.createDisposers();
  
  
      this.operatorExportHeaderButtons = [
          {
              content: this.renderExportHeader,
              type: 'render'
          }
      ];
  }
  
  
  
  public componentWillUnmount() {
      this.clearDisposers();
  }
  
  
  public createDisposers() {
      this.operatorDisposer = intercept(this.adminStore, 'operator', (change: any) =&gt; {
          const selectedRegions = this.setSelectedRegions(change.newValue);
          this.setState({
              operator: change.newValue,
              selectedRegions
          });
          
          return change;
      });
  
      this.operatorPriceDisposer = intercept(this.adminStore, 'operatorProductPrices', (change: any) =&gt; {
          this.setState({
              operatorPrices: change.newValue
          }, () =&gt; {
              this.formatOperatorPriceData();
          });
          return change;
      });
  
  
  public clearDisposers() {
      this.operatorDisposer();
      this.operatorPriceDisposer();
  }
  
  public handleChange = (event: any) =&gt; {
      const operator = this.state.operator;
  
      operator[event.target.name] = event.target.value;
  
      this.setState({
          isDirty: true,
          operator
      });
  }
  
  
  private toggleList = (toggleName:string) =&gt; () =&gt; {
      this.setState({
          [toggleName]: !this.state[toggleName]
      });
  }
  
  
   private formatOperatorPriceData = () =&gt; {
      const operatorPrice = this.state.operatorPrices;
      
      const rows:any = [];
  
      operatorPrice.forEach((regionPrice, index) =&gt; {
          const tempRow = [
              {
                  content: regionPrice.name
              },
              {
                  content: regionPrice.category,
              },
              {
                  content: this.renderTaxableCheckbox('operatorPrices', regionPrice, index),
                  sortItem: regionPrice.isTaxable,
                  type: 'render',
              },
              {
                  content: regionPrice.size
              },
              {
                  content: regionPrice.unit
              },
              {
                  content: regionPrice.specificGravity,
              },
              {
                  content: regionPrice.weight,
              },
              {
                  content: this.renderCostInput(regionPrice, index),
                  sortItem: regionPrice.cost,
                  type: 'render',
              },
              {
                  content: this.renderPriceInput(regionPrice, index),
                  sortItem: regionPrice.price,
                  type: 'render'
              },
              {
                  content: regionPrice.effectiveDate
              }
          ];
  
          rows.push(tempRow);
      });
  
      this.setState({operatorRegionData: { headers: this.operatorPricesHeader, rows}});
  }
  
  {
                  this.state.operatorPrices.length &gt; 0 &amp;&amp;
                  &lt;React.Fragment&gt;
                      &lt;Row&gt;
                          &lt;Col&gt;
                                  {/* {
                                      this.state.operatorPrices &amp;&amp; this.state.operatorPrices.map((value, index) =&gt;
                                          &lt;React.Fragment key={value.id}&gt;
                                              {
                                                  this.renderPriceLists(index)
                                              }
                                          &lt;/React.Fragment&gt;
                                      )
                                  } */}
                          {
                              &lt;h4 onClick={this.toggleList('showProducts')}&gt;&lt;OpenArrow color={this.TenantStore.iconColor} open={this.state.showProducts} /&gt;Operator Product Lists&lt;/h4&gt;
                             
                          },
                          &lt;/Col&gt;
                      &lt;/Row&gt;
                      {
                          this.state.showProducts &amp;&amp;
                          &lt;Row&gt;
                              &lt;Col&gt;
                                  &lt;DataTable
                                      list={this.state.operatorRegionData}
                                      headerButtons={this.operatorPriceHeaderButtons}
                                      maxHeight='50vh'
                                  /&gt;
                              &lt;/Col&gt;
                          &lt;/Row&gt;
                      }
                  &lt;/React.Fragment&gt;
              }
  </code></pre>