Table

import {RhTable} from "@rhythm-ui/react"

<RhTable
  columns={column}
  data={data}
/> 
// The structure of objects in the list of data
/** {
      age: 0,
      firstName: 'Shaina',
      id: '11fada2a-c370-46df-ab7b-324c72d0a51d',
      lastName: 'Toy',
      progress: 21,
      status: 'single',
      subRows: undefined,
      visits: 723
    },
    {
      age: 20,
      firstName: 'Savanah',
      id: 'ff4fa600-6b66-4755-9dd0-671237d32341',
      lastName: 'Medhurst',
      progress: 9,
      status: 'single',
      subRows: undefined,
      visits: 814
    }
  */
  

<RhTable
  columns={column}
  data={data}
  resultsPerPage={5}
  styleOptions={[
    'striped'
  ]}
/> 

<RhTable
  columns={column}
  data={data}
  resultsPerPage={5}
  styleOptions={[
    'verticalLines'
  ]}
/> 

<RhTable
  columns={column}
  data={data}
  resultsPerPage={5}
  styleOptions={[
    'simple',
    'condensed'
  ]}
/> 

<RhTable
  columns={column}
  data={data}
  styleOptions={[
    'striped',
    'stickyHeader'
  ]}
/> 

<RhTable
  columns={column}
  data={data}
  resultsPerPage={5}
  styleOptions={[
    'simple',
    'withoutBorder'
  ]}
/> 

<RhTable
  columnFilter
  columns={column}
  data={data}
  styleOptions={[
    'simple',
    ]}
/> 

<RhTable
  columns={column}
  data={data}
  isLoading
  resultsPerPage={5}
  styleOptions={[
    'simple'
    ]}
/> 

<RhTable
  columns={column}
  data={[]}
  noDataContent={<RhImage alt="No Data Found" className="inline w-[20%] grayscale" src="packages/kitchensink-nextjs/public/images/noData.png"/>}
  resultsPerPage={5}
  styleOptions={[
    'simple'
  ]}
/> 

<RhTable
  columns={column}
  data={data}
  isRowSelection
  onRowSelection={function noRefCheck() {}}
  resultsPerPage={5}
  styleOptions={[
    'simple'
  ]}
/> 

const ManualPagination = (args) => {

    const PAGE_SIZE = 5;
    const [activePage, setActivePage] = useState(0);
    const [data, setData] = useState([]);
    const [isLoading, setIsLoading] = useState(true);

    const fetchData = async (endPoint, PAGE_SIZE, activePage) => {
    	await axios
    		.get(endPoint, { params: { size: PAGE_SIZE, page: activePage } })
    		.then((res) => {
    			setData(res.data);
    			setIsLoading(false);
    		})
    		.catch(() => {
    			alert('Error while fetching data!!');
    		});
    };

    useEffect(() => {
    	setIsLoading(true);
    	fetchData(
    		'https://api.instantwebtools.net/v1/passenger',
    		PAGE_SIZE,
    		activePage
    	);
    }, [activePage]);

    return (
    	<div>
          <RhTable
            data={data.data}
            isLoading={isLoading}
            columns={MunualPaginationColumns}
            styleOptions={['simple']}
            manualPagination={true}
            resultsPerPage={5}
          />
          {data.data?.length > 0 && (
            <RhPagination
              resultsPerPage={PAGE_SIZE}
              totalResults={data.totalPassengers - PAGE_SIZE}
              onChange={setActivePage}
            />
          )}
    	</div>
    );

}; 

<div className='flex flex-col gap-1 p-4'>
  <RhInput
    type='text'
    onChange={(e: { target: { value: SetStateAction<string>; }; }) => setGlobalFilter(e.target.value)}
    inputSize='sm'
    placeholder='Search'
    className='w-56'
  />
  <RhTable
    columns={column}
    data={data}
    globalFilter=""
    resultsPerPage={5}
    setGlobalFilter={function noRefCheck() {}}
    styleOptions={[
      'simple'
    ]}
  /> 
</div>

const ExpandableTable = () => {
  const [expanded, setExpanded] = useState({});
  return (
    <RhTable
      columns={columnsForExpandableView}
      data={dataForExpandableView}
      setExpanded={setExpanded}
      expanded={expanded}
      styleOptions={["simple", "verticalLines"]}
      resultsPerPage={10}
      subRowsDataKey={"subRows"}
      manualPagination={false}
    />
  );
};

  const Grouping = () => {
    const [grouping, setGrouping] = useState([]);
    return (
      <div className="flex flex-col gap-1 p-4">
        <RhTable
          data={dataForGrouping}
          columns={columnsForGrouping}
          isGrouping={true}
          styleOptions={["simple", "verticalLines"]}
          manualPagination={false}
          resultsPerPage={5}
          grouping={grouping}
          setGrouping={setGrouping}
        />
      </div>
    );
  };

  const GroupingWithIconModification = () => {
    const [grouping, setGrouping] = useState([]);
    return (
      <div className="flex flex-col gap-1 p-4">
        <RhTable
          data={dataForGrouping}
          columns={columnsForGrouping}
          isGrouping={true}
          styleOptions={["simple", "verticalLines"]}
          manualPagination={false}
          resultsPerPage={5}
          grouping={grouping}
          setGrouping={setGrouping}
          groupedIcon={
            <RhIcon
              icon="heroicons:check-circle-solid"
              className="text-2xl text-danger-500"
            />
          }
          groupingIcon={
            <RhIcon
              icon="heroicons:user-group-solid"
              className="text-2xl text-warning-500"
            />
          }
        />
      </div>
    );
  };
  

const SubComponent = () => {
  const renderSubComponent = ({ row }: any) => {
    const valuesOfRow = row.original;
    return (
      <div className="mx-8 inline-block p-4 rounded bg-slate-500">
        <div className="flex items-center">
          <RhIcon
            icon="heroicons:user-solid"
            className="text-2xl text-white pr-1"
          />
          <p className="m-0 text-white inline-block">
            {valuesOfRow.firstName} {valuesOfRow.lastName}
          </p>
        </div>
        <p className="m-2 text-white">Check for more details</p>
      </div>
    );
  };
  return (
    <div className="flex flex-col gap-1 p-4">
      <RhTable
        data={dataForSubComponent}
        columns={columnsForSubComponent}
        showSubComponent={true}
        styleOptions={["simple"]}
        manualPagination={false}
        resultsPerPage={5}
        getRowCanExpand={() => true}
        renderSubComponent={renderSubComponent}
      />
    </div>
  );
}