Release 5.0.2-beta.1

Fixed

• endless loop on pagination state when paginating client-side

Added

• auto pageIndex reset when paginating server side

Release 5.0.2-beta.0

Fixed

• endless loop on pagination state when paginating client-side

Release 5.0.1

Fixed

• sorting and columnFilters can be possibly undefined for not useReactDataTable hook

Release 5.0.0

Changed

• the reset icon will now reset the table to the initialState if provided, otherwise to the first value of the state
• 💥 the sorting accepts now a strongly typed object instead of a list
• 💥 the columnFilters can be used only defining a filter type to datatable hooks

Removed

• 💥 utilities getColumnFilterFromModel and getModelFromColumnFilter are not exposed anymore

Release 4.2.0

Added

• option dragAndDropOptions to enable drag-and-drop rows via @dnd-kit package.

Added

• option cellClassName added to the column meta to add class names to every cell of a column
• option headerClassName added to the column meta to add class names to every header of a column
• option footerStyle added to the column meta to add styles to every footer of a column
• option footerClassName added to the column meta to add class names to every footer of a column

Release 4.1.0

Added

• option hidePageSizeChange added to hide the possibility to change the page size

Release 4.0.0

Added

• Skeletons for when the data is loading

Changed

• 💥 Fundamentally changed how this package works. The state is now managed by the consumer of this package. This means that the consumer has to provide the data and the functions to update the data. The package only provides the UI components to display the data. This change was necessary to make the package more flexible and to allow the consumer to use the package in a wider range of use cases. Behind the scenes, the package uses the useTable hook from the @tanstack/react-table package. The consumer can use the useTable hook directly if he wants to. The ReactDataTable component is just a wrapper around the useTable hook. The ReactDataTable component is still the recommended way to use this package.

• 💥 renamed possiblePageItemCounts to pageSizes.

• 💥 columns is now of type ColumnDef<TData, TValue> from the @tanstack/react-table package. Please refer to the documentation of the @tanstack/react-table package for more information: https://tanstack.com/table/v8/docs/api/core/table#columns (there are additional custom fields in the column.meta object defined by us: src/react-table.d.ts)

Removed

• 💥 removed rowHighlight. Use rowStyle instead.
• 💥 removed enablePredefinedSort prop. Use initialState.sorting instead. Or state.sorting if you want to manage the state yourself.
• 💥 removed predefinedFilter prop. Use initialState.
• 💥 removed asc prop. Use initialState.sorting instead. Or state.sorting if you want to manage the state yourself.
• 💥 removed predefinedItemsPerPage prop. Use initialState.pagination.pageSize instead. Or state.pagination.pageSize if you want to manage the state yourself.
• 💥 removed orderBy prop. Use initialState.sorting instead. Or state.sorting if you want to manage the state yourself.
• 💥 removed client prop. Use data prop instead and manage the state of the data yourself.
• 💥 removed query prop. Use data prop instead and manage the state of the data yourself.
• 💥 removed handlers prop. Since the state is now managed by the user, the user is responsible for updating the data.
• 💥 removed actions props. You can easily define whatever actions you would like to have in the columns prop.
  This is an example of how you could configure the actions column:

import { createColumnHelper } from "@tanstack/react-table";

const columnHelper = createColumnHelper<YourData>();
columnHelper.display({
      id: "edit",
      header: () => <span>Aktionen</span>,
      cell: (props) => (
        <>
          <Link href={{ pathname: "/addresses/[addressId]", query: { addressId: props.row.getValue("addressId") } }}>
            <FontAwesomeIcon icon={faEye} style={{ marginRight: "5px" }} />
          </Link>
          <FontAwesomeIcon
            icon={faTrash}
            style={{ marginRight: "5px" }}
            onClick={async () => {
                //  do something
            }}
          />
        </>
      ),
    }),

Release 4.0.0-beta.4

Added

• Skeletons for when the data is loading

Changed

