Image if need to create a Grid component. Let’s design the component.

<Grid dataset={...} />

Looks good. Now we have a new requirement to add pagination and export button.

<Grid dataset={...} pagination export />

Still, looks very simple. Next requirements, to add pagination options and export formats.

<Grid dataset={...}
  pagination
  paginationOptions={[100, 500, 1000]}
  export
  exportFormats={['json', 'csv', 'xlsx']} />

Now is time to worry.

Options Object approach

The next step is to combine all the options to just single one.

const options: GridOptions = {
   pagination: true,
   export: true;
   paginationOptions: [100, 500, 1000]
   exportFormats: ['json', 'csv', 'xlsx']
}
<Grid dataset={...} options={options} />

It’s better, but the amount of keys will grow very rapidly. The object inevitable drill downs from the top to the lowest components.

Composition approach

There’s much better solution. Let’s use composite reuse principle for our component.

<Grid>
  <Grid.Table dataset={...} />
  <Grid.Footer>
    <Grid.Pagination options={[100, 500, 1000]} />
    <Grid.Export formats={['json', 'csv', 'xlsx']} />
  </Grid.Footer>
</Grid>

That makes the component very flexible and easy to extend. It has its cost, it adds some boilerplate code. You can always start with single monolith component and later decompose it starts growing.