Split Tables based on Effective Date (typescript)

Question

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:

Here is my 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 = [
    "Product Name",
    "Primary Category",
    "Taxable",
    "Size",
    "Unit",
    "Specific Gravity",
    "Weight",
    "Cost",
    "Price",
    "Effecitve Date"
];





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) => {
        const selectedRegions = this.setSelectedRegions(change.newValue);
        this.setState({
            operator: change.newValue,
            selectedRegions
        });
        
        return change;
    });

    this.operatorPriceDisposer = intercept(this.adminStore, 'operatorProductPrices', (change: any) => {
        this.setState({
            operatorPrices: change.newValue
        }, () => {
            this.formatOperatorPriceData();
        });
        return change;
    });


public clearDisposers() {
    this.operatorDisposer();
    this.operatorPriceDisposer();
}

public handleChange = (event: any) => {
    const operator = this.state.operator;

    operator[event.target.name] = event.target.value;

    this.setState({
        isDirty: true,
        operator
    });
}


private toggleList = (toggleName:string) => () => {
    this.setState({
        [toggleName]: !this.state[toggleName]
    });
}


 private formatOperatorPriceData = () => {
    const operatorPrice = this.state.operatorPrices;
    
    const rows:any = [];

    operatorPrice.forEach((regionPrice, index) => {
        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 > 0 &&
                <React.Fragment>
                    <Row>
                        <Col>
                                {/* {
                                    this.state.operatorPrices && this.state.operatorPrices.map((value, index) =>
                                        <React.Fragment key={value.id}>
                                            {
                                                this.renderPriceLists(index)
                                            }
                                        </React.Fragment>
                                    )
                                } */}
                        {
                            <h4 onClick={this.toggleList('showProducts')}><OpenArrow color={this.TenantStore.iconColor} open={this.state.showProducts} />Operator Product Lists</h4>
                           
                        },
                        </Col>
                    </Row>
                    {
                        this.state.showProducts &&
                        <Row>
                            <Col>
                                <DataTable
                                    list={this.state.operatorRegionData}
                                    headerButtons={this.operatorPriceHeaderButtons}
                                    maxHeight='50vh'
                                />
                            </Col>
                        </Row>
                    }
                </React.Fragment>
            }