diff --git a/.storybook/base.css b/.storybook/base.css index 01930df1..093f66dd 100644 --- a/.storybook/base.css +++ b/.storybook/base.css @@ -7,3 +7,8 @@ body { table { width: 100%; } + +code { + line-height: unset !important; + white-space: normal !important; +} diff --git a/stories/columns.stories.mdx b/stories/columns.stories.mdx index 5e6b796f..5c20d6e1 100644 --- a/stories/columns.stories.mdx +++ b/stories/columns.stories.mdx @@ -35,11 +35,11 @@ import { Meta } from '@storybook/addon-docs'; When the breakpoint is reached the column will be hidden. These are the built-in media breakpoint presets when hiding columns: -| Value | Breakpoint | Description | -| ----- | ---------- | ------------------------- | -| sm | 599px | small (phones) | -| md | 959px | medium(landscape tablets) | -| lg | 1280px | large(laptops/desktops) | +| Value | Breakpoint | Description | +| ----- | ---------- | -------------------------- | +| `sm` | `599px` | small (phones) | +| `md` | `959px` | medium (landscape tablets) | +| `lg` | `1280px` | large (laptops/desktops) | # Columns Example diff --git a/stories/conditionalFormatting.stories.mdx b/stories/conditionalFormatting.stories.mdx index 57dd94f9..8ca985e0 100644 --- a/stories/conditionalFormatting.stories.mdx +++ b/stories/conditionalFormatting.stories.mdx @@ -8,7 +8,7 @@ import { Meta } from '@storybook/addon-docs'; | ---------- | ---------------------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | when | function: `row => row.` | yes | `when` accepts a callback that gives you access to your data. The `when` callback must return a boolean to determine if the style will be applied.
e.g. `row => row.status === 'completed'` will apply the style when the `row.status` field is `completed` | | style | `object` or `(row) => object` | no | Accepts a css-in-js [style object](https://www.styled-components.com/docs/advanced#style-objects). Alternativly, you can also specify callback that has access to the row props. e.g. `(row) => ({ backgroundColor: row.isSpecial ? 'pink' : inherit })` | -| classNames | `string[]` | no | In some cases you may want to apply conditional classNames. Accepts an array of classes: e.g. ['class1', 'class2']. | +| classNames | `string[]` | no | In some cases you may want to apply conditional classNames. Accepts an array of classes: e.g. `['class1', 'class2']`. | A Conditional Style Object allows you to apply a specific `style` object based on you data: @@ -46,7 +46,7 @@ RDT allows you to override styling based on your data. Currently, you can apply | Property | Type | Required | Default | Description | | -------------------- | ----- | -------- | ------- | ------------------------------------------------------------------------- | -| conditionalRowStyles | array | no | [] | Allows an array of [conditional style objects](#conditional-style-object) | +| conditionalRowStyles | array | no | `[]` | Allows an array of [conditional style objects](#conditional-style-object) | ## Example `style` Object diff --git a/stories/props.stories.mdx b/stories/props.stories.mdx index c5157639..5ac4860b 100644 --- a/stories/props.stories.mdx +++ b/stories/props.stories.mdx @@ -33,67 +33,67 @@ import { Meta } from '@storybook/addon-docs'; # Sorting -| Property | Type | Required | Default | Description | -| ------------------ | --------------------------------------------------- | -------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| defaultSortFieldId | string or number | no | null | The `defaultSortFieldId` sets the a column to be pre sorted and corresponds to the a column definition `id` | -| defaultSortAsc | boolean | no | true | Set this to false if you want the table data to be sorted in DESC order.

**Note:** This will apply work when the table is initially loaded | -| sortIcon | component | no | built-in | Override the default sort icon - the icon must be a font or svg icon and it should be a "downward" icon since animation will be handled by React Data Table | -| sortServer | boolean | no | false | Disables internal sorting for use with server-side/remote sorting or when you want to manually control the sort behavior. place your sorting logic and/or api calls in an `onSort` handler.

**Note:** `sortFunction` is a better choice if you simply want to override the internal sorting behavior | -| sortFunction | `(rows, selector, direction) => {}` | no | null | Pass in your own custom sort function. **Your function must return an new array reference**, otherwise RDT will not re-render. For example, `Array.sort` sorts the array in place but because of JavaScript object equality it will be the same reference and will not re-render. A common pattern is to return `yourArray.slice(0)` which creates a new array | -| onSort | `(selectedColumn, sortDirection, sortedRows) => {}` | no | | callback to access the sort state when a column is clicked. returns ([column](/docs/api-columns--page), sortDirection, event) | +| Property | Type | Required | Default | Description | +| ------------------ | ----------------- | -------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| defaultSortFieldId | string or number | no | null | The `defaultSortFieldId` sets the a column to be pre sorted and corresponds to the a column definition `id` | +| defaultSortAsc | boolean | no | true | Set this to false if you want the table data to be sorted in DESC order.

**Note:** This will apply work when the table is initially loaded | +| sortIcon | component | no | built-in | Override the default sort icon - the icon must be a font or svg icon and it should be a "downward" icon since animation will be handled by React Data Table | +| sortServer | boolean | no | false | Disables internal sorting for use with server-side/remote sorting or when you want to manually control the sort behavior. place your sorting logic and/or api calls in an `onSort` handler.

**Note:** `sortFunction` is a better choice if you simply want to override the internal sorting behavior | +| sortFunction | _See description_ | no | null | Pass in your own custom sort function. **Your function must return an new array reference**, otherwise RDT will not re-render. For example, `Array.sort` sorts the array in place but because of JavaScript object equality it will be the same reference and will not re-render. A common pattern is to return `yourArray.slice(0)` which creates a new array.

**Type:** `(rows, selector, direction) => {}` | +| onSort | _See description_ | no | | Callback to access the sort state when a column is clicked. Returns `(column, sortDirection, event)`. See [Columns](/docs/api-columns--page) for Column Definitions API.

**Type:** `(selectedColumn, sortDirection, sortedRows) => {}` | # Row Selection -| Property | Type | Required | Default | Description | -| ---------------------------- | ------------------------------------------------------ | -------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| selectableRows | boolean | no | false | Whether to show selectable checkboxes | -| selectableRowsVisibleOnly | boolean | no | false | When using using `pagination` and `selectableRows` all rows in `data` are selected by default if you check the select all rows checkbox. For example, if you have 20 rows and with `pagination` 10 rows per page clicking on the select all checkbox results in 20 rows being selected (i.e. rows are selected that are not in the view). However, with `selectableRowsVisibleOnly` only the 10 rows that are visible (those that are on the current page) are allowed to be selected using select all.

Things to note when using `selectableRowsVisibleOnly`:
1. When you sort then selected items will be cleared
2. When using `sortServer` for server side sorting you do not need to set `selectableRowsVisibleOnly` as the behavior is implicit | -| selectableRowsHighlight | boolean | no | false | Highlight a row when it is selected | -| selectableRowsSingle | boolean | no | false | Switches to single row selection mode. `onSelectedRowsChange` will still return an array of `selectedRows`, but it will only be a single array item | -| selectableRowsNoSelectAll | boolean | no | false | Whether to show the select all rows checkbox | -| clearSelectedRows | boolean | no | false | Toggling this property clears the selectedRows. If you use redux or react state you need to make sure that you pass a toggled value or the component will not update. See [Clearing Selected Rows](/docs/selectable-manage-selections--manage-selections#clearing-row-selections) | -| selectableRowsComponent | component | no | built-in | Overrides the default checkbox component. Must be passed as: `Checkbox` not ``. You can also find UI Library Integration examples [here](/docs/getting-started-library-integration--page) | -| selectableRowsComponentProps | object | no | {} | Additional props you want to pass to `selectableRowsComponent`. See [Material UI Example](/docs/ui-library-material-ui-table--table) to learn how you can override indeterminate state | -| selectableRowSelected | `(row) => {}` | no | | Select a row based on a property in your data. e.g. `row => row.isSelected`. `selectableRowSelected` must return a boolean to determine if the row should be programatically selected.

**Important Notes:**
- Changing the state of selectableRowSelected will NOT re-render RDT, instead you should change your data if you want to update the items that are selected.
- When using `selectableRowsSingle` `selectableRowSelected` will only return the first match | -| selectableRowDisabled | `(row) => {}` | no | | Disable row select based on a property in your data. e.g. `row => row.isDisabled`. `selectableRowDisabled` must return a boolean to determine if the row should be programatically disabled. | -| onSelectedRowsChange | `({ allSelected; selectedCount; selectedRows }) => {}` | no | | Callback that fires anytime the rows selected state changes. Returns `({ allSelected, selectedCount, selectedRows })`.

**Note:** It's highly recommended that you memoize the callback that you pass to `onSelectedRowsChange` if it updates the state of your parent component. This prevents `DataTable` from unnecessary re-renders every time your parent component is re-rendered | +| Property | Type | Required | Default | Description | +| ---------------------------- | ----------------- | -------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| selectableRows | boolean | no | false | Whether to show selectable checkboxes | +| selectableRowsVisibleOnly | boolean | no | false | When using using `pagination` and `selectableRows` all rows in `data` are selected by default if you check the select all rows checkbox. For example, if you have 20 rows and with `pagination` 10 rows per page clicking on the select all checkbox results in 20 rows being selected (i.e. rows are selected that are not in the view). However, with `selectableRowsVisibleOnly` only the 10 rows that are visible (those that are on the current page) are allowed to be selected using select all.

Things to note when using `selectableRowsVisibleOnly`:
1. When you sort then selected items will be cleared
2. When using `sortServer` for server side sorting you do not need to set `selectableRowsVisibleOnly` as the behavior is implicit | +| selectableRowsHighlight | boolean | no | false | Highlight a row when it is selected | +| selectableRowsSingle | boolean | no | false | Switches to single row selection mode. `onSelectedRowsChange` will still return an array of `selectedRows`, but it will only be a single array item | +| selectableRowsNoSelectAll | boolean | no | false | Whether to show the select all rows checkbox | +| clearSelectedRows | boolean | no | false | Toggling this property clears the selectedRows. If you use redux or react state you need to make sure that you pass a toggled value or the component will not update. See [Clearing Selected Rows](/docs/selectable-manage-selections--manage-selections#clearing-row-selections) | +| selectableRowsComponent | component | no | built-in | Overrides the default checkbox component. Must be passed as: `Checkbox` not ``. You can also find UI Library Integration examples [here](/docs/getting-started-library-integration--page) | +| selectableRowsComponentProps | object | no | {} | Additional props you want to pass to `selectableRowsComponent`. See [Material UI Example](/docs/ui-library-material-ui-table--table) to learn how you can override indeterminate state | +| selectableRowSelected | `(row) => {}` | no | | Select a row based on a property in your data. e.g. `row => row.isSelected`. `selectableRowSelected` must return a boolean to determine if the row should be programatically selected.

**Important Notes:**
- Changing the state of selectableRowSelected will NOT re-render RDT, instead you should change your data if you want to update the items that are selected.
- When using `selectableRowsSingle` `selectableRowSelected` will only return the first match | +| selectableRowDisabled | `(row) => {}` | no | | Disable row select based on a property in your data. e.g. `row => row.isDisabled`. `selectableRowDisabled` must return a boolean to determine if the row should be programatically disabled. | +| onSelectedRowsChange | _See description_ | no | | Callback that fires anytime the rows selected state changes. Returns `({ allSelected, selectedCount, selectedRows })`.

**Type:** `({ allSelected; selectedCount; selectedRows }) => {}`

**Note:** It's highly recommended that you memoize the callback that you pass to `onSelectedRowsChange` if it updates the state of your parent component. This prevents `DataTable` from unnecessary re-renders every time your parent component is re-rendered. | # Row Expander -| Property | Type | Required | Default | Description | -| ---------------------------------- | ----------------------- | -------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| expandableRows | boolean | no | false | Whether to make a row expandable, if true it requires an `expandableRowsComponent`. It is **highly recommended** your data set have a unique identifier defined as the `keyField` for row expansion to work properly. | -| expandableIcon | object | no | default expander icons | you may pass in your own custom icons using the `expandableIcon: { collapsed: ..., expanded: ...` | -| expandableRowExpanded | `(row) => {}` | no | | Expand a row based on a property in your data. e.g. `row => row.expandMe`. `expandableRowExpanded` must return a boolean to determine if the row should be programatically expanded. | -| expandableRowDisabled | `(row) => {}` | no | | Disable a row expand based on a property in your data. e.g. `row => row.expandDisabled`. `expandableRowDisabled` must return a boolean to determine if the row should be programatically disabled. | -| expandableRowsComponent | component | no | | A custom component to display in the expanded row. Must be passed as: `MyExpander` not ``. Your component will have access to the row `data`. For example: `const MyExpander = props =>
{props.data.name}
` | -| expandableRowsComponentProps | object | no | | Additional props you want to pass to your custom `expandableRowsComponent`. By default `expandableRowsComponent` will have a `data` prop that you may access the row data with. New props added via `expandableRowsComponentProps` wil be composed | -| expandOnRowClicked | boolean | no | | The default behavior is to expand the row when the expander button is clicked. `expandOnRowClicked` allows expanding the row when an area within the row is clicked. Requires `expandableRows` be set to true.

**Note:** that if you are using custom cells (`column[].cell`), you will need to apply the `data-tag="allowRowEvents"` to the innermost element or on the elements you want to propagate the `expandOnRowClicked` event to. | -| expandOnRowDoubleClicked | boolean | no | | The default behavior is to expand the row when the expander button is clicked. `expandOnRowDoubleClicked` allows expanding the row when an area within the row is double clicked. Requires `expandableRows` be set to true.

**Note:** that if you are using custom cells (`column[].cell`), you will need to apply the `data-tag="allowRowEvents"` to the innermost element or on the elements you want to propagate the `expandOnRowDoubleClicked` event to. | -| expandableRowsHideExpander | boolean | no | false | Do not render the expander button. This is useful when using `expandOnRowClicked` or `expandOnRowDoubleClicked` | -| expandableInheritConditionalStyles | boolean | no | false | Whether to apply `conditionalRowStyles` to the expander row | -| onRowExpandToggled | `(expanded, row) => {}` | no | | When a row is Expanded or Collapsed `onRowExpandToggled` will fire and return (toggleState, row) | +| Property | Type | Required | Default | Description | +| ---------------------------------- | ----------------- | -------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| expandableRows | boolean | no | false | Whether to make a row expandable, if true it requires an `expandableRowsComponent`. It is **highly recommended** your data set have a unique identifier defined as the `keyField` for row expansion to work properly. | +| expandableIcon | object | no | default expander icons | you may pass in your own custom icons using the `expandableIcon: { collapsed: ..., expanded: ... }` | +| expandableRowExpanded | `(row) => {}` | no | | Expand a row based on a property in your data. e.g. `row => row.expandMe`. `expandableRowExpanded` must return a boolean to determine if the row should be programatically expanded. | +| expandableRowDisabled | `(row) => {}` | no | | Disable a row expand based on a property in your data. e.g. `row => row.expandDisabled`. `expandableRowDisabled` must return a boolean to determine if the row should be programatically disabled. | +| expandableRowsComponent | component | no | | A custom component to display in the expanded row. Must be passed as: `MyExpander` not ``. Your component will have access to the row `data`. For example: `const MyExpander = props =>
{props.data.name}
` | +| expandableRowsComponentProps | object | no | | Additional props you want to pass to your custom `expandableRowsComponent`. By default `expandableRowsComponent` will have a `data` prop that you may access the row data with. New props added via `expandableRowsComponentProps` wil be composed | +| expandOnRowClicked | boolean | no | | The default behavior is to expand the row when the expander button is clicked. `expandOnRowClicked` allows expanding the row when an area within the row is clicked. Requires `expandableRows` be set to true.

**Note:** that if you are using custom cells (`column[].cell`), you will need to apply the `data-tag="allowRowEvents"` to the innermost element or on the elements you want to propagate the `expandOnRowClicked` event to. | +| expandOnRowDoubleClicked | boolean | no | | The default behavior is to expand the row when the expander button is clicked. `expandOnRowDoubleClicked` allows expanding the row when an area within the row is double clicked. Requires `expandableRows` be set to true.

**Note:** that if you are using custom cells (`column[].cell`), you will need to apply the `data-tag="allowRowEvents"` to the innermost element or on the elements you want to propagate the `expandOnRowDoubleClicked` event to. | +| expandableRowsHideExpander | boolean | no | false | Do not render the expander button. This is useful when using `expandOnRowClicked` or `expandOnRowDoubleClicked` | +| expandableInheritConditionalStyles | boolean | no | false | Whether to apply `conditionalRowStyles` to the expander row | +| onRowExpandToggled | _See description_ | no | | When a row is Expanded or Collapsed `onRowExpandToggled` will fire and return `(toggleState, row)`.

**Type:** `(expanded, row) => {}` | # Pagination -| Property | Type | Required | Default | Description | -| ---------------------------- | ----------------------------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| pagination | boolean | no | false | Enable pagination with defaults. by default the total record set will be sliced depending on the page, rows per page. if you wish to use server side pagination then use the `paginationServer` property | -| paginationServer | boolean | no | false | Changes the default pagination to work with server side pagination | -| paginationServerOptions | object | no | `{ persistSelectedOnPageChange: false, persistSelectedOnSort: false }` | When using `selectableRows` is used to make selected rows persist on page change and on sort when using server side pagination.

**Note:** when using `persistSelectedOnPageChange` that select all checkbox will not be visible (i.e. you cannot select rows there you have to retrieved from the server) | -| paginationDefaultPage | number | no | 1 | The default page to use when the table initially loads | -| paginationResetDefaultPage | boolean | no | false | The prop can be "toggled" to reset the pagination back to `paginationDefaultPage`. For this to work make sure you are using some sort of state and toggling the prop. e.g. `setResetPaginationToggle(!resetPaginationToggle)` or for a class component `setState(resetPaginationToggle: !resetPaginationToggle)` | -| paginationTotalRows | number | no | 0 | Allows you to provide the total row count for your table as represented by your API when performing server side pagination. if this property is not provided then react-data-table will use `data.length` | -| paginationPerPage | number | no | 10 | The default rows per page to use when the table initially loads | -| paginationRowsPerPageOptions | number | no | `[10, 15, 20, 25, 30]` | Row page dropdown selection options | | Callback when rows per page is changed returns `onChangeRowsPerPage(currentRowsPerPage, currentPage)` | -| paginationComponent | component | no | [Pagination](https://github.com/jbetancur/react-data-table-component/blob/next/src/DataTable/Pagination.tsx) | A component that overrides the default pagination component. It must satisfy the following API: `{ rowsPerPage: PropTypes.number.isRequired, rowCount: PropTypes.number.isRequired, onChangePage: PropTypes.func.isRequired, onChangeRowsPerPage: PropTypes.func.isRequired, currentPage: PropTypes.number.isRequired };` | -| paginationComponentOptions | object | no | `{ rowsPerPageText: 'Rows per page:', rangeSeparatorText: 'of', noRowsPerPage: false, selectAllRowsItem: false, selectAllRowsItemText: 'All' }` | Override options for the built in pagination component. _Note that this prop only works with the built-in Pagination component_ | -| paginationIconFirstPage | component | no | built-in | A component that overrides the first page icon for the pagination.

**Note:** that this prop only works with the build in Pagination component\* | -| paginationIconLastPage | component | no | built-in | A component that overrides the last page icon for the pagination.

**Note:** that this prop only works with the build in Pagination component\* | -| paginationIconNext | component | no | built-in | A component that overrides the next page icon for the pagination.

**Note:** that this prop only works with the build in Pagination component\* | -| paginationIconPrevious | component | no | built-in | A component that overrides the previous page icon for the pagination.

**Note:** that this prop only works with the build in Pagination component\* | -| onChangePage | `(page, totalRows) => {}` | no | null | Callback when paged that returns `onChangePage(page, totalRows)` | -| onChangeRowsPerPage | `(currentRowsPerPage, currentPage) => {}` | no | null | +| Property | Type | Required | Default | Description | +| ---------------------------- | ----------------- | -------- | ------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| pagination | boolean | no | false | Enable pagination with defaults. by default the total record set will be sliced depending on the page, rows per page. if you wish to use server side pagination then use the `paginationServer` property | +| paginationServer | boolean | no | false | Changes the default pagination to work with server side pagination | +| paginationServerOptions | object | no | _See description_ | When using `selectableRows` is used to make selected rows persist on page change and on sort when using server side pagination.

**Default value:** `{ persistSelectedOnPageChange: false, persistSelectedOnSort: false }`

**Note:** when using `persistSelectedOnPageChange` that select all checkbox will not be visible (i.e. you cannot select rows there you have to retrieved from the server) | +| paginationDefaultPage | number | no | 1 | The default page to use when the table initially loads | +| paginationResetDefaultPage | boolean | no | false | The prop can be "toggled" to reset the pagination back to `paginationDefaultPage`. For this to work make sure you are using some sort of state and toggling the prop. e.g. `setResetPaginationToggle(!resetPaginationToggle)` or for a class component `setState(resetPaginationToggle: !resetPaginationToggle)` | +| paginationTotalRows | number | no | 0 | Allows you to provide the total row count for your table as represented by your API when performing server side pagination. if this property is not provided then react-data-table will use `data.length` | +| paginationPerPage | number | no | 10 | The default rows per page to use when the table initially loads | +| paginationRowsPerPageOptions | number | no | `[10, 15, 20, 25, 30]` | Row page dropdown selection options | +| paginationComponent | component | no | [Pagination](https://github.com/jbetancur/react-data-table-component/blob/next/src/DataTable/Pagination.tsx) | A component that overrides the default pagination component. It must satisfy the following API: `{ rowsPerPage: PropTypes.number.isRequired, rowCount: PropTypes.number.isRequired, onChangePage: PropTypes.func.isRequired, onChangeRowsPerPage: PropTypes.func.isRequired, currentPage: PropTypes.number.isRequired }` | +| paginationComponentOptions | object | no | _See description_ | Override options for the built in pagination component. _Note that this prop only works with the built-in Pagination component._

**Default value:** `{ rowsPerPageText: 'Rows per page:', rangeSeparatorText: 'of', noRowsPerPage: false, selectAllRowsItem: false, selectAllRowsItemText: 'All' }` | +| paginationIconFirstPage | component | no | built-in | A component that overrides the first page icon for the pagination.

**Note:** that this prop only works with the build in Pagination component\* | +| paginationIconLastPage | component | no | built-in | A component that overrides the last page icon for the pagination.

**Note:** that this prop only works with the build in Pagination component\* | +| paginationIconNext | component | no | built-in | A component that overrides the next page icon for the pagination.

**Note:** that this prop only works with the build in Pagination component\* | +| paginationIconPrevious | component | no | built-in | A component that overrides the previous page icon for the pagination.

**Note:** that this prop only works with the build in Pagination component\* | +| onChangePage | _See description_ | no | null | Callback that fires when page is changed and returns `onChangePage (page, totalRows)`.

**Type:** `(page, totalRows) => {}` | +| onChangeRowsPerPage | _See description_ | no | null | Callback that fires when rows per page is changed and returns `onChangeRowsPerPage (currentRowsPerPage, currentPage)`.

**Type:** `(currentRowsPerPage, currentPage) => {}` | # Headers @@ -110,12 +110,12 @@ import { Meta } from '@storybook/addon-docs'; # Header Context Menu when using Selectable Rows -| Property | Type | Required | Default | Description | -| ---------------- | --------- | -------- | ------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| contextMessage | object | no | `{ singular: 'item', plural: 'items', message: 'selected' }` | Override the context menu selected message when using `selectableRows` | -| contextActions | component | no | null | Add context actions to the context menu when using `selectableRows` | -| contextComponent | component | no | null | Overide the default context menu when using `selectableRows` with your own custom componet. RDT will compose the `selectedCount` prop to your custom component. For example, `const CustomContext = (selectedCount) >
{selectedCount}
` gives you access to the row count.

**Note:** This will negate `contextMessage` and `contextActions` | -| noContextMenu | boolean | no | false | Do not display the context menu when using `selectableRows` | +| Property | Type | Required | Default | Description | +| ---------------- | --------- | -------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| contextMessage | object | no | _See description_ | Override the context menu selected message when using `selectableRows`.

**Default value:** `{ singular: 'item', plural: 'items', message: 'selected' }` | +| contextActions | component | no | null | Add context actions to the context menu when using `selectableRows` | +| contextComponent | component | no | null | Overide the default context menu when using `selectableRows` with your own custom componet. RDT will compose the `selectedCount` prop to your custom component. For example, `const CustomContext = (selectedCount) =>
{selectedCount}
` gives you access to the row count.

**Note:** This will negate `contextMessage` and `contextActions` | +| noContextMenu | boolean | no | false | Do not display the context menu when using `selectableRows` | # Progress/Loading Indicator @@ -126,7 +126,7 @@ import { Meta } from '@storybook/addon-docs'; # Theming and Customization -| Property | Type | Required | Default | Description | -| ------------ | ------ | -------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| theme | string | no | 'default' | Possible values are `default` or `dark` | -| customStyles | object | no | | [styles.js](https://github.com/jbetancur/react-data-table-component/blob/next/src/DataTable/styles.ts) for a detailed catalog of RDT styles that you can override or extend using css-in-js objects | +| Property | Type | Required | Default | Description | +| ------------ | ------ | -------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| theme | string | no | default | Possible values are `default` or `dark` | +| customStyles | object | no | | [styles.js](https://github.com/jbetancur/react-data-table-component/blob/next/src/DataTable/styles.ts) for a detailed catalog of RDT styles that you can override or extend using css-in-js objects |