• 💥 Fundamentally changed how this package works. The state is now managed by the consumer of this package. This means that the consumer has to provide the data and the functions to update the data. The package only provides the UI components to display the data. This change was necessary to make the package more flexible and to allow the consumer to use the package in a wider range of use cases. Behind the scenes, the package uses the useTable hook from the @tanstack/react-table package. The consumer can use the useTable hook directly if he wants to. The ReactDataTable component is just a wrapper around the useTable hook. The ReactDataTable component is still the recommended way to use this package.

• 💥 renamed possiblePageItemCounts to pageSizes.

• 💥 columns is now of type ColumnDef<TData, TValue> from the @tanstack/react-table package. Please refer to the documentation of the @tanstack/react-table package for more information: https://tanstack.com/table/v8/docs/api/core/table#columns

Removed

• 💥 removed rowHighlight. Use rowStyle instead.
• 💥 removed enablePredefinedSort prop. Use initialState.sorting instead. Or state.sorting if you want to manage the state yourself.
• 💥 removed predefinedFilter prop. Use `initialState.
• 💥 removed asc prop. Use initialState.sorting instead. Or state.sorting if you want to manage the state yourself.
  columnFiltersinstead. Orstate.columnFilters` if you want to manage the state yourself.
• 💥 removed predefinedItemsPerPage prop. Use initialState.pagination.pageSize instead. Or state.pagination.pageSize if you want to manage the state yourself.
• 💥 removed orderBy prop. Use initialState.sorting instead. Or state.sorting if you want to manage the state yourself.
• 💥 removed client prop. Use data prop instead and manage the state of the data yourself.
• 💥 removed query prop. Use data prop instead and manage the state of the data yourself.
• 💥 removed handlers prop. Since the state is now managed by the user, the user is responsible for updating the data.
• 💥 removed actions props. You can easily define whatever actions you would like to have in the columns prop.
  This is an example of how you could configure the actions column:

import { createColumnHelper } from "@tanstack/react-table";

const columnHelper = createColumnHelper<YourData>();
columnHelper.display({
      id: "edit",
      header: () => <span>Aktionen</span>,
      cell: (props) => (
        <>
          <Link href={{ pathname: "/addresses/[addressId]", query: { addressId: props.row.getValue("addressId") } }}>
            <FontAwesomeIcon icon={faEye} style={{ marginRight: "5px" }} />
          </Link>
          <FontAwesomeIcon
            icon={faTrash}
            style={{ marginRight: "5px" }}
            onClick={async () => {
                //  do something
            }}
          />
        </>
      ),
    }),

Release 4.0.0-beta.3

Added

• Skeletons for when the data is loading

Changed

• 💥 Fundamentally changed how this package works. The state is now managed by the consumer of this package. This means that the consumer has to provide the data and the functions to update the data. The package only provides the UI components to display the data. This change was necessary to make the package more flexible and to allow the consumer to use the package in a wider range of use cases. Behind the scenes, the package uses the useTable hook from the @tanstack/react-table package. The consumer can use the useTable hook directly if he wants to. The ReactDataTable component is just a wrapper around the useTable hook. The ReactDataTable component is still the recommended way to use this package.

• 💥 renamed possiblePageItemCounts to pageSizes.

• 💥 columns is now of type ColumnDef<TData, TValue> from the @tanstack/react-table package. Please refer to the documentation of the @tanstack/react-table package for more information: https://tanstack.com/table/v8/docs/api/core/table#columns

Removed

• 💥 removed rowHighlight. Use rowStyle instead.
• 💥 removed enablePredefinedSort prop. Use initialState.sorting instead. Or state.sorting if you want to manage the state yourself.
• 💥 removed predefinedFilter prop. Use `initialState.
• 💥 removed asc prop. Use initialState.sorting instead. Or state.sorting if you want to manage the state yourself.
  columnFiltersinstead. Orstate.columnFilters` if you want to manage the state yourself.
• 💥 removed predefinedItemsPerPage prop. Use initialState.pagination.pageSize instead. Or state.pagination.pageSize if you want to manage the state yourself.
• 💥 removed orderBy prop. Use initialState.sorting instead. Or state.sorting if you want to manage the state yourself.
• 💥 removed client prop. Use data prop instead and manage the state of the data yourself.
• 💥 removed query prop. Use data prop instead and manage the state of the data yourself.
• 💥 removed handlers prop. Since the state is now managed by the user, the user is responsible for updating the data.
• 💥 removed actions props. You can easily define whatever actions you would like to have in the columns prop.
  This is an example of how you could configure the actions column:

import { createColumnHelper } from "@tanstack/react-table";

const columnHelper = createColumnHelper<YourData>();
columnHelper.display({
      id: "edit",
      header: () => <span>Aktionen</span>,
      cell: (props) => (
        <>
          <Link href={{ pathname: "/addresses/[addressId]", query: { addressId: props.row.getValue("addressId") } }}>
            <FontAwesomeIcon icon={faEye} style={{ marginRight: "5px" }} />
          </Link>
          <FontAwesomeIcon
            icon={faTrash}
            style={{ marginRight: "5px" }}
            onClick={async () => {
                //  do something
            }}
          />
        </>
      ),
    }),

Release 4.0.0-beta.2

Added

• Skeletons for when the data is loading

Changed

• 💥 Fundamentally changed how this package works. The state is now managed by the consumer of this package. This means that the consumer has to provide the data and the functions to update the data. The package only provides the UI components to display the data. This change was necessary to make the package more flexible and to allow the consumer to use the package in a wider range of use cases. Behind the scenes, the package uses the useTable hook from the @tanstack/react-table package. The consumer can use the useTable hook directly if he wants to. The ReactDataTable component is just a wrapper around the useTable hook. The ReactDataTable component is still the recommended way to use this package.

• 💥 renamed possiblePageItemCounts to pageSizes.

• 💥 columns is now of type ColumnDef<TData, TValue> from the @tanstack/react-table package. Please refer to the documentation of the @tanstack/react-table package for more information: https://tanstack.com/table/v8/docs/api/core/table#columns

Removed

• 💥 removed rowHighlight. Use rowStyle instead.
• 💥 removed enablePredefinedSort prop. Use initialState.sorting instead. Or state.sorting if you want to manage the state yourself.
• 💥 removed predefinedFilter prop. Use `initialState.
• 💥 removed asc prop. Use initialState.sorting instead. Or state.sorting if you want to manage the state yourself.
  columnFiltersinstead. Orstate.columnFilters` if you want to manage the state yourself.
• 💥 removed predefinedItemsPerPage prop. Use initialState.pagination.pageSize instead. Or state.pagination.pageSize if you want to manage the state yourself.
• 💥 removed orderBy prop. Use initialState.sorting instead. Or state.sorting if you want to manage the state yourself.
• 💥 removed client prop. Use data prop instead and manage the state of the data yourself.
• 💥 removed query prop. Use data prop instead and manage the state of the data yourself.
• 💥 removed handlers prop. Since the state is now managed by the user, the user is responsible for updating the data.
• 💥 removed actions props. You can easily define whatever actions you would like to have in the columns prop.
  This is an example of how you could configure the actions column:

import { createColumnHelper } from "@tanstack/react-table";

const columnHelper = createColumnHelper<YourData>();
columnHelper.display({
      id: "edit",
      header: () => <span>Aktionen</span>,
      cell: (props) => (
        <>
          <Link href={{ pathname: "/addresses/[addressId]", query: { addressId: props.row.getValue("addressId") } }}>
            <FontAwesomeIcon icon={faEye} style={{ marginRight: "5px" }} />
          </Link>
          <FontAwesomeIcon
            icon={faTrash}
            style={{ marginRight: "5px" }}
            onClick={async () => {
                //  do something
            }}
          />
        </>
      ),
    }),